hugo version
Ongoing
According to
Repology,
the latest
packaged Hugo
is
.
2022-April-12
As of today, this evolving[1]
article
has been on
the web
for
Hugo is the static site generator used to generate the new parts of the Infinite Ink website. To learn about Hugo, see Infinite Ink’s #gohugo Portal.
There are hundreds of Hugo themes available at…
Most of these themes include
an example site in a
subdirectory named
exampleSite
.
Playing with a Hugo theme’s example site is a good way…
to learn about Hugo in general,
to decide if you want to use a theme for your website,
and to learn how to implement a feature of a theme.
This article assumes the following.
You use a text editor with an integrated terminal emulator, for example…
Atom (sunset 2022-12-15),
Code, which is also known as Visual Studio Code and
You have a web browser with JavaScript enabled.[3] JavaScript is needed by the LiveReload feature of Hugo’s built-in web server.
You know how to download or clone a Hugo theme from a git hosting provider such as GitHub.com.
Extended Hugo is installed on your system. Details about this are in the next section.
Since many Hugo themes require extended Hugo, you are more likely to have success playing with a Hugo theme if you install extended (rather than unextended) Hugo.
To learn how to install extended Hugo, see Infinite Ink’s Installing Extended Hugo.
hugo
with the hugo version
commandTo check that the hugo
command is on your path
and is an
extended version, run this at a command-line prompt:
hugo version
You should see something like this:
hugo v0.109.0-47b12b83e636224e5e601813ff3e6790c191e371+extended windows/amd64 BuildDate=2022-12-23T10:38:11Z VendorInfo=gohugoio 👆
To make it clear
that you are playing with a Hugo theme,
create a directory named something like
HugoPlayground
.
After you follow the
first two steps in the next section,
the directory structure will look something like this:
HugoPlayground/ └── themename-2023-01-11/ ├── archetypes/ ├── assets/ ├── exampleSite/ ├── layouts/ └── static/
‼ | For the
steps
below to work,
do not move the theme’s exampleSite directory.
It must be
a subdirectory of
. |
The steps in this and the next section assume you are using Visual Studio Code, which is also known as Code. If you are using a different editor,[4] mentally replace “Code” with “IntelliJ IDEA” or whatever.
Browse themes.gohugo.io and find a theme you like that includes…
an exampleSite
directory
and a README
with clear detailed instructions.
Download
the theme,
put it in your HugoPlayground
directory,
and rename the theme’s directory
so that it includes the date you downloaded it,
for example
.
This is useful if you
play
with a lot of themes on a lot of days
over many years
(as I have done).
Launch Code so that the
directory
themename-2023-01-11/exampleSite/
is the project root directory.
On some systems, you can
do this by
right clicking this exampleSite
directory in a file browser and choose
Open with Code from the pop-up context menu.
In Code, open the
config
file
that is
in
the root of
this
exampleSite
directory
and edit it
so that
the
themesDir
and theme
configuration settings
are set to
something like this in a config.toml
:
themesDir = "../.." theme = "themename-2023-01-11"
Or
something like this in a config.yaml
:
themesDir: ../.. theme: themename-2023-01-11
Note that the dee in themesDir
is upper case.
Open
Code’s integrated terminal emulator
and make sure the terminal’s
working directory is
themename-2023-01-11/exampleSite/
.
In
this
terminal pane, run
,
which is equivalent to
.
In a web browser,
view
http://localhost:1313
.[5]
Edit some of the example site’s files and view the LiveReload results of your edits in the web browser. Note that LiveReload works only if JavaScript is enabled in the web browser.[3]
layouts
and other non-exampleSite
filesTo view the code that makes a theme work, do the following.
Launch another instance of Code so that the
directory
is the project root directory.
On some systems, you can
do this by
right clicking this
directory in a file browser and choose
Open with Code from the pop-up context menu.
In Code,
edit
some of
the files in the
assets/
,
layouts/
,
static/
,
and other
non-exampleSite
directories,
and view the LiveReload results of your edits in the web browser.
When
you find a theme you would like to use,
create a website skeleton with this
command
if you prefer a config.toml
:
hugo new site SITENAME
Or this
command
if you prefer a config.yaml
:
hugo new site -f=yaml SITENAME
Either of the above two commands will create the following directory structure.
SITENAME/ ├── archetypes/ ├── assets/ ├── content/ ├── data/ ├── layouts/ ├── public/ ├── static/ ├── themes/ └── config.EXTENSION
Where
SITENAME is a directory name that you choose
and
EXTENSION is either toml
or yaml
.
After you create the
SITENAME
skeleton,
put your chosen theme’s directory inside the skeleton’s themes/
directory.
To continue creating your website, see…
the
theme’s README
and gohugo.io’s Quick Start.
💡 |
|
For more about Hugo, see Infinite Ink’s…
🔗 Linkified Section Headings in Hugo-Generated Web Pages (featuring Markdown and AsciiDoc examples)
Hugo’s .RenderString
Method (featuring AsciiDoc admonitions in Markdown and Go HTML)
Variable and Parameter Names in Hugo (featuring camelCase🐫 and snake_case🐍)
Configuring Security in Hugo (featuring settings needed to use Asciidoctor and Pandoc)
A Way to Compare Hugo’s Markup Languages (featuring inline footnotes)
Hugo’s Markup Languages: AsciiDoc, HTML, Markdown,
Hugo Tutorial: Bundleless, Themeless, & Gitless Introduction to the Hugo SSG
http://localhost:1313/
in your default web browser, 1313
.@nm@mathstodon.xyz
or
#InfiniteInk
in it.