X-Git-Url: https://www.kengrimes.com/gitweb/?p=kengrimes.com%2Fcontent.git;a=blobdiff_plain;f=content.org;h=714e4f063bee59f3b96d75773a4a08949af13a38;hp=2ef879c87cff10dd494dc5b26972faf23283a30c;hb=HEAD;hpb=e3a89daeb6e4daa3240e594e6afea212b07b84cf diff --git a/content.org b/content.org index 2ef879c..714e4f0 100644 --- a/content.org +++ b/content.org @@ -1,977 +1,740 @@ #+hugo_base_dir: . #+hugo_level_offset: 0 #+seq_todo: TODO DRAFT DONE - -#+startup: indent showeverything - -#+author: Ken Grimes +#+startup: indent showall * Home :PROPERTIES: :EXPORT_HUGO_SECTION: :END: -** Blog +** Computers are the Devil :PROPERTIES: -:EXPORT_HUGO_CUSTOM_FRONT_MATTER: :caption '("A Nonnormative Tomorrow") -:EXPORT_HUGO_CUSTOM_FRONT_MATTER+: :header /img/blog.png +:EXPORT_HUGO_CUSTOM_FRONT_MATTER: :header /img/blog.png :EXPORT_FILE_NAME: _index -:EXPORT_HUGO_MENU: :menu "main" :weight -1 +:EXPORT_HUGO_MENU: :menu "main" :weight -1 :title Blog +:END: + +** DONE Using ox-hugo To Build Websites with Emacs :org:emacs:hugo:@tutorial: +CLOSED: [2018-04-19 Thu 18:06] +:PROPERTIES: +:EXPORT_FILE_NAME: ox-hugo-tutorial +:EXPORT_HUGO_CUSTOM_FRONT_MATTER: :header /img/org.png :END: -** DONE Another topic -CLOSED: [2018-04-05 Thu 18:29] +This article explains in detail the process of setting up a bare-bones website +using Hugo and Org mode. My goal in writing this is to provide readers with a +superior understanding of the fundamentals of this workflow. It is by no means +an exhaustive explanation of Org mode or Emacs, but should give readers of any +skill level a strong foundation to apply their own knowledge and techniques to +the Emacs-Hugo toolchain. + +I assume only beginner-level knowledge of Emacs. + +*** Intro & Setup +[[https://github.com/kaushalmodi][Kaushal Modi]] created ox-hugo on top of his ox-blackfriday package, providing an +impressive amount of features for organizing blog text and linked data with +Hugo. He maintains [[https://ox-hugo.scripter.co/][great documentation]] and ample [[https://github.com/kaushalmodi/ox-hugo/tree/master/test/site/content-org][examples]] for using the +package. I will explain my own workflow here, but for an exhaustive (though +terse) reference, I highly recommend Modi's [[https://ox-hugo.scripter.co/test/][test site]] and [[https://raw.githubusercontent.com/kaushalmodi/ox-hugo/master/test/site/content-org/all-posts.org][post source]] Org file, +which contain demonstrations and tests for all of ox-hugo's features. + +After issuing the Emacs command ~M-x package-install RET ox-hugo RET~, you'll +need to ~require~ it. You can do this by running ~M-: (require 'ox-hugo)~, but +you'll want to add it to your configuration as explained [[https://ox-hugo.scripter.co/doc/usage/][here]]. Once this is +done, using ox-hugo is just a matter of making an Org file and writing +content. Org's format is very straightforward, and is designed to make sense to +the reader even if they're unfamiliar with the formal syntax. For instance, +#+begin_src org +,* My food +| Where's My Food? | Fridge | Counter | Mouth | Total | +| Oranges | 1 | 3 | 0 | :=vsum($2..$4) | +| Marshmallows | 0 | 100 | 20 | :=vsum($2..$4) | +| Brussel Sprouts | 32 | 4 | 0 | :=vsum($2..$4) | +#+end_src +Produces a dynamic spreadsheet table in Org mode that exports to HTML like this: +**** My food +| Where's My Food? | Fridge | Counter | Mouth | Total | +| Oranges | 1 | 3 | 0 | 4 | +| Marshmallows | 0 | 100 | 20 | 120 | +| Brussel Sprouts | 32 | 4 | 0 | 36 | +#+TBLFM: @2$5=vsum($2..$4)::@3$5=vsum($2..$4)::@4$5=vsum($2..$4) + +If you're already familiar with Org mode, the benefits are obvious and creating +content is fairly trivial. Org mode is, however, a complex and expansive program +with many features, and its learning curve can appear daunting at first glance. +Using ox-hugo is a great way to learn the format, since it gives the author a +command-center view of their entire content hierarchy, much like a traditional +database, but in a flat format that's much easier to read and understand. Org +features present themselves naturally, and the author can easily visualize the +correspondence between the Org format and the output on their webpage. + +Just take a look at the [[https://www.kengrimes.com/gitweb/?p=kengrimes.com/content.git;a=blob_plain;f=content.org;hb=HEAD][Org file]] for this webpage. Search for "ox-hugo is super +cool!" and you should find this very paragraph. + +Eventually you'll want to [[https://orgmode.org/manual/][read the manual]], though. You may access it in Emacs +with ~M-x org-info~. + +*** Making a New Blog +Compared to a generic Org file, the only necessary data that ox-hugo needs to +properly export to Hugo is an ~:EXPORT_FILE_NAME:~ property in the +~:PROPERTIES:~ block of an Org heading. ~:PROPERTIES:~ blocks are common in Org +for defining arbitrary metadata about sections, and ox-hugo uses them to +generate Hugo's [[https://gohugo.io/content-management/front-matter/][front matter]] (used for associating a title, header, or other +custom data with the page it generates). Providing an ~:EXPORT_FILE_NAME:~ +definition signals to ox-hugo that a particular heading is available for export +to Hugo. For example, the ~:PROPERTIES:~ block of the page you're currently +reading looks like this: +#+begin_src org :PROPERTIES: -:EXPORT_HUGO_CUSTOM_FRONT_MATTER: :caption "Just Another Topic" -:EXPORT_HUGO_CUSTOM_FRONT_MATTER+: :header /img/ox-hugo.png -:EXPORT_FILE_NAME: another-topic +:EXPORT_FILE_NAME: ox-hugo-tutorial +:EXPORT_DESCRIPTION: Exporting to Hugo's Blackfriday Markdown from Orgmode +:EXPORT_HUGO_IMAGES: /img/org.png :END: -This is just another topic, don't worry about it. - -** DONE ox-hugo :org:emacs:hugo:markdown:@blogging: -CLOSED: [2018-04-04 Wed 18:29] +#+end_src +The ~:EXPORT_HUGO_IMAGES:~ and ~:EXPORT_DESCRIPTION:~ variables are optional +definitions allowed by the Speedy theme of this website, but the filename is the +only required property for ox-hugo. Our goal here is to organize the structure +of our website as a tree using Org headers. So, as a minimal example, here's +what a new site might look like in its entirety: +#+begin_src org -n +#+hugo_base_dir: . +,* My Blog +:PROPERTIES: +:EXPORT_HUGO_SECTION: +:END: +,** Home +:PROPERTIES: +:EXPORT_FILE_NAME: _index +:END: +This is the home of my blog! +,** One Bad Night +:PROPERTIES: +:EXPORT_FILE_NAME: bad-night +:END: +Someone gave me herpes! Oh no! +#+end_src +The Org file can be placed in any directory so long as ~HUGO_BASE_DIR~ correctly +identifies the Hugo project's root directory. This path definition is required +for any valid ox-hugo file, and in the example above uses ~#+hugo_base_dir: .~ +to specify that the base directory will be the same path as this Org file. If +you saved this file as hugotest.org, exported it with Org's exporter ~C-c C-e~ +and selected the Hugo output ~H~ and the All Subtrees To Files option ~A~, you'd +wind up with the following files in your directory: +#+begin_src +. +├── content +│   ├── bad-night.md +│   └── _index.md +└── hugotest.org +#+end_src +Most sites will be more than a blog, though, and will want multiple sections. In +fact, many sites are made up of nothing but a slew of sections that users +navigate between with some built-in menu. So a more functional minimal example +would be the following: +#+begin_src org -n +#+hugo_base_dir: . +,* Homepage +:PROPERTIES: +:EXPORT_HUGO_SECTION: +:EXPORT_FILE_NAME: _index +:EXPORT_HUGO_MENU: :menu "main" +:END: +This is the home of my blog! +,* Blog Posts +:PROPERTIES: +:EXPORT_HUGO_SECTION: posts +:END: +,** My Blog Homepage +:PROPERTIES: +:EXPORT_HUGO_MENU: :menu "main" +:EXPORT_FILE_NAME: _index +:END: +Man, look at all my blog posts. +,** One Bad Night +:PROPERTIES: +:EXPORT_FILE_NAME: bad-night +:END: +Someone gave me herpes! Oh no! +#+end_src +Which yields the following files on export: +#+begin_src +. +├── content +│   ├── _index.md +│   └── posts +│   ├── bad-night.md +│   └── _index.md +└── hugotest.org +#+end_src +As you might expect if you're already familiar with Hugo, this structure adheres +to the Hugo [[https://gohugo.io/content-management/organization/][content management]] scheme. Additionally, the index files have been +marked with menu metadata, which allows Hugo themes to automatically generate +navigation menus from the markdown files. Hereafter, making new blog posts is as +simple as adding new sub-headings under the "Blog Posts" heading, and +exporting. As you can see, this is suitable for defining the hierarchical +structure of any general website, not just blogs. Org mode and Hugo just make +creating new pages so simple and well-structured that providing content is all +that's required for a new page, blog entry, or entirely new site section. If you +can blog with ox-hugo, you can deftly deploy any manner of web content, or even +develop entire websites as naturally as you make blog posts. Any tool that can +turn blogging and web development into the same task is quite an achievement! + +Of course, themes to style this content are another can of worms entirely, but +we'll get to that soon. It is sufficient for now to mention that Hugo makes +[[https://gohugo.io/themes/installing-and-using-themes/][using themes]] as easy as downloading one and specifying it in Hugo's config file. + +**** Heading Management +One question you may ask is why the blog's homepage is not defined in the *Blog +Posts* heading. This is a fair question! Any heading with an +~:EXPORT_FILE_NAME:~ property will export /all/ of that heading's content, +/including subheadings/ beneath it. This allows Org headings to be used as part +of the content of a post, where they will be exported as markdown heading +levels, which translate to HTML heading elements ~

