What is Hugo?
Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
Hugo is a static site generator. Unlike systems that dynamically build a page with each visitor request, Hugo builds pages when you create or update your content. Since websites are viewed far more often than they are edited, Hugo is designed to provide an optimal viewing experience for your website’s end users and an ideal writing experience for website authors.
Hugo belongs to “Static Site Generators” category of the tech stack, while WordPress can be primarily classified under “Self-Hosted Blogging / CMS”. Some of the features offered by Hugo are: Run Anywhere — Hugo is quite possibly the easiest to install software you’ve ever used, simply download and run.
Why use Hugo?
Why use Hugo, when you can use Wordpress or even build your own blog using for example Django? A big advantage of using Hugo is that I don’t need need to mess around with hosting, and just focus on writing content. Besides that, it’s super fast and really easy to install. It works almost out of the box , but still gives me the possibility to modify things if needed.
GitHub Pages
GitHub provides free and fast static hosting over SSL. We will shortly create a Hugo blog and deploy it on GitHub, we will also take it one step further to automate the whole process using GitHub Actions! :)
Oh, if you want, GitHub Pages also allows you to use a custom domain name.
Creating a GitHub Pages site
GitHub provides a Quickstart, which you can find here.
I’ll create a new GitHub repository and name it magsther.github.io and set the visibility to public.
This is also the address the Hugo blog will be published at (https://magsther.github.io/)
Once done, clone the repository to your workstation.
git clone git@github.com:magsther/magsther.github.io.gitCreate a Hugo blog
Let’s create a Hugo blog.
First you need to install Hugo, that can be done with the brew command if you are using MacOS. For other platforms , see this page.
brew install hugo
Create a new Hugo site using hugo new site . --force
Next step is to add a theme. Pick anyone that you like, I’ll use hugo-theme-hello-friend-ng
Follow the instructions for the theme that you picked on how to install it. There are usually more than one to do this.
If you don’t want to make any radical changes, it’s the best option, because you can get new updates when they are available. To do so, include it as a git submodule:
Looks good to me, let’s include it as a git submodule:
git submodule add https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ngAdding content
To add content to your blog, run hugo new posts/my-first-post.md
Now you can begin writing some content in that file. Once you are done, change this draft: true to draft: false to have it deployed.
Run Hugo
To run Hugo locally, type hugo server
Navigate to your new site at http://localhost:1313/
A neat thing is that you can update the post and directly see the changes on your website by just refreshing the browser. (as long as your Hugo server is still running in the background).
Customizing Hugo
A common thing to do is to customize the theme. The configuration file is called config.toml and is located in your root folder.
Again, you can look at the theme configuration documentation on how to do this.
Note that I changed the baseurl to match the name of my website that will be published on https://magsther.github.io I also changed publishDir to docs
baseurl = "https://magsther.github.io"title = "A blog about DevOps & SRE"languageCode = "en-us"theme = "hello-friend-ng"paginate = 10publishDir = "docs"
Publish your blog to GitHub Pages
Time to publish your beautiful blog to GitHub pages so that it can be accessible for the rest of the world.
First, run Hugo to generate the blog. This will create the docs folder that we pointed too in the config.toml file.
Add all your files, commit them and push it to your GitHub repository.
git add . && git commit -m 'new hugo blog' -a && git pushIn your GitHub repository to go GitHub Pages and enable it by changing the Source from None to Deploy from a branch.
Once you saved your changes, you new blog is now published at https://username.github.io
GitHub Actions
If you now jump over to the GitHub Actions tab in your repository, you will see that a workflow is created.
Click on the workflow to see a summary of the jobs that it ran.
Updating your blog
To create a new post for your Hugo blog, run these commands:
Create a new post: hugo new posts/hugo.md
Build the site: hugo
Commit and push the changes to GitHub: git add . && git commit -m 'creating my second post' -a && git push
This will trigger the workflow in GitHub Action and after a little while your new post is published at https://username.github.io
Conclusion
In this post, we looked at Hugo; how to create a blog and how to publish it to GitHub Pages.
For MUCH more information about Hugo, see the documentation.
