Hugo — A Static Website Generator Absolute Basic Part 2

Hugo Official Website/ https://gohugo.io/

The previous article was just a bit of Hugo introduction and also the first step of how to use this web framework. However, what we had in the end of that article is only a blank webpage, which is not very useful to us. We are going to add a theme to it. Make it more presentable.

Here is the complete list of Hugo themes. Since I like minimalism, I’d choose this theme.

>> cd Tech-blog-101

Make sure you are in your blog folder. Replace Tech-blog-101 by your blog’s name.

If you are not sure where you are, you could always use this command:

>> pwd 

Just make sure you’re inside the correct folder.

Then we could list the files under this folder:

>> ls
total 8
drwxr-xr-x   10 yourname  staff   320 May  3 23:06 .
drwx------+ 101 yourname  staff  3232 May  7 14:02 ..
drwxr-xr-x    3 yourname  staff    96 May  3 23:01 archetypes
-rw-r--r--    1 yourname  staff    82 May  3 23:01 config.toml
drwxr-xr-x    2 yourname  staff    64 May  3 23:01 content
drwxr-xr-x    2 yourname  staff    64 May  3 23:01 data
drwxr-xr-x    2 yourname  staff    64 May  3 23:01 layouts
drwxr-xr-x    3 yourname  staff    96 May  3 23:06 resources
drwxr-xr-x    2 yourname  staff    64 May  3 23:01 static
drwxr-xr-x    2 yourname  staff    64 May  3 23:01 themes

You should see the same files and folders just like above.

Next step: go inside the themes folder by this command:

cd themes

Download the theme to this folder:

>> git clone https://github.com/JugglerX/hugo-whisper-theme.git

You’ll see something like this:

Cloning into 'hugo-whisper-theme'...
remote: Enumerating objects: 473, done.
remote: Total 473 (delta 0), reused 0 (delta 0), pack-reused 473
Receiving objects: 100% (473/473), 1.93 MiB | 1.82 MiB/s, done.
Resolving deltas: 100% (150/150), done.

Now we need to copy some files from this theme folder to replace our original files:

cp -a themes/hugo-whisper-theme/exampleSite/. .

After that, we should modify the config.toml file a bit:

>> nano config.toml

Make sure the first five lines look like this:

baseURL = "/"
themesDir = "themes"
theme = "hugo-whisper-theme"
languageCode = "en-us"
title = "Hugo Whisper Theme"

Last step:

hugo server

You’ll see something like this:

| EN
+------------------+----+
  Pages            | 14
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  4
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0
Total in 317 ms
Watching for changes in /Users/username/Desktop/Tech-blog-101/{content,data,layouts,static,themes}
Watching for config changes in /Users/username/Desktop/Tech-blog-101/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Then go to your web browser and type:

http://localhost:1313/

And done!

You’ll see this:

Screenshot of Hugo Whisper Theme

I hope you find this tutorial useful.

Happy Writing!