Hugo is ideal for maing a static site: it is fast, flexible and easy to customise using themes.

After installing it (for example using brew install hugo on a Mac) it’s as simple as:

$ hugo new site example
$ cd example
$ hugo server

You can then visit http://localhost:1313/ to view your local site.

Add a theme

There are hundreds of free themes for Hugo. Whether you are looking to make a site for your company, a blog, landing page or portfolio you should find one that meets your needs.

Most themes can be added by cloning its repo (from your site’s folder). For example:

$ git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod

Then enable the theme within your config.toml file. For example:

theme: "PaperMod"

Customise the theme

You may want to make changes to the theme. You can simply edit any of its files directly. However if you later want to update the theme, you risk losing those custom changes. So instead you might prefer to override its files. Simply create a matching file in your folder. For example if there is a /themes/name/layouts/partials/logo.html file and you want to make changes to its HTML, copy that file to /layouts/partials/logo.html. And edit that one. That will take precedence when Hugo builds the site and so your changes will be automatically used instead.

If you would like to make changes to the CSS (for example to use different colours) many themes offer the option of providing the path to a custom CSS file. For example in your config.toml you may add something like this:

[params]
customCSS = ["/css/styles.css"]

And then create that /css/styles.css in the /statics folder.

Add a post

You can make a file manually, or use the CLI:

$ hugo new posts/this-is-my-first-post.md

The file should contain markdown.

If you are working on the site locally (by running hugo server) it will automatically detect any changes and reload the site to reflect them.