hugo version
Ongoing
According to
Repology,
the latest
packaged Hugo
is
.
2023-April-12
As of today, this evolving[1]
article
has been on
the web
for
To learn about the Hugo static site generator, see Infinite Ink’s #gohugo Portal.
There are hundreds of Hugo themes available at…
Most of these themes include
an example site in a
directory
named
exampleSite
.
Playing with a Hugo theme’s example site is a good way to…
learn about Hugo in general,
decide if you want to use a particular theme for your website,
and 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…
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.112.3-ba6f74e40420d76f15fc8c2358be90f7aca98e0e+extended windows/amd64 BuildDate=2023-05-24T14:42:50Z 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
below,
the directory structure will look something like this:
HugoPlayground/ └── themename-2023-05-24/ ├── 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 “Kate” or whatever. |
Browse a Hugo themes directory (for example themes.gohugo.io) and find a theme that 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,
name it
).
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-05-24/exampleSite/
is the project root.
On some systems, you can
do this by
doing
Shift+RightClick
on
the exampleSite
directory name 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-05-24"
Or something like this in a config.yaml
:
themesDir: ../.. theme: themename-2023-05-24
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-05-24/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.
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
this instance of
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 hugo.toml
configuration file:
hugo new site SITENAME
Or this
command
if you prefer a
hugo.yaml
configuration file:
hugo new site SITENAME -f=yaml
Either of the above two commands will create the following directory structure.
SITENAME/ ├── archetypes/ ├── assets/ ├── content/ ├── data/ ├── layouts/ ├── public/ ├── static/ ├── themes/ └── hugo.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,
i.e.:
SITENAME/ ├── archetypes/ ├── assets/ ├── content/ ├── data/ ├── layouts/ ├── public/ ├── static/ ├── themes/ │ └── themename/ ⟵👀 └── hugo.EXTENSION
To continue creating your website, see…
the
theme’s README
and gohugo.io’s Quick Start.
‼ | With this default directory structure, you do not
need to specify fragment of config.toml # themesDir not needed theme = "themename" or… fragment of config.yaml # themesDir not needed theme: themename |
For more about Hugo, see Infinite Ink’s…
“Edit This Page” With vscode://
URIs (featuring a Hugo partial)
A Way to Compare Hugo’s Markup Languages (featuring inline footnotes)📊
Transforming Text with Hugo (featuring plainify
, htmlUnescape
, and more)
Hugo Shortcodes: How to Include Go Templates in Hugo Content Files
TGIH: Themeless & Gitless Introduction to the Hugo SSG (a Hugo tutorial👩🏫)
🔗 Linkified Section Headings in Hugo-Generated Web Pages (featuring Markdown and AsciiDoc examples)
Hugo’s Markup Languages: AsciiDoc, HTML, Markdown,
Configuring Security in Hugo (featuring settings needed to use Asciidoctor and Pandoc)🔒
Hugo’s .RenderString
Method (featuring AsciiDoc admonitions in Go HTML and Markdown)
Variable and Parameter Names in Hugo (featuring camelCase🐫 and snake_case🐍)
http://localhost:1313/
in your default web browser, 1313
.@nm@mathstodon.xyz
or
#InfiniteInk
in it.