~, ~

~, ~

~, +etcetera. + +Furthermore, properties other than ~:EXPORT_FILE_NAME:~ are /inherited/ by +sub-headings, including the ~:EXPORT_HUGO_MENU:~ properties. A +~:EXPORT_HUGO_MENU:~ property at the section root would cause all exported files +within that section to be added to the menu specified. This might be intended by +the content creator, but most likely you don't want every single post you make +to be in the main menu. So it makes sense to define all your pages, including +the index, as a sub-heading of the section definition (which merely specifies +which sub-directory the content will output to). + +To illustrate, let's assume you want to extend the previous site definition with +a section about fishsticks. We'll do this the "wrong way" first to show how Org +handles inheritence: +#+begin_src org -n 24 +,* Fishsticks +:PROPERTIES: +:EXPORT_HUGO_SECTION: fishsticks +:EXPORT_HUGO_MENU: :menu "main" +:EXPORT_FILE_NAME: _index +:END: +This section devoted to Orson Wells, R.I.P. +,** Van De Camps +:PROPERTIES: +:EXPORT_FILE_NAME: van-de-camps +:END: +If this is fish, I'll be a monkey's uncle. +,** Gortons +:PROPERTIES: +:EXPORT_FILE_NAME: gortons +:END: +I think these gave me the herpes. +#+end_src +In this example, we've defined the main homepage of the section inside the +tier-1 heading for Fishsticks. This is /technically/ valid, and produces the +expected file output: +#+begin_src +. +├── content +│   ├── fishsticks +│   │   ├── gortons.md +│   │   ├── _index.md +│   │   └── van-de-camps.md +│   ├── _index.md +│   └── posts +│   ├── bad-night.md +│   └── _index.md +└── hugotest.org +#+end_src +But on inspection of the gortons.md file, we find the anomoly mentioned above: +#+begin_src markdown -n +--- +title: "Gortons" +author: ["Ken Grimes"] +draft: false +menu: + main: + weight: 2002 + identifier: "gortons" +--- + +I think these gave me the herpes. +#+end_src +Uh oh! Not only did these fishsticks give us herpes, they are now part of the +main menu. Worse, when the index page was exported, each of the subsequent posts +became part of its content: +#+begin_src markdown -n +--- +title: "Fishsticks" +author: ["Ken Grimes"] +draft: false +menu: + main: + weight: 1001 + identifier: "fishsticks" +--- + +This section devoted to Orson Wells, R.I.P. + + +## Van De Camps {#van-de-camps} + +If this is fish, I'll be a monkey's uncle. + + +## Gortons {#gortons} + +I think these gave me the herpes. +#+end_src +This explains the flexibility of ox-hugo's straightforward parsing +rules. Specifically, that any headings with an ~:EXPORT_FILE_NAME:~ tag will +export everything beneath them as content. The content organization in this +erroneous example duplicates data, but might still be useful if you wanted to +create, for instance, an "all_content" page for the section. In general, though, +be sure to put your index pages in subheadings (just as you do with normal +pages) so that the tier-1 heading can be used for "global" definitions that +affect all of the pages. A /correct/ section for fishsticks should look like +this: +#+begin_src org -n 24 +,* Fishsticks +:PROPERTIES: +:EXPORT_HUGO_SECTION: fishsticks +:END: +,** Fishsticks Home +:PROPERTIES: +:EXPORT_HUGO_MENU: :menu "main" +:EXPORT_FILE_NAME: _index +:END: +This section devoted to Orson Wells, R.I.P. +,** Van De Camps +:PROPERTIES: +:EXPORT_FILE_NAME: van-de-camps +:END: +If this is fish, I'll be a monkey's uncle. +,** Gortons +:PROPERTIES: +:EXPORT_FILE_NAME: gortons +:END: +I think these gave me the herpes. +#+end_src +Now the homepage for the fishsticks section has a heading all its own, just like +any other page. That's better! Now our homepage will output the content only +from its subheading, and the other pages don't inherit the homepage's +properties. All pages inherit the ~:EXPORT_HUGO_SECTION: fishsticks~ property +though, which is what we want to ensure that these pages are exported to the +proper section. + +*** Hugo Setup +At this point, setting up Hugo and publishing is simple. [[https://gohugo.io/getting-started/installing/][Installing]] Hugo is +pretty straightforward on any Unix-like system with a package manager; it is +available on most distributions at this point. Windows installation is a bigger +pain in the ass, but you should be used to that if you're still in the +stone-age. + +Using ~hugo new site .~ on the command-line will create a new hugo site in the +current directory, but ~hugo~ expects to be creating a new directory with this +command and will complain if it already exists. It also provides the ~--force~ +option to allow creating a new site in an extant directory, but this too will +fail if the *content* subdirectory already exists (which ox-hugo will create +when you export). + +So you have three choices: +1. run ~hugo new site /path/to/some-new-dir~ and move your Org file to this new + directory +2. simply ~rm -Rf content/~ to remove the content directory ox-hugo created, + then run ~hugo new site --force .~ +3. don't even bother with the ~hugo new site~ command, and make a *config.toml* + file manually (the only file really required for Hugo to run). + +It's convenient to do this through the ~hugo~ command because it will create +Hugo-specific subdirectories like archetypes, layouts, themes, etcetera, in +addition to populating a basic *config.toml* file. The subdirectories it creates +aren't necessary, but help illustrate Hugo's structure. In any case, you'll want +to wind up with a directory structure something like this (created with option 2 +above, extending from previous examples): +#+begin_src +. +├── archetypes +│   └── default.md +├── config.toml +├── content +├── data +├── hugotest.org +├── layouts +├── static +└── themes +#+end_src +Exporting with ox-hugo using ~C-c C-e H A~ again will, as expected, fill the +content directory with our content. +#+begin_src +. +├── archetypes +│   └── default.md +├── config.toml +├── content +│   ├── fishsticks +│   │   ├── gortons.md +│   │   ├── _index.md +│   │   └── van-de-camps.md +│   ├── _index.md +│   └── posts +│   ├── bad-night.md +│   └── _index.md +├── data +├── hugotest.org +├── layouts +├── static +└── themes +#+end_src + +**** Theming +The last thing to do here is to download or create a theme for Hugo. As +mentioned before, installing a theme is very simple. This blog uses a custom +theme named Speedy that I have been developing to help myself learn Hugo's +internals, but for this example I'll be using Kaushal Modi's [[https://github.com/kaushalmodi/hugo-bare-min-theme][bare-min theme]]. The +bare-min theme is the best starting place out there for making new themes, and +outputs basic HTML pages without any need to mess with CSS or JS. It also +provides easy debugging facilities and search features. + +So let's install it! You can download the theme from its github page and extract +it to the themes folder, or much more easily use git to clone it to your themes +directory. ~git clone https://github.com/kaushalmodi/hugo-bare-min-theme.git +themes/bare-min~ Then open up your *config.toml* file, and add the theme. +#+begin_src toml -n +baseURL = "http://example.org/" +languageCode = "en-us" +title = "My New Hugo Site" +# Adding a theme: +theme = "bare-min" +#+end_src +Be sure that the theme's name matches the theme directory's name in the *themes/* +directory of your project base directory. (e.g. *themes/bare-min* here). That's it +for installing the theme. + +Now, running the command ~hugo~ with no subcommands will invoke the Hugo +generator on the current directory, and output finalized content in the +*public/* directory. +#+begin_src +. +├── archetypes +│   └── default.md +├── config.toml +├── content +│   ├── fishsticks +│   │   ├── gortons.md +│   │   ├── _index.md +│   │   └── van-de-camps.md +│   ├── _index.md +│   └── posts +│   ├── bad-night.md +│   └── _index.md +├── data +├── hugotest.org +├── layouts +├── public +│   ├── categories +│   │   ├── index.html +│   │   └── index.xml +│   ├── css +│   │   └── github_chroma.css +│   ├── fishsticks +│   │   ├── gortons +│   │   │   └── index.html +│   │   ├── index.html +│   │   ├── index.xml +│   │   └── van-de-camps +│   │   └── index.html +│   ├── index.html +│   ├── index.xml +│   ├── js +│   │   └── search.js +│   ├── page +│   │   └── 1 +│   │   └── index.html +│   ├── posts +│   │   ├── bad-night +│   │   │   └── index.html +│   │   ├── index.html +│   │   └── index.xml +│   ├── sitemap.xml +│   └── tags +│   ├── index.html +│   └── index.xml +├── static +└── themes ... +#+end_src +Hugo, by default, generates xml files that are suitable for RSS feeds. With a +theme installed, Hugo will produce more suitable web content (usually HTML) to +be served over HTTP. The bare-min theme outputs HTML, provides CSS for doing +chroma-based syntax highlighting (in case you include code blocks), and inline +styles for basic page formatting. Generated pages also have a lot of useful +debugging information. You'll also notice that Hugo has generated folders for +"categories" and "tags". These are default organization labels for your content +called [[https://gohugo.io/content-management/taxonomies/][taxonomies]]. + +**** Taxonomies +The taxonomy index pages allow users to browse content by category or tag. These +taxonomies correspond to Org mode tags, and ox-hugo will automatically +associated tagged headings with the tags taxonomy, or the categories taxonomy if +prefixed with an @ symbol. You are free to define your own taxonomies, and even +disable the default "tags" and "categories" taxonomies, but since Org mode tags +directly translate to the default Hugo taxonomies, it makes sense to just use +the default taxonomies for now. + +As an example of taxonomies, I'll add some tags and categories to our +*hugotest.org* file to create a complete blog structure with tags and categories: +#+begin_src org -n +#+hugo_base_dir: . +,* Homepage +:PROPERTIES: +:EXPORT_HUGO_SECTION: +:EXPORT_FILE_NAME: _index +:EXPORT_HUGO_MENU: :menu "main" +:END: +This is the home of my blog! +,* Blog Posts +:PROPERTIES: +:EXPORT_HUGO_SECTION: posts +:END: +,** My Blog Homepage +:PROPERTIES: +:EXPORT_HUGO_MENU: :menu "main" +:EXPORT_FILE_NAME: _index +:END: +Man, look at all my blog posts. +,** One Bad Night :@updates:herpes:fear: +:PROPERTIES: +:EXPORT_FILE_NAME: bad-night +:END: +Someone gave me herpes! Oh no! +,* Fishsticks +:PROPERTIES: +:EXPORT_HUGO_SECTION: fishsticks +:END: +,** Fishsticks Home +:PROPERTIES: +:EXPORT_HUGO_MENU: :menu "main" +:EXPORT_FILE_NAME: _index +:END: +This section devoted to Orson Wells, R.I.P. +,** Van De Camps :@reviews:fear: +:PROPERTIES: +:EXPORT_FILE_NAME: van-de-camps +:END: +If this is fish, I'll be a monkey's uncle. +,** Gortons :@reviews:herpes: +:PROPERTIES: +:EXPORT_FILE_NAME: gortons +:END: +I think these gave me the herpes. +#+end_src +Exporting *hugotest.org* with ~C-c C-e H A~ and generating with ~hugo~ will yield +the same file structure as before, but this time we'll see that the categories +and tags directories have sections for our newly added taxonomies. +#+begin_src +. +└── public + ├── categories + │   ├── index.html + │   ├── index.xml + │   ├── reviews + │   │   ├── index.html + │   │   └── index.xml + │   └── updates + │   ├── index.html + │   └── index.xml + └── tags + ├── fear + │   ├── index.html + │   └── index.xml + ├── herpes + │   ├── index.html + │   └── index.xml + ├── index.html + └── index.xml +#+end_src +The index pages of taxonomies provide a list of all available taxonomies of that +type, each with list pages that show all content associated with them. This +allows themes to easily build navigation pages for browsing or querying +taxonomies. Files like these are often useful to output as JSON (done by the +theme) to allow Javascript-driven dynamic search features, but a simpler scheme +can output HTML pages to browse taxonomies just as you would posts in a section +(i.e. Org mode heading). + +**** Serving Content +You can now serve the *public/* directory over an HTTP server. Hugo is packaged +with an internal [[https://gohugo.io/commands/hugo_server/][HTTP server]] to help with testing, which is quite convenient +because it can automatically refresh whenever content in its *content/* directory +is updated (so when you export from ox-hugo, you don't have to run ~hugo~ +again). To use it, simply run ~hugo server~ and point your browser at +http://localhost:1313 (1313 is the default ~--port~ argument for ~hugo server~). + +*** Additional Information +Eventually you'll want to move on to [[https://themes.gohugo.io/][other themes]], or [[https://gohugo.io/themes/creating/][develop your own]], but at +this point you've got a fully functional blog publishing workflow from start to +finish that you can view in-browser as you develop. + +**** Attaching Files, Capturing Information & Automation +Once you have a basic site structured in your Org file, you're ready to start +throwing information in it. It is of course sufficient to open the Org file and +edit it, but most Org mode users prefer to automate /everything/, and being able +to use Org's capture feature to instantly populate new blog posts is extremely +convenient. + +The [[https://ox-hugo.scripter.co/][ox-hugo documentation]] provides succinct explanations on how to do this, +including elisp snippets for [[https://ox-hugo.scripter.co/doc/org-capture-setup/][capture setup]], [[https://ox-hugo.scripter.co/doc/images-in-content/][image linking]], and [[https://ox-hugo.scripter.co/doc/auto-export-on-saving/][automating +exports]] when you save your Org file (so no more need to ~C-c C-e H A~ every +time, just save the file as usual with ~C-x C-s~). + +**** Indexes and Page Resources +You may be wondering why our index pages are exported as *_index* rather than +*index*. Hugo uses a concept called [[https://gohugo.io/content-management/page-bundles/][Page Bundles]] to organize exported +content. The gist of this is that a file named *index* is known as a "Leaf Node" +and cannot have any children. A file named *_index* is considered a "Branch +Node" and allows nesting other bundles beneath it. In other words, an Org +heading with an exported file name of *index* will be treated as a single page +with no subfolders. This is useful for single pages, but a section index +(e.g. for a blog) with many subpages and other resources will more than likely +want to allow nested bundles beneath it. + +You may export an Org heading as a Page Bundle by providing the Org property +~:EXPORT_HUGO_BUNDLE:~ with an argument (string) that will become the name of +the folder created. If you do this, you will need to set the +~:EXPORT_FILE_NAME:~ property to either *index* for Leaf Nodes, or *_index* for +Branch Nodes. + +The [[https://ox-hugo.scripter.co/doc/org-capture-setup/][capture setup]] provided by Kaushal Modi above provides methods to +automatically create either a normal page, or a leaf node bundle when invoking +Org Capture. + +**** Drafts and Automatic Timestamps +By default, Hugo will not build any markdown files whose front-matter properties +include ~draft: true~. This is very convenient for in-progress posts that you +leave in your Org file, or in the *content/* directory. + +Ox-hugo will always fill out the draft property, and by default every exported +header will have its draft property set to *false*. However, ox-hugo also links +this behavior to the TODO feature of Org. When you cycle a heading's TODO value +with ~S-~ (that's Shift + Right Arrow Key), you will signal to ox-hugo to +export this heading as a draft (i.e. ~draft: true~), which will prevent Hugo +from building it into an HTML page. + +When a heading is cycled to the DONE state in Org, it will automatically +generate a timestamp for when the heading was closed. Ox-hugo will export DONE +headings with ~draft: false~ and, better still, will use Org's timestamp to fill +out the Date property in the markdown file. This makes it trivial to manage +writing multiple posts at once, and automatically timestamp completion dates. + +You may also explicitly set this date parameter with the ~:EXPORT_DATE:~ +property, but the ease of using DONE-state switching is pretty hard to pass up. + +**** Renaming Tags and Other Properties +If a theme you are using has any idiosyncrasies about your naming conventions +(e.g. if you export your content to more than one site using more than one +theme), ox-hugo provides a [[https://ox-hugo.scripter.co/doc/replace-front-matter-keys/][convenient way]] to automatically replace any key +values on export. This can be done on a per-heading, or a per-file basis. + +To replace keys for the entire file, simply add a property to the top of your +Org file. For example: +#+begin_src org +#+hugo_front_matter_key_replace: description>summary +#+end_src +This will make any ~:EXPORT_DESCRIPTION:~ properties export, instead, to a +"summary" key in the front-matter of your output markdown file. It will also be +able to replace exported values in the Org body: +#+begin_src org +,#+begin_description +This is the description, +it has multiple lines too! +It will export as the Summary value in front-matter +,#+end_description +#+end_src +To do this on a per-heading basis, simply add the +~:EXPORT_HUGO_FRONT_MATTER_KEY_REPLACE:~ property to a heading's property block, +and the replacements will only occur within that heading. + +**** Why not use Hugo's internal Org parser? +It's true that Hugo has an internal Org parser that is well maintained. It +provides this as an alternative to markdown files. You may wonder, then, why +someone would use Org mode to export to markdown instead of just letting Hugo +parse the Org files itself. The answer is two-fold: +1. Hugo's Org format is currently less feature complete than markdown, so + exporting from Org mode to the Hugo Org Format would limit potential output. +2. Org mode is a lot more than just a file format, and its integration with your + system allows all kinds of benefits you can never get out of a simple Org + file parser. +Therefore, supporting the Org format in another tool will give you a superior +text format for organizing information, but it will be crippled when compared to +an actual Org mode implementation. Ox-hugo gives you the ability to use Org mode +itself to generate content. + +If Hugo's Org parser gains parity with, or eclipses, the Blackfriday Markdown +format currently used by Hugo, ox-hugo could certainly be used to output those +Org-Hugo files instead of the current markdown. This would be nice because it +would allow Org mode users to view their output content more easily, but the +advantages of ox-hugo and a real, bona fide Org mode would still remain. + +So you see, Hugo's Org parser isn't really in competition with ox-hugo, it's in +competition with the /other/ Hugo parsers (e.g. markdown). + +*** Thanks +Thanks to Kaushal Modi, who found this article on the googs within days of me +posting it, for reaching out to me and providing thorough feedback and error +checking. + +And special thanks to me, for once again overcoming Hamhock the Laziness Demon +who has possessed me since birth and hates it when I do anything productive. + +** DONE I did a blog :blog:org:emacs:hugo: +CLOSED: [2018-04-06 Fri 18:29] :PROPERTIES: :EXPORT_FILE_NAME: ox-hugo -:EXPORT_HUGO_CUSTOM_FRONT_MATTER: :caption "Exporting to Hugo's Blackfriday Markdown from Orgmode" -:EXPORT_HUGO_CUSTOM_FRONT_MATTER+: :header /img/emacs-logo.png +:EXPORT_DESCRIPTION: "Exporting to Hugo's Blackfriday Markdown from Orgmode" +:EXPORT_HUGO_CUSTOM_FRONT_MATTER: :header /img/org.png :END: -#+attr_html: :class center -[[file:static/img/ox-hugo.png]] - -ox-hugo is an [[http://en.wikipedia.org/wiki/Emacs][Emacs]] package providing a Hugo backend for the [[http://en.wikipedia.org/wiki/org-mode][org-mode]] -exporter. Today I integrated its expectations about file structure into the -Speedy theme for this blog, allowing me to keep all blog contents in a single -org-mode file which exports content to [[http://en.wikipedia.org/wiki/markdown][markdown]] format for Hugo's excellent -[[https://github.com/russross/blackfriday][blackfriday markdown parser]] (a markdown format with added features useful for -blogs). Hugo does support limited parsing of org files internally, but the org -file format is only a piece of what org-mode is all about. A full org -integration is beyond the scope of most external tools, so org-mode is generally -best used as an exporter. As an Emacs user, this allows me to instantly capture -interesting information I come across and publish it within seconds. - -Now I have no excuse! - -*** Using ox-hugo -This is where I will explain how to use ox-hugo - -#+begin_export md -Blackfriday Markdown: Syntax -================ - - - - - * [Overview](#overview) - * [Philosophy](#philosophy) - * [Inline HTML](#html) - * [Automatic Escaping for Special Characters](#autoescape) - * [Block Elements](#block) - * [Paragraphs and Line Breaks](#p) - * [Headers](#header) - * [Blockquotes](#blockquote) - * [Lists](#list) - * [Code Blocks](#precode) - * [Horizontal Rules](#hr) - * [Span Elements](#span) - * [Links](#link) - * [Emphasis](#em) - * [Code](#code) - * [Images](#img) - * [Miscellaneous](#misc) - * [Backslash Escapes](#backslash) - * [Automatic Links](#autolink) - - -**Note:** This document is itself written using Markdown; you -can [see the source for it by adding '.text' to the URL][src]. - - [src]: https://raw.githubusercontent.com/russross/blackfriday/master/testdata/Markdown%20Documentation%20-%20Syntax.text - - * * * - -

