Hugo - Creation of a website with the Hugo Clarity theme
Updated on 2022-10-19
For our blog we use the static site generator Hugo with the theme
Hugo Clarity. Here is how to install them.
The following installation was performed on Ubuntu 21.10 and later on Ubuntu 22.04 when this post has been upated.
Installation de Hugo
- Installing Git, a version control system, will be useful to retrieve the theme, and it is also good practice to version
control the sources of the website:
sudo apt install git - Installation de Hugo :
sudo apt install hugo - And then we can verify that Hugo is properly installed with the command:Who should provide something like this based on the installed version:
hugo versionhugo v0.104.3+extended linux/amd64 BuildDate=unknown
Initializing the site
We can now create a site named mysite with the command hugo new. This will generate the skeleton of the website:
hugo new site mysite && cd mysiteWith tree -F, here is the content of the directory mysite:
./ ├── archetypes/ │  └── default.md ├── config.toml ├── content/ ├── data/ ├── layouts/ ├── public/ ├── static/ └── themes/
Setting up the Hugo Clarity theme
The skeleton created in the previous step is sufficient only if you actually want to start
from scratch and dive into the arcane details of Hugo. Running the command hugo server
results in an uninteresting "Page Not Found".
It is preferable to choose and install a theme. Hugo offers numerous themes on the page Hugo Theme: blog, portfolio, gallery etc.
The present site uses the theme Hugo Clarity, you can see it in action on its the creator's site.
Here's how to install the Hugo Clarity theme. Still in the mysite directory, retrieve the Hugo Clarity
theme using the following commands:
- Initialization of the Git repository:
git init - Retrieval of Hugo Clarity sources:
git submodule add https://github.com/chipzoller/hugo-clarity themes/hugo-clarity - Removal of the example website sources :
rm -f themes/hugo-clarity/exampleSite/* . - Removal of the default configuration file
config.toml:Note that the configuration of Hugo Clarity takes place in files grouped in therm -f config.tomlconfig/directory. The theme's default configuration file is located atconfig/_default/config.toml. - With
tree -F, here is the content of the directorymysite:./ ├── archetypes/ │  ├── default.md │  └── post.md ├── config/ │  └── _default/ │  ├── configTaxo.toml │  ├── config.toml │  ├── languages.toml │  ├── markup.toml │  ├── menus/ │  │  ├── menu.en.toml │  │  └── menu.pt.toml │  └── params.toml ├── content/ │  ├── about.md │  ├── about.pt.md │  ├── archives.md │  ├── homepage/ │  │  ├── about.md │  │  ├── index.md │  │  └── work.md │  ├── _index.md │  ├── post/ │  │  ├── bundle/ │  │  │  ├── building.png │  │  │  ├── building.webp │  │  │  └── index.md │  │  ├── emoji-support.md │  │  ├── _index.md │  │  ├── map.md │  │  ├── markdown-syntax.md │  │  ├── markdown-syntax.pt.md │  │  ├── math-typesetting.md │  │  ├── notices.md │  │  ├── placeholder-text.md │  │  └── rich-content.md │  └── search.md ├── data/ ├── layouts/ ├── LICENSE ├── public/ ├── README.md ├── resources/ │  └── _gen/ │  ├── assets/ │  │  └── sass/ │  │  └── sass/ │  │  ├── main.sass_d2bdc985df0e3369a538eb4e858e857f.content │  │  └── main.sass_d2bdc985df0e3369a538eb4e858e857f.json │  └── images/ ├── static/ │  ├── images/ │  │  ├── building.png │  │  ├── dollar.png │  │  ├── jane-doe.png │  │  └── Note-Snippet.gif │  └── logos/ │  └── logo.png └── themes/ └── hugo-clarity/ ├── archetypes/ │  └── post.md ├── assets/ │  ├── js/ │  │  ├── code.js │  │  ├── custom.js │  │  ├── functions.js │  │  ├── fuse.js │  │  ├── highlight.js │  │  ├── index.js │  │  ├── search.js │  │  └── variables.js │  └── sass/ │  ├── _base.sass │  ├── _components.sass │  ├── _custom.sass │  ├── _fonts.sass │  ├── main.sass │  ├── _mobile.sass │  ├── _override.sass │  ├── _syntax.sass │  ├── _utils.sass │  └── _variables.sass ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── exampleSite/ │  ├── archetypes/ │  │  └── post.md │  ├── config/ │  │  └── _default/ │  │  ├── configTaxo.toml │  │  ├── config.toml │  │  ├── languages.toml │  │  ├── markup.toml │  │  ├── menus/ │  │  │  ├── menu.en.toml │  │  │  └── menu.pt.toml │  │  └── params.toml │  ├── content/ │  │  ├── about.md │  │  ├── about.pt.md │  │  ├── archives.md │  │  ├── homepage/ │  │  │  ├── about.md │  │  │  ├── index.md │  │  │  └── work.md │  │  ├── _index.md │  │  ├── post/ │  │  │  ├── bundle/ │  │  │  │  ├── building.png │  │  │  │  ├── building.webp │  │  │  │  └── index.md │  │  │  ├── emoji-support.md │  │  │  ├── _index.md │  │  │  ├── map.md │  │  │  ├── markdown-syntax.md │  │  │  ├── markdown-syntax.pt.md │  │  │  ├── math-typesetting.md │  │  │  ├── notices.md │  │  │  ├── placeholder-text.md │  │  │  └── rich-content.md │  │  └── search.md │  ├── layouts/ │  ├── LICENSE │  ├── README.md │  ├── resources/ │  │  └── _gen/ │  │  └── assets/ │  │  └── sass/ │  │  └── sass/ │  │  ├── main.sass_d2bdc985df0e3369a538eb4e858e857f.content │  │  └── main.sass_d2bdc985df0e3369a538eb4e858e857f.json │  └── static/ │  ├── images/ │  │  ├── building.png │  │  ├── dollar.png │  │  ├── jane-doe.png │  │  └── Note-Snippet.gif │  └── logos/ │  └── logo.png ├── i18n/ │  ├── ca.toml │  ├── de.toml │  ├── en.toml │  ├── es.toml │  ├── fr.toml │  ├── ja.toml │  ├── no.toml │  ├── pt.toml │  ├── tr.toml │  ├── zh-CN.toml │  ├── zh.toml │  └── zh-TW.toml ├── images/ │  ├── article-toc.png │  ├── image-figure.png │  ├── image-inline.png │  ├── screenshot-darkmode.png │  ├── screenshot-mobile-darkmode.png │  ├── screenshot-mobile.png │  ├── screenshot.png │  ├── syntax-block.gif │  ├── tags.png │  ├── tn-darkmode.png │  └── tn.png ├── layouts/ │  ├── 404.html │  ├── _default/ │  │  ├── baseof.html │  │  ├── index.json │  │  ├── list.html │  │  ├── _markup/ │  │  │  └── render-image.html │  │  ├── rss.xml │  │  └── single.html │  ├── index.html │  ├── partials/ │  │  ├── analytics.html │  │  ├── archive.html │  │  ├── comments.html │  │  ├── excerpt.html │  │  ├── favicon.html │  │  ├── figure.html │  │  ├── follow.html │  │  ├── footer.html │  │  ├── func/ │  │  │  ├── getCodeBlockSettings.html │  │  │  ├── getJavascriptBundle.html │  │  │  └── getStylesBundle.html │  │  ├── header.html │  │  ├── head.html │  │  ├── hooks/ │  │  │  ├── body-end.html │  │  │  └── head-end.html │  │  ├── i18nlist.html │  │  ├── icons.html │  │  ├── image.html │  │  ├── logo.html │  │  ├── math.html │  │  ├── mode.html │  │  ├── nav.html │  │  ├── opengraph.html │  │  ├── pager.html │  │  ├── post-meta.html │  │  ├── related.html │  │  ├── scripts.html │  │  ├── search/ │  │  │  ├── scripts.html │  │  │  └── widget.html │  │  ├── share.html │  │  ├── sidebar.html │  │  ├── sprite.html │  │  ├── top.html │  │  └── utterances.html │  ├── search/ │  │  └── single.html │  └── shortcodes/ │  ├── notice.html │  ├── openstreetmap.html │  ├── video.html │  └── youtube.html ├── LICENSE.md ├── README.md ├── resources/ │  └── _gen/ │  └── assets/ │  └── sass/ │  └── sass/ │  ├── main.sass_d2bdc985df0e3369a538eb4e858e857f.content │  └── main.sass_d2bdc985df0e3369a538eb4e858e857f.json ├── static/ │  ├── fonts/ │  │  ├── Metropolis-BlackItalic.woff │  │  ├── Metropolis-BlackItalic.woff2 │  │  ├── Metropolis-Black.woff │  │  ├── Metropolis-Black.woff2 │  │  ├── Metropolis-BoldItalic.woff │  │  ├── Metropolis-BoldItalic.woff2 │  │  ├── Metropolis-Bold.woff │  │  ├── Metropolis-Bold.woff2 │  │  ├── Metropolis-ExtraBoldItalic.woff │  │  ├── Metropolis-ExtraBoldItalic.woff2 │  │  ├── Metropolis-ExtraBold.woff │  │  ├── Metropolis-ExtraBold.woff2 │  │  ├── Metropolis-ExtraLightItalic.woff │  │  ├── Metropolis-ExtraLightItalic.woff2 │  │  ├── Metropolis-ExtraLight.woff │  │  ├── Metropolis-ExtraLight.woff2 │  │  ├── Metropolis-LightItalic.woff │  │  ├── Metropolis-LightItalic.woff2 │  │  ├── Metropolis-Light.woff │  │  ├── Metropolis-Light.woff2 │  │  ├── Metropolis-MediumItalic.woff │  │  ├── Metropolis-MediumItalic.woff2 │  │  ├── Metropolis-Medium.woff │  │  ├── Metropolis-Medium.woff2 │  │  ├── Metropolis-RegularItalic.woff │  │  ├── Metropolis-RegularItalic.woff2 │  │  ├── Metropolis-Regular.woff │  │  ├── Metropolis-Regular.woff2 │  │  ├── Metropolis-SemiBoldItalic.woff │  │  ├── Metropolis-SemiBoldItalic.woff2 │  │  ├── Metropolis-SemiBold.woff │  │  ├── Metropolis-SemiBold.woff2 │  │  ├── Metropolis-ThinItalic.woff │  │  ├── Metropolis-ThinItalic.woff2 │  │  ├── Metropolis-Thin.woff │  │  └── Metropolis-Thin.woff2 │  ├── icons/ │  │  ├── android-chrome-192x192.png │  │  ├── android-chrome-256x256.png │  │  ├── apple-touch-icon.png │  │  ├── bar.svg │  │  ├── browserconfig.xml │  │  ├── cancel.svg │  │  ├── caret-icon.svg │  │  ├── carly.svg │  │  ├── close.svg │  │  ├── copy.svg │  │  ├── expand.svg │  │  ├── favicon-16x16.png │  │  ├── favicon-32x32.png │  │  ├── favicon.ico │  │  ├── link.svg │  │  ├── mstile-150x150.png │  │  ├── order.svg │  │  └── site.webmanifest │  └── images/ │  ├── broken-image-error-msg.png │  ├── night-moon.jpg │  └── sun.svg └── theme.toml
Starting the server
Now you can start the server with the command:
hugo serverYou should see an output similar to this:
Start building sites …
hugo v0.104.3+extended linux/amd64 BuildDate=unknown
| EN | PT
-------------------+----+-----
Pages | 54 | 30
Paginator pages | 1 | 0
Non-page files | 2 | 0
Static files | 63 | 63
Processed images | 0 | 0
Aliases | 30 | 15
Sitemaps | 2 | 1
Cleaned | 0 | 0
Built in 97 ms
Watching for changes in /home/demo/mysite/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /home/demo/mysite/config/_default, /home/demo/mysite/config/_default/menus
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
The website can be found at http://localhost:1313/. And you will get:
