Intertwingling AsciiDoc and Hugo⁠✨

Page contents

1. My journey with AsciiDoc and Hugo

For a long time I’ve wanted to modernize the Infinite Ink website and in 2017,⁠[1] I tentatively decided to use AsciiDoc and Hugo to do this. I chose the AsciiDoc markup language because I wanted to use markup that is more standardized and richer than Markdown. I chose the Hugo static site generator because I wanted a generator that supports AsciiDoc and has no dependencies (other than an implementation of AsciiDoc such as Asciidoctor).

For more than two years, this decision was tentative and I wrote my articles in pure AsciiDoc. This involved…

  • putting an AsciiDoc Document Header just below the Hugo front matter of each article,

  • using a lot of AsciiDoc attributes,

  • using AsciiDoc includes,

  • using AsciiDoc’s ifdef and friends,

  • doing convoluted things with paths,

  • and always thinking that I needed to figure out how to use AsciiDoc’s code-block syntax highlighting.

In 2020, I decided to no longer be tentative about this and to no longer write in pure AsciiDoc. Instead, I now promiscuously use Hugo shortcodes throughout my writing. This means that for Infinite Ink’s website, AsciiDoc and Hugo are intertwingled and if I ever decide to change either my markup language or my site generator, it will be a PITA. In other words, I’m committed to this AsciiDoc+Hugo marriage and I hope it works out!🤞

 

2. Using Hugo’s markup.asciidocExt site variable to configure AsciiDoc

Starting with Hugo v0.74.0, which was released 2020-July-13, you can configure AsciiDoc in your Hugo config file. Here is an excerpt of Infinite Ink’s config.yaml:

markup:
 asciidocExt:
  preserveTOC: true
  workingFolderCurrent: false  # default is false
  attributes:
   toc: macro
   hide-uri-scheme: true@  # trailing @ means ok to override
   sectlinks: true
   ii2do-title: Infinite Ink’s To-Do and Done Lists
   huri-config-vars: https://gohugo.io/getting-started/configuration/
   huri-page-vars: https://gohugo.io/variables/page/
   huri-site-vars: https://gohugo.io/variables/site/
   huri-file-vars: https://gohugo.io/variables/files/

 

Note that in the last four attribute settings, “huri” is an abbreviation of “Hugo URI.”

The highlighted workingFolderCurrent and sectlinks settings are discussed in section 5 below.

 

3. Highlighting code blocks

Asciidoctor supports code-block syntax highlighting, but it involves installing and maintaining a Ruby gem. Instead of messing around with Ruby, I prefer to use Hugo’s built-in highlight shortcode.

Here is how I highlighted the YAML fragment that is displayed in the previous section (section 2):

{{< highlight yaml "hl_lines=4 8" >}}
markup:
 asciidocExt:
  preserveTOC: true
  workingFolderCurrent: false  # default is false
  attributes:
   toc: macro
   hide-uri-scheme: true@  # trailing @ means ok to override
   sectlinks: true
   ii2do-title: Infinite Ink’s To-Do and Done Lists
   huri-config-vars: https://gohugo.io/getting-started/configuration/
   huri-page-vars: https://gohugo.io/variables/page/
   huri-site-vars: https://gohugo.io/variables/site/
   huri-file-vars: https://gohugo.io/variables/files/
{{< /highlight >}}

The first and last lines of this source code (just above here) calls Hugo’s built-in highlight shortcode. To learn about this Hugo shortcode, see the highlight section of Infinite Ink’s Hugo Tips, Shortcodes, and Fragments.

 

4. Using Hugo shortcodes for reusable snippets

Before my decision to commit to AsciiDoc+Hugo, all my reusable content snippets were in AsciiDoc attributes and AsciiDoc includes. I now use Hugo shortcodes for some AsciiDoc content snippets. Below is an example of one of Infinite Ink’s snippets.

 

Example of a Hugo shortcode written in AsciiDoc markup

The following Hugo shortcode comprises pure AsciiDoc at the top and a Go Template comment block at the bottom.

Source of a shortcode named hugo-home-v-index.adoc
The home page layout file can be named either `home.html` or `index.html`.
I prefer to name it `home.html` because the word `index` is
https://wikipedia.org/wiki/Semantic_overload[semantically overloaded,title="'Semantic overload' at Wikipedia"]
in Hugo.

{{- /*

USAGE: {{% snippets/hugo-home-v-index %}}
PATH: layouts/shortcodes/snippets/hugo-home-v-index.adoc

N2S: This entire file is *published* in intertwingling-asciidoc-hugo

*/ -}}

This shortcode is rendered…

 

