X-Git-Url: https://www.kengrimes.com/gitweb/?p=kengrimes.com%2Fcontent.git;a=blobdiff_plain;f=content.org;fp=content.org;h=9b9de65c9c908af853233998ff56e01de83a9716;hp=2ef879c87cff10dd494dc5b26972faf23283a30c;hb=137a062b4047f3eb304f4e397eb385a5f983c16f;hpb=6cb0fef53857e8b87402e13595faa8726bf95d5b
diff --git a/content.org b/content.org
index 2ef879c..9b9de65 100644
--- a/content.org
+++ b/content.org
@@ -1,61 +1,842 @@
#+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: :header /img/blog.png
+:EXPORT_FILE_NAME: _index
+: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-11 Wed 21:56]
+:PROPERTIES:
+:EXPORT_FILE_NAME: ox-hugo-tutorial
+:EXPORT_HUGO_CUSTOM_FRONT_MATTER: :caption "Exporting to Hugo's Blackfriday Markdown from Orgmode"
+:EXPORT_HUGO_CUSTOM_FRONT_MATTER+: :header /img/org.png
+:END:
+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]] made ox-hugo by extending org's 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 important "extra" data that ox-hugo
+needs to properly export data is a ~:PROPERTIES: ... :END:~ block with
+definitions used for 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). ~:PROPERTIES:~ blocks are
+common in org for defining arbitrary metadata about sections, and can be used in
+many such ways. Providing an ~:EXPORT_FILE_NAME:~ definition signals to ox-hugo
+that this heading is available for export, and that it should be exported to a
+markdown file with the name provided. For example, the ~:PROPERTIES:~ block of
+the page you're currently reading looks like this:
+#+begin_src org
+: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/org.png
+:END:
+#+end_src
+The ~:caption~ and ~:header~ variables are optional definitions allowed by the
+Speedy theme of this website, but the filename is the only required property for
+ox-hugo. So, as a minimal example, here's what a new blog might look like in its
+entirety:
+#+begin_src org -n
+#+hugo_base_dir: .
+,* Home
+:PROPERTIES:
+:EXPORT_HUGO_SECTION:
+:EXPORT_FILE_NAME: _index
+:END:
+This is the home of my blog!
+,** I have herpes
+:PROPERTIES:
+:EXPORT_FILE_NAME: herpes
+: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 ~.~ as the base
+directory, which assumes that the file will be placed in the hugo project's base
+directory. 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
+â  âââ _index.md
+â  âââ herpes.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: .
+,* My Homepage
+:PROPERTIES:
+:EXPORT_HUGO_SECTION:
+:EXPORT_FILE_NAME: _index
+:EXPORT_HUGO_MENU: :menu "main"
+:END:
+This is the home of my blog!
+,* My Blog
+: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.
+,** I have herpes
+:PROPERTIES:
+:EXPORT_FILE_NAME: herpes
+:END:
+Someone gave me herpes! Oh no!
+#+end_src
+Which yields the following:
+#+begin_src
+.
+âââ content
+â  âââ _index.md
+â  âââ posts
+â  âââ herpes.md
+â  âââ _index.md
+âââ hugotest.org
+#+end_src
+As you might expect, 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 "My Blog" 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
+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.
+
+One question you may ask is why the blog's homepage is not defined in the *My
+Blog* heading. This is a fair question! Property blocks are inherited by
+sub-headings, and as of the current version of ox-hugo even ~:EXPORT_HUGO_MENU:~
+properties are inherited. 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 specifies which sub-directory content will
+output to).
+
+To illustrate, let's assume you want to extend the previous site definition with
+a section about fishsticks.
+#+begin_src org -n 24
+,* Fishsticks
+:PROPERTIES:
+:EXPORT_HUGO_MENU: :menu "main"
+:EXPORT_HUGO_SECTION: fishsticks
+: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 valid, and produces the expected file output:
+#+begin_src
+.
+âââ content
+â  âââ fishsticks
+â  â  âââ gortons.md
+â  â  âââ _index.md
+â  â  âââ van-de-camps.md
+â  âââ _index.md
+â  âââ posts
+â  âââ herpes.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. Tisk tisk. So if you use this workflow, be sure to put your index
+pages in subheadings so that the tier-1 heading can be used for "global"
+definitions that affect all of the pages.
+
+Another question might be why the index pages are named *_index*. You can use
+*index* instead of *_index*, the only difference is whether Hugo treats the
+index page as a leaf, or a branch, when [[https://gohugo.io/content-management/page-bundles/][bundling resources]] for Hugo to query
+during site generation. This is a relatively new addition to Hugo as of version
+0.39, and isn't fully functional or integrated well into ox-hugo, so I simply
+don't use it at the moment. I define all indexes as *_index* to make them
+branches because, in future versions, packaging files within bundles like this
+will provide a more stable way for Hugo themes to reference page- and
+section-specific files that accompany the content. Currently, I store all such
+files in the static folder, which is copied verbatim to the output directory by
+Hugo when the site is built.
+
+*** 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 it
+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.
+
+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
+â  âââ herpes.md
+â  âââ _index.md
+âââ data
+âââ hugotest.org
+âââ layouts
+âââ static
+âââ themes
+#+end_src
+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
+â  âââ herpes.md
+â  âââ _index.md
+âââ data
+âââ hugotest.org
+âââ layouts
+âââ public
+â  âââ categories
+â  â  âââ index.xml
+â  âââ fishsticks
+â  â  âââ index.xml
+â  âââ index.xml
+â  âââ posts
+â  â  âââ index.xml
+â  âââ sitemap.xml
+â  âââ tags
+â  âââ 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). You'll notice from this default output however that Hugo creates a
+sitemap, and two directories for [[https://gohugo.io/content-management/taxonomies/][taxonomies]] that let you "tag" and "categorize"
+content. 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.
+
+*** Example Hugo Site
+As an example, let's add some tags and categories to our *hugotest.org* file:
+#+begin_src org -n
+#+hugo_base_dir: .
+,* My Homepage
+:PROPERTIES:
+:EXPORT_HUGO_SECTION:
+:EXPORT_FILE_NAME: _index
+:EXPORT_HUGO_MENU: :menu "main"
+:END:
+This is the home of my blog!
+,* My Blog
+: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.
+,** I have herpes :@inanity:herpes:fear:
+:PROPERTIES:
+:EXPORT_FILE_NAME: herpes
+:END:
+Someone gave me herpes! Oh no!
+,* Fishsticks
:PROPERTIES:
-:EXPORT_HUGO_CUSTOM_FRONT_MATTER: :caption '("A Nonnormative Tomorrow")
-:EXPORT_HUGO_CUSTOM_FRONT_MATTER+: :header /img/blog.png
+:EXPORT_HUGO_MENU: :menu "main"
+:EXPORT_HUGO_SECTION: fishsticks
:EXPORT_FILE_NAME: _index
-:EXPORT_HUGO_MENU: :menu "main" :weight -1
:END:
+This section devoted to Orson Wells, R.I.P.
+,** Van De Camps :@inanity:
+:PROPERTIES:
+:EXPORT_FILE_NAME: van-de-camps
+:END:
+If this is fish, I'll be a monkey's uncle.
+,** Gortons :@inanity: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 generate 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 tags.
+#+begin_src
+.
+âââ archetypes
+â  âââ default.md
+âââ config.toml
+âââ content
+â  âââ fishsticks
+â  â  âââ gortons.md
+â  â  âââ _index.md
+â  â  âââ van-de-camps.md
+â  âââ posts
+â  âââ herpes.md
+âââ data
+âââ hugotest.org
+âââ layouts
+âââ public
+â  âââ categories
+â  â  âââ inanity
+â  â  â  âââ index.xml
+â  â  âââ index.xml
+â  âââ fishsticks
+â  â  âââ index.xml
+â  âââ index.xml
+â  âââ posts
+â  â  âââ index.xml
+â  âââ sitemap.xml
+â  âââ tags
+â  âââ fear
+â  â  âââ index.xml
+â  âââ herpes
+â  â  âââ index.xml
+â  âââ index.xml
+âââ static
+âââ themes
+#+end_src
+The index pages of taxonomies provide a list of all available taxonomies of that
+type, with links to lists that show content associated with that taxonomy. For
+instance, public/tags/index.xml looks like this:
+#+begin_src xml -n
+
+