Overview

- -

Philosophy

- -Markdown is intended to be as easy-to-read and easy-to-write as is feasible. - -Readability, however, is emphasized above all else. A Markdown-formatted -document should be publishable as-is, as plain text, without looking -like it's been marked up with tags or formatting instructions. While -Markdown's syntax has been influenced by several existing text-to-HTML -filters -- including [Setext] [1], [atx] [2], [Textile] [3], [reStructuredText] [4], -[Grutatext] [5], and [EtText] [6] -- the single biggest source of -inspiration for Markdown's syntax is the format of plain text email. - - [1]: http://docutils.sourceforge.net/mirror/setext.html - [2]: http://www.aaronsw.com/2002/atx/ - [3]: http://textism.com/tools/textile/ - [4]: http://docutils.sourceforge.net/rst.html - [5]: http://www.triptico.com/software/grutatxt.html - [6]: http://ettext.taint.org/doc/ - -To this end, Markdown's syntax is comprised entirely of punctuation -characters, which punctuation characters have been carefully chosen so -as to look like what they mean. E.g., asterisks around a word actually -look like \*emphasis\*. Markdown lists look like, well, lists. Even -blockquotes look like quoted passages of text, assuming you've ever -used email. - - - -

Inline HTML

- -Markdown's syntax is intended for one purpose: to be used as a -format for *writing* for the web. - -Markdown is not a replacement for HTML, or even close to it. Its -syntax is very small, corresponding only to a very small subset of -HTML tags. The idea is *not* to create a syntax that makes it easier -to insert HTML tags. In my opinion, HTML tags are already easy to -insert. The idea for Markdown is to make it easy to read, write, and -edit prose. HTML is a *publishing* format; Markdown is a *writing* -format. Thus, Markdown's formatting syntax only addresses issues that -can be conveyed in plain text. - -For any markup that is not covered by Markdown's syntax, you simply -use HTML itself. There's no need to preface it or delimit it to -indicate that you're switching from Markdown to HTML; you just use -the tags. - -The only restrictions are that block-level HTML elements -- e.g. `
`, -``, `
`, `
`, etc. -- must be separated from surrounding
-content by blank lines, and the start and end tags of the block should
-not be indented with tabs or spaces. Markdown is smart enough not
-to add extra (unwanted) `
` tags around HTML block-level tags.
-
-For example, to add an HTML table to a Markdown article:
-
-    This is a regular paragraph.
-
-
- - - -
Foo
- - This is another regular paragraph. - -Note that Markdown formatting syntax is not processed within block-level -HTML tags. E.g., you can't use Markdown-style `*emphasis*` inside an -HTML block. - -Span-level HTML tags -- e.g. ``, ``, or `` -- can be -used anywhere in a Markdown paragraph, list item, or header. If you -want, you can even use HTML tags instead of Markdown formatting; e.g. if -you'd prefer to use HTML `` or `` tags instead of Markdown's -link or image syntax, go right ahead. - -Unlike block-level HTML tags, Markdown syntax *is* processed within -span-level tags. - - -

Automatic Escaping for Special Characters

- -In HTML, there are two characters that demand special treatment: `<` -and `&`. Left angle brackets are used to start tags; ampersands are -used to denote HTML entities. If you want to use them as literal -characters, you must escape them as entities, e.g. `<`, and -`&`. - -Ampersands in particular are bedeviling for web writers. If you want to -write about 'AT&T', you need to write '`AT&T`'. You even need to -escape ampersands within URLs. Thus, if you want to link to: - - http://images.google.com/images?num=30&q=larry+bird - -you need to encode the URL as: - - http://images.google.com/images?num=30&q=larry+bird - -in your anchor tag `href` attribute. Needless to say, this is easy to -forget, and is probably the single most common source of HTML validation -errors in otherwise well-marked-up web sites. - -Markdown allows you to use these characters naturally, taking care of -all the necessary escaping for you. If you use an ampersand as part of -an HTML entity, it remains unchanged; otherwise it will be translated -into `&`. - -So, if you want to include a copyright symbol in your article, you can write: - - © - -and Markdown will leave it alone. But if you write: - - AT&T - -Markdown will translate it to: - - AT&T - -Similarly, because Markdown supports [inline HTML](#html), if you use -angle brackets as delimiters for HTML tags, Markdown will treat them as -such. But if you write: - - 4 < 5 - -Markdown will translate it to: - - 4 < 5 - -However, inside Markdown code spans and blocks, angle brackets and -ampersands are *always* encoded automatically. This makes it easy to use -Markdown to write about HTML code. (As opposed to raw HTML, which is a -terrible format for writing about HTML syntax, because every single `<` -and `&` in your example code needs to be escaped.) - - - * * * - - -

Block Elements

- - -

Paragraphs and Line Breaks

- -A paragraph is simply one or more consecutive lines of text, separated -by one or more blank lines. (A blank line is any line that looks like a -blank line -- a line containing nothing but spaces or tabs is considered -blank.) Normal paragraphs should not be intended with spaces or tabs. - -The implication of the "one or more consecutive lines of text" rule is -that Markdown supports "hard-wrapped" text paragraphs. This differs -significantly from most other text-to-HTML formatters (including Movable -Type's "Convert Line Breaks" option) which translate every line break -character in a paragraph into a `
` tag. - -When you *do* want to insert a `
` break tag using Markdown, you -end a line with two or more spaces, then type return. - -Yes, this takes a tad more effort to create a `
`, but a simplistic -"every line break is a `
`" rule wouldn't work for Markdown. -Markdown's email-style [blockquoting][bq] and multi-paragraph [list items][l] -work best -- and look better -- when you format them with hard breaks. - - [bq]: #blockquote - [l]: #list - - - - - -Markdown supports two styles of headers, [Setext] [1] and [atx] [2]. - -Setext-style headers are "underlined" using equal signs (for first-level -headers) and dashes (for second-level headers). For example: - - This is an H1 - ============= - - This is an H2 - ------------- - -Any number of underlining `=`'s or `-`'s will work. - -Atx-style headers use 1-6 hash characters at the start of the line, -corresponding to header levels 1-6. For example: - - # This is an H1 - - ## This is an H2 - - ###### This is an H6 - -Optionally, you may "close" atx-style headers. This is purely -cosmetic -- you can use this if you think it looks better. The -closing hashes don't even need to match the number of hashes -used to open the header. (The number of opening hashes -determines the header level.) : - - # This is an H1 # - - ## This is an H2 ## - - ### This is an H3 ###### - - -

Blockquotes

- -Markdown uses email-style `>` characters for blockquoting. If you're -familiar with quoting passages of text in an email message, then you -know how to create a blockquote in Markdown. It looks best if you hard -wrap the text and put a `>` before every line: - - > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, - > consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. - > Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. - > - > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse - > id sem consectetuer libero luctus adipiscing. - -Markdown allows you to be lazy and only put the `>` before the first -line of a hard-wrapped paragraph: - - > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, - consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. - Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. - - > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse - id sem consectetuer libero luctus adipiscing. - -Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by -adding additional levels of `>`: - - > This is the first level of quoting. - > - > > This is nested blockquote. - > - > Back to the first level. - -Blockquotes can contain other Markdown elements, including headers, lists, -and code blocks: - - > ## This is a header. - > - > 1. This is the first list item. - > 2. This is the second list item. - > - > Here's some example code: - > - > return shell_exec("echo $input | $markdown_script"); - -Any decent text editor should make email-style quoting easy. For -example, with BBEdit, you can make a selection and choose Increase -Quote Level from the Text menu. - - -

Lists

- -Markdown supports ordered (numbered) and unordered (bulleted) lists. - -Unordered lists use asterisks, pluses, and hyphens -- interchangably --- as list markers: - - * Red - * Green - * Blue - -is equivalent to: - - + Red - + Green - + Blue - -and: - - - Red - - Green - - Blue - -Ordered lists use numbers followed by periods: - - 1. Bird - 2. McHale - 3. Parish - -It's important to note that the actual numbers you use to mark the -list have no effect on the HTML output Markdown produces. The HTML -Markdown produces from the above list is: - -
    -
  1. Bird
    2. -
  2. McHale
    3. -
  3. Parish
    4. -
- -If you instead wrote the list in Markdown like this: - - 1. Bird - 1. McHale - 1. Parish - -or even: - - 3. Bird - 1. McHale - 8. Parish - -you'd get the exact same HTML output. The point is, if you want to, -you can use ordinal numbers in your ordered Markdown lists, so that -the numbers in your source match the numbers in your published HTML. -But if you want to be lazy, you don't have to. - -If you do use lazy list numbering, however, you should still start the -list with the number 1. At some point in the future, Markdown may support -starting ordered lists at an arbitrary number. - -List markers typically start at the left margin, but may be indented by -up to three spaces. List markers must be followed by one or more spaces -or a tab. - -To make lists look nice, you can wrap items with hanging indents: - - * Lorem ipsum dolor sit amet, consectetuer adipiscing elit. - Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, - viverra nec, fringilla in, laoreet vitae, risus. - * Donec sit amet nisl. Aliquam semper ipsum sit amet velit. - Suspendisse id sem consectetuer libero luctus adipiscing. - -But if you want to be lazy, you don't have to: - - * Lorem ipsum dolor sit amet, consectetuer adipiscing elit. - Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, - viverra nec, fringilla in, laoreet vitae, risus. - * Donec sit amet nisl. Aliquam semper ipsum sit amet velit. - Suspendisse id sem consectetuer libero luctus adipiscing. - -If list items are separated by blank lines, Markdown will wrap the -items in `

