Hugo is one of the most popular open-source static site generators. The developers craft many themes (https://themes.gohugo.io/) for the Hugo community to use. Here's a quick guide on adding those themes to our Hugo sites.
You can install Hugo on macOS, Windows, Linux, OpenBSD, FreeBSD, and on any machine where the GO(AKA Golang) compiler tool chain can run.
Here's the official installation guide: https://gohugo.io/getting-started/installing/
choco install hugo-extended -confirm
The extended version is nothing but has Sass/SCSS functionality.
- After installing it, check your Hugo version to ensure you have a suitable version for a particular theme. In some cases, you may need to have installed the extended versions for some themes to be worked perfectly. So keep an eye on this thing as well.
To check your version of Hugo, run:
hugo new site newhugo
The above command will create a new Hugo project in the newhugo folder.
To go inside the root of the directory, run:
- It's always better to fork the particular theme before adding it to our sites. Your forked theme will not be deleted even if the upstream repo is deleted. So the theme will be persisted.
Before adding a git submodule, we have to initialize the git repository. So run this:
Now we can add that theme as a git submodule.
git submodule add https://github.com/apvarun/blist-hugo-theme.git themes/mytheme
Now our theme will be added to the folder
To copy all the content from the theme's exampleSite to our site, run this:
cp -a themes/mytheme/exampleSite/. .
Set the theme name like this:
theme = "mytheme"
Commonly Hugo theme doesn't require node modules unless it uses a tool like PostCSS.
Copy the package.json from the themes/mytheme, and paste it to our newhugo root folder. and run this:
To generate the build, run this(From the root folder):
To serve the website, run this:
This will render your page in localhost:1313