Estimated reading time: 2 minutes
There are many tutorials out there about starting off with Hugo, but nearly all of them take you through installing and then ask you to select a Hugo template. Now lets be honest there are not that many of them and most of what is available are not the best designs. This is one area that really needs some work.
To ensure this tutorial covers all angles this page will discuss adding a theme to your hugo.
You need to first find a theme you like, to do this go to https://themes.gohugo.io/ and find one you like. When you find one, click on the picture and then test it out using the demo button. Once you are happy, go back to the theme description page and click the download button. This will take you to GitHub page for the theme. From here you can click the ‘clone or download’ button and then either clone using the url and git commands or you can download the theme using the download to desktop option.
The theme should be downloaded and extracted (either by git or direct download) to your hugo sites themes folder.
cd themes
git clone URL_TO_THEME
Open your sites config file and add a them variable to it with the name of your extracted sites folder. This folder will be in the theme folder.
each theme should come with its own version of the config.toml file inside of a exampleSite folder. It is advised to use this to replace your own config.toml that sites in the root of your site.
Alternatively you can try the theme and see if it works by adding the theme variable to your current config.toml file.
** Warning … ** Most themes use a different structure and so just adding the theme to your own config.toml may not work due to the structure being different to your current structure.
theme: themename
Lastly, all you have to do is run the ‘hugo’ command and then run your ‘hugo server’ and check in your browser what your site looks like with the new theme.
Part 9 of 15 in the hugo zero to hero series.