` tags in the HTML output. For example, this input: - - * Bird - * Magic - -will turn into: - -

    -
  • Bird
    • -
  • Magic
    • -
- -But this: - - * Bird - - * Magic - -will turn into: - -
    -

  • Bird

    • -

  • Magic

    • -
- -List items may consist of multiple paragraphs. Each subsequent -paragraph in a list item must be intended by either 4 spaces -or one tab: +ox-hugo is an [[http://en.wikipedia.org/wiki/Emacs][Emacs]] package for [[http://en.wikipedia.org/wiki/org-mode][Org mode]] that produces input for the static +content generator [[https://gohugo.io/][Hugo]], which I use for this website. Today I integrated its +expectations about file structure into the Speedy theme for this blog, allowing +me to keep all blog contents in a single Org mode file and export [[http://en.wikipedia.org/wiki/markdown][markdown]] +content for Hugo's excellent [[https://github.com/russross/blackfriday][blackfriday markdown parser]] (a markdown format with +many added features). Hugo does support limited parsing of org files internally, +but Org mode features like inline spreadsheets and system communication are +beyond the scope of most external tools, so Org mode is best used as an +exporter. As an Emacs user, this allows me to instantly capture interesting +information I come across and publish it within seconds. Now I have no excuses! - 1. This is a list item with two paragraphs. Lorem ipsum dolor - sit amet, consectetuer adipiscing elit. Aliquam hendrerit - mi posuere lectus. - - Vestibulum enim wisi, viverra nec, fringilla in, laoreet - vitae, risus. Donec sit amet nisl. Aliquam semper ipsum - sit amet velit. - - 2. Suspendisse id sem consectetuer libero luctus adipiscing. - -It looks nice if you indent every line of the subsequent -paragraphs, but here again, Markdown will allow you to be -lazy: - - * This is a list item with two paragraphs. - - This is the second paragraph in the list item. You're - only required to indent the first line. Lorem ipsum dolor - sit amet, consectetuer adipiscing elit. - - * Another item in the same list. - -To put a blockquote within a list item, the blockquote's `>` -delimiters need to be indented: - - * A list item with a blockquote: - - > This is a blockquote - > inside a list item. - -To put a code block within a list item, the code block needs -to be indented *twice* -- 8 spaces or two tabs: - - * A list item with a code block: - - - - -It's worth noting that it's possible to trigger an ordered list by -accident, by writing something like this: - - 1986. What a great season. - -In other words, a *number-period-space* sequence at the beginning of a -line. To avoid this, you can backslash-escape the period: - - 1986\. What a great season. - - - -

Code Blocks

- -Pre-formatted code blocks are used for writing about programming or -markup source code. Rather than forming normal paragraphs, the lines -of a code block are interpreted literally. Markdown wraps a code block -in both `
` and `` tags.
-
-To produce a code block in Markdown, simply indent every line of the
-block by at least 4 spaces or 1 tab. For example, given this input:
-
-    This is a normal paragraph:
-
-        This is a code block.
-
-Markdown will generate:
-
-    
This is a normal paragraph:

-
-    
This is a code block.
-    

-
-One level of indentation -- 4 spaces or 1 tab -- is removed from each
-line of the code block. For example, this:
-
-    Here is an example of AppleScript:
-
-        tell application "Foo"
-            beep
-        end tell
-
-will turn into:
-
-    
Here is an example of AppleScript:

-
-    
tell application "Foo"
-        beep
-    end tell
-    

-
-A code block continues until it reaches a line that is not indented
-(or the end of the article).
-
-Within a code block, ampersands (`&`) and angle brackets (`<` and `>`)
-are automatically converted into HTML entities. This makes it very
-easy to include example HTML source code using Markdown -- just paste
-it and indent it, and Markdown will handle the hassle of encoding the
-ampersands and angle brackets. For example, this:
-
-        

-            © 2004 Foo Corporation
-        

-
-will turn into:
-
-    
<div class="footer">
-        &copy; 2004 Foo Corporation
-    </div>
-    

-
-Regular Markdown syntax is not processed within code blocks. E.g.,
-asterisks are just literal asterisks within a code block. This means
-it's also easy to use Markdown to write about Markdown's own syntax.
-
-
-
-
Horizontal Rules

-
-You can produce a horizontal rule tag (`
`) by placing three or
-more hyphens, asterisks, or underscores on a line by themselves. If you
-wish, you may use spaces between the hyphens or asterisks. Each of the
-following lines will produce a horizontal rule:
-
-    * * *
-
-    ***
-
-    *****
-	
-    - - -
-
-    ---------------------------------------
-
-	_ _ _
-
-
- * * *
-
-
Span Elements

-
-
-
-Markdown supports two style of links: *inline* and *reference*.
-
-In both styles, the link text is delimited by [square brackets].
-
-To create an inline link, use a set of regular parentheses immediately
-after the link text's closing square bracket. Inside the parentheses,
-put the URL where you want the link to point, along with an *optional*
-title for the link, surrounded in quotes. For example:
-
-    This is [an example](http://example.com/ "Title") inline link.
-
-    [This link](http://example.net/) has no title attribute.
-
-Will produce:
-
-    
This is 
-    an example inline link.

-
-    
This link has no
-    title attribute.

-
-If you're referring to a local resource on the same server, you can
-use relative paths:
-
-    See my [About](/about/) page for details.
-
-Reference-style links use a second set of square brackets, inside
-which you place a label of your choosing to identify the link:
-
-    This is [an example][id] reference-style link.
-
-You can optionally use a space to separate the sets of brackets:
-
-    This is [an example] [id] reference-style link.
-
-Then, anywhere in the document, you define your link label like this,
-on a line by itself:
-
-    [id]: http://example.com/  "Optional Title Here"
-
-That is:
-
- *   Square brackets containing the link identifier (optionally
-    indented from the left margin using up to three spaces);
- *   followed by a colon;
- *   followed by one or more spaces (or tabs);
- *   followed by the URL for the link;
- *   optionally followed by a title attribute for the link, enclosed
-    in double or single quotes.
-
-The link URL may, optionally, be surrounded by angle brackets:
-
-    [id]:   "Optional Title Here"
-
-You can put the title attribute on the next line and use extra spaces
-or tabs for padding, which tends to look better with longer URLs:
-
-    [id]: http://example.com/longish/path/to/resource/here
-        "Optional Title Here"
-
-Link definitions are only used for creating links during Markdown
-processing, and are stripped from your document in the HTML output.
-
-Link definition names may constist of letters, numbers, spaces, and punctuation -- but they are *not* case sensitive. E.g. these two links:
-
-	[link text][a]
-	[link text][A]
-
-are equivalent.
-
-The *implicit link name* shortcut allows you to omit the name of the
-link, in which case the link text itself is used as the name.
-Just use an empty set of square brackets -- e.g., to link the word
-"Google" to the google.com web site, you could simply write:
-
-	[Google][]
-
-And then define the link:
-
-	[Google]: http://google.com/
-
-Because link names may contain spaces, this shortcut even works for
-multiple words in the link text:
-
-	Visit [Daring Fireball][] for more information.
-
-And then define the link:
-	
-	[Daring Fireball]: http://daringfireball.net/
-
-Link definitions can be placed anywhere in your Markdown document. I
-tend to put them immediately after each paragraph in which they're
-used, but if you want, you can put them all at the end of your
-document, sort of like footnotes.
-
-Here's an example of reference links in action:
-
-    I get 10 times more traffic from [Google] [1] than from
-    [Yahoo] [2] or [MSN] [3].
-
-      [1]: http://google.com/        "Google"
-      [2]: http://search.yahoo.com/  "Yahoo Search"
-      [3]: http://search.msn.com/    "MSN Search"
-
-Using the implicit link name shortcut, you could instead write:
-
-    I get 10 times more traffic from [Google][] than from
-    [Yahoo][] or [MSN][].
-
-      [google]: http://google.com/        "Google"
-      [yahoo]:  http://search.yahoo.com/  "Yahoo Search"
-      [msn]:    http://search.msn.com/    "MSN Search"
-
-Both of the above examples will produce the following HTML output:
-
-    
I get 10 times more traffic from Google than from
-    Yahoo
-    or MSN.

-
-For comparison, here is the same paragraph written using
-Markdown's inline link style:
-
-    I get 10 times more traffic from [Google](http://google.com/ "Google")
-    than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or
-    [MSN](http://search.msn.com/ "MSN Search").
-
-The point of reference-style links is not that they're easier to
-write. The point is that with reference-style links, your document
-source is vastly more readable. Compare the above examples: using
-reference-style links, the paragraph itself is only 81 characters
-long; with inline-style links, it's 176 characters; and as raw HTML,
-it's 234 characters. In the raw HTML, there's more markup than there
-is text.
-
-With Markdown's reference-style links, a source document much more
-closely resembles the final output, as rendered in a browser. By
-allowing you to move the markup-related metadata out of the paragraph,
-you can add links without interrupting the narrative flow of your
-prose.
-
-
-
Emphasis

-
-Markdown treats asterisks (`*`) and underscores (`_`) as indicators of
-emphasis. Text wrapped with one `*` or `_` will be wrapped with an
-HTML `` tag; double `*`'s or `_`'s will be wrapped with an HTML
-`` tag. E.g., this input:
-
-    *single asterisks*
-
-    _single underscores_
-
-    **double asterisks**
-
-    __double underscores__
-
-will produce:
-
-    single asterisks
-
-    single underscores
-
-    double asterisks
-
-    double underscores
-
-You can use whichever style you prefer; the lone restriction is that
-the same character must be used to open and close an emphasis span.
-
-Emphasis can be used in the middle of a word:
-
-    un*fucking*believable
-
-But if you surround an `*` or `_` with spaces, it'll be treated as a
-literal asterisk or underscore.
-
-To produce a literal asterisk or underscore at a position where it
-would otherwise be used as an emphasis delimiter, you can backslash
-escape it:
-
-    \*this text is surrounded by literal asterisks\*
-
-
-
-
Code

-
-To indicate a span of code, wrap it with backtick quotes (`` ` ``).
-Unlike a pre-formatted code block, a code span indicates code within a
-normal paragraph. For example:
-
-    Use the `printf()` function.
-
-will produce:
-
-    
Use the printf() function.

