In this tutorial we will be creating a new Hugo theme from scratch.
Why create your very own Hugo theme? well it helps distinguishes your self from the multiple readily available themes in themes.gohugo.io

If you don't have the time and want to deploy your hugo site immediately maybe an existing theme is what you need, besides you can just create your own theme at a later time.

Creating a Hugo Theme

First we need a Hugo project either an existing one or a new one.

Note: skip below if you're using an existing project

hugo new site my-hugo-site

Once you have your Hugo site we can then create a new theme.

cd my-hugo-site

hugo new theme my-theme

We now should have a directory like below.

my-hugo-site/
├── ...
├── themes/
│   └── my-theme/
│       ...
└── hugo.toml

Using the Theme

Now open hugo.toml you should have something like this.

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

Add theme = 'my-theme' to use it just like this.

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

theme = 'my-theme'

Running the Hugo server

You can then run the Hugo server with the command below.

hugo server -D

Note: -D means it will also include contents with draft = true, see the hugo server page to read more.

We should have something like below once we successfully run the Hugo server.

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

Built in 10 ms
Environment: "development"
Serving pages from disk
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

You can now access it via http://localhost:1313, take note of the Web Server part since the port will vary when you have multiple Hugo servers running.

And congratulations you should have your custom Hugo theme running, checkout my tutorial for adding Tailwind to the Hugo theme.