💡

  • This shortcode uses AsciiDoc syntax and is meant to be used in an AsciiDoc (.ad, .adoc, or .asciidoc) content source file and called with the {{% and %}} shortcode delimiters (not the {{< and >}} shortcode delimiters).

  • To use this snippet in a footnote, the following syntax works:
    footnote:[{{% snippets/hugo-home-v-index %}}]

  • To avoid whitespace problems, the snippet begins on the first line of the shortcode file and the comment, which is below the snippet, uses the Go Template trim-whitespace comment style.

  • This shortcode is named hugo-home-v-index.adoc but as far as I can tell, Hugo ignores its file extension (.adoc). The file extension is basically just a N2S (note to self).

 

5. Using AsciiDoc includes for reusable snippets

An AsciiDoc include is better than a Hugo shortcode…

  • if the snippet resides somewhere other than a project’s layouts/shortcodes/ directory, which is where Hugo reusable shortcodes must reside,

  • or if you want to use an AsciiDoc include feature, such as including only specific lines of a file,

  • or if you do not want the safety features that Hugo shortcodes, and Go Templates in general, enforce.

 

Example of an AsciiDoc include

In the source of section 3 of Infinite Ink’s Linkified Section Headings in Hugo-⁠Generated Web Pages, I use the following AsciiDoc include to display lines 1, 2, and 3 of Infinite Ink’s layouts/_default/_markup/render-heading.html.

include::layouts/_default/_markup/render-heading.html[lines=1..3]

To display all lines of an AsciiDoc include file, use the following syntax.

include::layouts/_default/_markup/render-heading.html[]

This second AsciiDoc include line is used in the source of this section of this page and is rendered right here:

<h{{ .Level }} id="{{ .Anchor | safeURL }}">
         <a href="#{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</a>
</h{{ .Level }}>

{{- /*

PATH: layouts/_default/_markup/render-heading.html
FORKED FROM: https://gohugo.io/getting-started/configuration-markup/#heading-link-example

NOTE TO SELF:
* Lines 1-3 of this file are *published* in linkified-section-headings-in-hugo-generated-web-pages
* This entire file is *published* in intertwingling-asciidoc-hugo

*/ -}}

Note that this included file is a Hugo Markdown render hook and it does for Markdown what the sectlinks: true config setting (from section 2 above) does for AsciiDoc, i.e., linkify section headings. You can see it in action in Infinite Ink’s Ordinary and Extraordinary Markdown, which is one of the rare Infinite Ink pages written in Markdown rather than AsciiDoc or raw HTML.⁠[2]

 

‼

  • In AsciiDoc and Hugo, forward slash (/) works as a directory path delimiter on any platform (including Windows).

  • The relative path layouts/_default/_markup/ in the above two AsciiDoc includes works…

    1. because of the workingFolderCurrent: false config setting (from section 2 above). This makes a path in an AsciiDoc include relative to the project’s root directory.

    2. And because I cd to the project’s root directory before running the hugo command (as opposed to using hugo --source …).

 

6. Using get-leaf-text custom shortcode to get a snippet in the current leaf bundle

If a snippet is used in only one page, you can turn the page into a Hugo bundle and put the snippet inside the bundle directory. This is what I did with the markup.asciidocExt snippet that is used in sections 2 and 3 above. The source files of this page, which is a leaf bundle, are structured like this:

2020-12-21-intertwingling-asciidoc-hugo/
├── index.adoc
└── markupdotasciidocext.yaml

In index.adoc, the source of section 2 includes this fragment…

{{< highlight yaml "hl_lines=4 8" >}}
{{< get-leaf-text markupdotasciidocext.yaml >}}
{{< /highlight >}}

…and the source of section 3 includes this fragment:

----
{{</* highlight yaml "hl_lines=4 8" */>}}
{{< get-leaf-text markupdotasciidocext.yaml >}}
{{</* /highlight */>}}
----

To learn about Infinite Ink’s get-leaf-text custom shortcode, see the get-leaf-text section of Infinite Ink’s Hugo Tips, Shortcodes, and Fragments.

 

7. References

To learn more about intertwingling AsciiDoc and Hugo, see:

 

8. Related pages and portals

Also see these related Infinite Ink portals:  #asciidoc  #gohugo  #iusethis  #tech  #webdev

9. Comments 👍 👎 📝

To comment, you must be signed in to GitHub.

10. Endnotes

1. You can see the evolution of my thoughts about the modernization of the Infinite Ink website on Infinite Ink’s To-Do and Done Lists starting in the section ~2013–2016 and scrolling up.
2. All Infinite Ink pages that were published in the 1990s were written in raw HTML. Most Infinite Ink pages that were published in 2019 and 2020 were written in AsciiDoc. (If you’re wondering what happened in between, I was publishing via Blogger, Tumblr, Twitter, GitHub, GitBook, etc.)