-
-To include a literal backtick character within a code span, you can use
-multiple backticks as the opening and closing delimiters:
-
-    ``There is a literal backtick (`) here.``
-
-which will produce this:
-
-    
There is a literal backtick (`) here.

-
-The backtick delimiters surrounding a code span may include spaces --
-one after the opening, one before the closing. This allows you to place
-literal backtick characters at the beginning or end of a code span:
-
-	A single backtick in a code span: `` ` ``
-	
-	A backtick-delimited string in a code span: `` `foo` ``
-
-will produce:
-
-	
A single backtick in a code span: `

-	
-	
A backtick-delimited string in a code span: `foo`

-
-With a code span, ampersands and angle brackets are encoded as HTML
-entities automatically, which makes it easy to include example HTML
-tags. Markdown will turn this:
-
-    Please don't use any `` tags.
-
-into:
-
-    
Please don't use any <blink> tags.

-
-You can write this:
-
-    `—` is the decimal-encoded equivalent of `—`.
-
-to produce:
-
-    
&#8212; is the decimal-encoded
-    equivalent of &mdash;.

-
-
-
-
Images

-
-Admittedly, it's fairly difficult to devise a "natural" syntax for
-placing images into a plain text document format.
-
-Markdown uses an image syntax that is intended to resemble the syntax
-for links, allowing for two styles: *inline* and *reference*.
-
-Inline image syntax looks like this:
-
-    ![Alt text](/path/to/img.jpg)
-
-    ![Alt text](/path/to/img.jpg "Optional title")
-
-That is:
-
- *   An exclamation mark: `!`;
- *   followed by a set of square brackets, containing the `alt`
-    attribute text for the image;
- *   followed by a set of parentheses, containing the URL or path to
-    the image, and an optional `title` attribute enclosed in double
-    or single quotes.
-
-Reference-style image syntax looks like this:
-
-    ![Alt text][id]
-
-Where "id" is the name of a defined image reference. Image references
-are defined using syntax identical to link references:
-
-    [id]: url/to/image  "Optional title attribute"
-
-As of this writing, Markdown has no syntax for specifying the
-dimensions of an image; if this is important to you, you can simply
-use regular HTML `` tags.
-
-
- * * *
-
-
-
Miscellaneous

