Hugo is a static file generator. It allows you to write your content in markdown then generates it into a blog or site.
Installation
Since hugo is written in Golang, it compiles to a single binary that can be downloaded from its release pasge here.
- Head over to hugo release page [here](https://github.com/gohugoio/hugo/releases
- Click on the latest release and locate the tar file for your machine
- Download the file. Use the following command if using the terminal
curl -LO https://github.com/gohugoio/hugo/releases/download/v0.87.0/hugo_0.87.0_macOS-64bit.tar.gz
- Extract the content locally
➜ tar -xzvf hugo_0.87.0_macOS-64bit.tar.gz x LICENSE x README.md x hugo
- Move extracted content to the /usr/local/bin $PATH
sudo mv hugo /usr/local/bin
- Confirm that the command works as expected by checking the version
❯ hugo version hugo v0.87.0-B0C541E4 darwin/amd64 BuildDate=2021-08-03T10:57:28Z VendorInfo=gohugoio
Create new site citizix
To create a new site, run the following commands.
hugo new site citizix
Switch to the new site and initialize a git repository
cd citizix
git init
Add a Theme
To add a theme, you need to identify your theme here https://themes.gohugo.io/. I am using the theme noteworthy
found in this git repo https://github.com/kimcc/hugo-theme-noteworthy.
# Clone the site you like to the themes dir
git clone https://github.com/kimcc/hugo-theme-noteworthy.git themes/noteworthy
To update to the new theme real quick, update the config.toml
file, add the theme = "noteworthy"
line.
Quick command
echo 'theme = "noteworthy"' >> config.toml
Customize the Theme
Your new site already looks great, but you will want to tweak it a little before you release it to the public. As a quick start, you can copy the config.toml
file in the exampleSite
as a start and change the defaults.
Create new blog post
To create a sample page for your blog, use the following command
hugo new posts/blog-with-hugo.md
Start server
To run the server and view your site, do this:
hugo server -D
Navigate to your new site at http://localhost:1313/.
Feel free to edit or add new content and simply refresh in browser to see changes quickly (You might need to force refresh in webbrowser, something like Ctrl-R usually works).
Build static pages
When you are done adding your content, you would want to build the static pages that will render your site.
Use this command
hugo -D
Output will be in ./public/
directory by default (-d
/--destination
flag to change it, or set publishdir in the config file).
Drafts do not get deployed; once you finish a post, update the header of the post to say draft: false
Conclusion
In this guide we managed to install hugo and create a simple site with it.