In this article, I will give some hint on how to use hugo. It also serves as a reminder for myself.

How to Create a Hugo Website

I won’t be covering this topic, but maybe I’ll cover it in another article. But sometimes you just need to change configuration of an existing Hugo website, for example when your domain name changes. For that, you need to reconfigure your site-wide configuration. This will be explained in the next section.

Site-wide Configuration

Your site-wide configuration are located in hugo.toml inside your hugo site. In case of changing domain name, I believe you only need to change the baseUrl value. There are many configurable things too like theme.

How to Create an Article

Use the following command to create a new article:

hugo new your-article-file-name.md

The command will generate a markdown file inside content/ folder with the name provided.

Hugo’s Markdown

Hugo’s markdown contain a metadata area on the top, where it explain the article you’re writing. You can change the title, document date, and the draft status for example. Just write away with markdown syntax after the metadata area. Once you’re done writing, you can remove the draft: true to make it publishable.

I also like to use tags to organize my articles. So I’ll usually put tags: ['topic1'] metadata on top. Your article can belong to many tags. But I usually only write an article for a specific topic.

Running Locally

You may want to preview the site before publishing them. That way, you can make sure all is rendered according to your taste. To do so, use the following command:

hugo server --noHTTPCache

For everything to work, you may need to run it twice. Just abort the first run with Ctrl+C.

Publishing

To publish your hugo project, just execute the hugo command on your project root. A public folder will be generated and you can upload them to your hosting. If it’s too annoying to keep archiving all your website, you can use my rsync article to sync the files.

Bonus: Linking

If you’re like me, you may want to change domain once in a while. However, your hugo site my be referencing your own domain (which is changing). See my article about alpine for example. There, I was referencing my deployed app on a domain. Since the domain is changed, the link doesn’t work. We can avoid hardcoding a value (e.g. domain) with Site Params.

To add a Site Params to your Hugo site, add [params] section to your hugo.toml file. For example:

...
[params]
mydomain = 'softwarejourney.my.id'

Then you can use it in your article like so:

Visit [my website](https://priv.{{% param "mydomain" %}})!

This is the link in action. Visit my website!