-
-
-
-Markdown supports a shortcut style for creating "automatic" links for URLs and email addresses: simply surround the URL or email address with angle brackets. What this means is that if you want to show the actual text of a URL or email address, and also have it be a clickable link, you can do this:
-
-    
-    
-Markdown will turn this into:
-
-    http://example.com/
-
-Automatic links for email addresses work similarly, except that
-Markdown will also perform a bit of randomized decimal and hex
-entity-encoding to help obscure your address from address-harvesting
-spambots. For example, Markdown will turn this:
-
-    
-
-into something like this:
-
-    address@exa
-    mple.com
-
-which will render in a browser as a clickable link to "address@example.com".
-
-(This sort of entity-encoding trick will indeed fool many, if not
-most, address-harvesting bots, but it definitely won't fool all of
-them. It's better than nothing, but an address published in this way
-will probably eventually start receiving spam.)
-
-
-
-
Backslash Escapes

-
-Markdown allows you to use backslash escapes to generate literal
-characters which would otherwise have special meaning in Markdown's
-formatting syntax. For example, if you wanted to surround a word with
-literal asterisks (instead of an HTML `` tag), you can backslashes
-before the asterisks, like this:
-
-    \*literal asterisks\*
-
-Markdown provides backslash escapes for the following characters:
-
-    \   backslash
-    `   backtick
-    *   asterisk
-    _   underscore
-    {}  curly braces
-    []  square brackets
-    ()  parentheses
-    #   hash mark
-	+	plus sign
-	-	minus sign (hyphen)
-    .   dot
-    !   exclamation mark
-#+end_export
 * Forth
 :PROPERTIES:
 :EXPORT_FILE_NAME: _index
 :EXPORT_HUGO_MENU: :menu "main"
 :EXPORT_HUGO_SECTION: forth
-:EXPORT_HUGO_CUSTOM_FRONT_MATTER: :caption "Highly Factored Code"
-:EXPORT_HUGO_CUSTOM_FRONT_MATTER+: :header /img/forth.png
+:EXPORT_DESCRIPTION: "Highly Factored Code"
+:EXPORT_HUGO_CUSTOM_FRONT_MATTER: :header /img/forth.png
 :END:
 This is where I post my watForth programs.
 
-* Git
+At present, my forth testbed is located at https://forth.kengrimes.com
+
+* Code Repositories
 :PROPERTIES:
 :EXPORT_FILE_NAME: _index
-:EXPORT_HUGO_MENU: :menu "main"
+:EXPORT_HUGO_MENU: :menu "main" :title Git
 :EXPORT_HUGO_SECTION: git
-:EXPORT_HUGO_CUSTOM_FRONT_MATTER: :caption "Code Repositories"
-:EXPORT_HUGO_CUSTOM_FRONT_MATTER+: :header /img/git.png
+:EXPORT_HUGO_CUSTOM_FRONT_MATTER: :header /img/git.png
 :END:
 
 
 * About
 :PROPERTIES:
 :EXPORT_HUGO_SECTION: about
-:EXPORT_HUGO_MENU: :menu "main"
-:EXPORT_HUGO_CUSTOM_FRONT_MATTER: :caption '("Ken Grimes" "Computer Scientist At Large")
-:EXPORT_HUGO_CUSTOM_FRONT_MATTER+: :header /img/home.png
+:EXPORT_HUGO_MENU: :menu "main" :title About
+:EXPORT_HUGO_CUSTOM_FRONT_MATTER: :header /img/home.png
 :EXPORT_FILE_NAME: _index
 :END:
-This is a website I've constructed for the purpose of developing blogging
-software. I will probably blog with it once development is complete. In the mean
-time, if you're curious, this is my [[file:/cv.pdf][curriculum vitae]]
+#+begin_description
+Ken Grimes
+
+Computer Scientist
+
+At Large
+#+end_description
+Hi! I'm Ken, a 34-year-old computer scientist currently living in Irvine,
+California. This is a website I've constructed for the purpose of developing
+web-facing software. I will probably blog with it once development is
+complete. In the meantime, if you're curious, this is my [[file:static/cv.pdf][curriculum vitae]]