Install Hugo Theme: Part 2

Choosing a Theme #

Hugo offers a wide range of themes that you can use to customize the appearance of your website. You can explore the official Hugo Themes website or search for third-party themes on platforms like GitHub. Once you find a theme you like, download or clone its repository into the “themes” directory of your project.

Since we’re going to be building a blog, for the purpose of this guide, lets use the Stack theme.

Open your terminal or PowerShell and cd into the my-website directory that Hugo should have created if you have been following this guide until now.

The git init command initialises an empty git repository.

% cd my-website
my-website% git init
Initialized empty Git repository in ../my-website/.git/

Now we will create a submodule to import the Stack theme into our my-website directory.

sansubr@Santoshs-MacBook-Air my-website % git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
Cloning into '/Users/sansubr/site/my-website/themes/hugo-theme-stack'...
remote: Enumerating objects: 4313, done.
remote: Total 4313 (delta 0), reused 0 (delta 0), pack-reused 4313
Receiving objects: 100% (4313/4313), 1.07 MiB | 17.37 MiB/s, done.
Resolving deltas: 100% (2744/2744), done.

What the command above does is add the theme as a git submodule and copy the contents of the theme creator’s GitHub repository and to our themes directory. Using this as a git submodule helps get the latest version whenever there is an update to the theme - but more on this later.

You can also use Hugo’s modules feature to install it, but you will need to install the Go programming language for that. See the Hugo documentation on modules for a theme if you want to learn about that route. Here’s the documentation from the theme for installing this as a hugo module.

I prefer the git submodule route - it’s just simpler.

Let’s see how it looks like #

We haven’t done anything at the moment to our website. But we can still preview how it looks just to get a feel before we begin. Simply run the hugo server command.

% hugo server
Start building sites … 
hugo v0.113.0+extended darwin/arm64 BuildDate=unknown
WARN 2023/06/25 12:25:42 found no layout file for "html" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2023/06/25 12:25:42 found no layout file for "html" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2023/06/25 12:25:42 found no layout file for "html" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

                   | EN  
-------------------+-----
  Pages            |  3  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  0  
  Processed images |  0  
  Aliases          |  0  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 13 ms
Watching for changes in /Users/sansubr/site/my-website/{archetypes,assets,content,data,layouts,static}
Watching for config changes in /Users/sansubr/site/my-website/hugo.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 http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

It may throw a bunch of errors like above since we haven’t created any pages yet.

But what we’re looking for is the web server URL which for me is http://localhost:1313. It may be different for you.

Simply input this link on your web browser to see something like this:

Of course, there is no page here because we haven’t created any page or configured our website. But if you’re seeing this, you’re all good to head into the next section which is customizing the website.

Customizing Your Website #

Hugo uses the hugo.toml or config.toml as the file that stores all the configuration details when you build a website. It typically contains values for website URL, name, description and so on.

Lets load our code editor and open the hugo.toml file. This is how it should look like.

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'

There are currently 3 parameters on this file. If you want to change the title, put your website’s name within the quotes.

Since we downloaded a new theme, we should let Hugo know what theme we’re using by adding this line at the end.

theme = "hugo-theme-stack"

Now, it should look like this

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = "hugo-theme-stack"

This theme in particular has other config options that we will get into later as we configure our site further. For now, let’s go ahead and do the important stuff - let’s add content to our website in Part 3 →