This article assumes that you know how to use Hugo to generate web pages from unbundled source files. One way to learn about this is in Infinite Ink’s Hugo Tutorial: Themeless & Gitless Introduction to Hugo.
Infinite Ink’s Hugo Tutorial uses a project root directory named TGIH (for Themeless & Gitless Introduction to Hugo). Here is part of the TGIH content directory, along with some Hugo terminology.
| TGIH/content/ | .Kind[1] | Also Known As |
|---|---|---|
| page | regular page |
| section | list page |
| page | regular page |
👉️ |
|
A source file
below
the content/ directory
named
either
index.md
or
_index.md
means that
hugo
will
generate
the
destination
file(s)
from
some or all of the
files in
a
directory.
When index.md is used, the containing directory is called a leaf bundle
and when _index.md is used, the containing directory is called a
branch bundle.
👉️ |
|
Step 17.4 Source files, destination files, and pretty URLs[2] in Infinite Ink’s Hugo Tutorial discusses the transformation of some TGIH[3] files from source to destination to URL (viewable in a web browser after deployment). Here is a modified version of that transformation table.
source in | about.md | articles/one.md |
|---|---|---|
↓ | ↓ | ↓ |
destination in | about/index.html | articles/one/index.html |
↓ | ↓ | ↓ |
URL (if baseURL | ii.com/about/ | ii.com/articles/one/ |
An equivalent alternative is to
replace
about.md
with
about/index.md
and articles/one.md
with articles/one/index.md.
The transformations then looks like this:
source in | about/index.md | articles/one/index.md |
|---|---|---|
↓ | ↓ | ↓ |
destination in | about/index.html | articles/one/index.html |
↓ | ↓ | ↓ |
URL (if baseURL | ii.com/about/ | ii.com/articles/one/ |
With
this structure,
the
source
directories
content/about/
and
content/articles/one/
are
each a
leaf bundle.
In
step
15. Explore the layouts directory
in Infinite Ink’s Hugo Tutorial,
I wrote about adding content to the home web page
by adding the
following
highlighted
HTML paragraph
to
the home.html layout file.
<h1 class="title">{{ .Title }}</h1>
<p>
Here are the articles on this website <strong>ordered by publication date</strong>, starting with the most recently published article.
</p>
An alternative is to put the following highlighted line in home.html.
<h1 class="title">{{ .Title }}</h1>
{{ .Content }}
And create content/_index.md that contains the following.
---
# front matter, possibly empty, is required
---
Here are the articles on this website **ordered by publication date**, starting with the most recently published article.
The content/ directory
is an example of a
branch bundle
and this content/_index.md file contains metadata
(essentially empty
in this case) and Markdown content for the home web page.
The transformation will look like this:
source in | _index.md |
|---|---|
↓ | ↓ |
destination in | index.html |
↓ | ↓ |
URL (if baseURL | ii.com/ |
Note that if this _index.md file does not exist,
the home page is created from
the
TGIH[3]
layouts/_default/home.html
layout file,
which references
some
config.yaml
settings
(such as title).
💡︎ | Here’s
a
mnemonic that I use to
remember the meaning of
I remember the meaning of
|
Request: Is this tip useful to you? Whether it is or isn’t, I’d love to hear your thoughts about it because I often wonder if anyone understands the way I’m thinking about something‽
For more about Hugo bundles, see:
Infinite Ink’s #gohugo Portal includes gohugo-related links from around the web, including:
hugo config command includes uglyURLs: false, which is the default, and baseURL: ii.com/.To add a reaction or comment to this page, you need a GitHub account and your browser needs to be able to run a script that is hosted at https://utteranc.es.