Blogging with hugo – a static site generator

Hugo is a static file generator. It allows you to write your content in markdown then generates it into a blog or site.

Installation

Since hugo is written in Golang, it compiles to a single binary that can be downloaded from its release pasge here.

• Head over to hugo release page [here](https://github.com/gohugoio/hugo/releases
• Click on the latest release and locate the tar file for your machine
• Download the file. Use the following command if using the terminal

  curl -LO https://github.com/gohugoio/hugo/releases/download/v0.87.0/hugo_0.87.0_macOS-64bit.tar.gz

• Extract the content locally

  ➜ tar -xzvf hugo_0.87.0_macOS-64bit.tar.gz x LICENSE x README.md x hugo 

• Move extracted content to the /usr/local/bin $PATH

  sudo mv hugo /usr/local/bin

• Confirm that the command works as expected by checking the version

  ❯ hugo version hugo v0.87.0-B0C541E4 darwin/amd64 BuildDate=2021-08-03T10:57:28Z VendorInfo=gohugoio 

Create new site citizix

To create a new site, run the following commands.

hugo new site citizix

Switch to the new site and initialize a git repository

cd citizix
git init

Add a Theme

To add a theme, you need to identify your theme here https://themes.gohugo.io/. I am using the theme noteworthy found in this git repo https://github.com/kimcc/hugo-theme-noteworthy.

# Clone the site you like to the themes dir
git clone https://github.com/kimcc/hugo-theme-noteworthy.git themes/noteworthy

To update to the new theme real quick, update the config.toml file, add the theme = "noteworthy" line.

Quick command

echo 'theme = "noteworthy"' >> config.toml

Customize the Theme

Your new site already looks great, but you will want to tweak it a little before you release it to the public. As a quick start, you can copy the config.toml file in the exampleSite as a start and change the defaults.

Create new blog post

To create a sample page for your blog, use the following command

hugo new posts/blog-with-hugo.md

Start server

To run the server and view your site, do this:

hugo server -D

Navigate to your new site at http://localhost:1313/.

Feel free to edit or add new content and simply refresh in browser to see changes quickly (You might need to force refresh in webbrowser, something like Ctrl-R usually works).

Build static pages

When you are done adding your content, you would want to build the static pages that will render your site.

Use this command

hugo -D

Output will be in ./public/ directory by default (-d/--destination flag to change it, or set publishdir in the config file).

Drafts do not get deployed; once you finish a post, update the header of the post to say draft: false

Conclusion

In this guide we managed to install hugo and create a simple site with it.