How to create and deploy a Hugo blog
Introduction
I like the idea of having a personal website where I can write some stuff, so I created this one. Before I started, I had a few requirements:
- It should be easy to create and deploy new content.
- It should be easy to maintain.
- It should be created using static site generator.
The requirements are met by using Hugo (static site generator) and Github Actions (CI/CD).
Steps
Create Github account and repository
Install Hugo
Create a new Hugo site
Setup CI/CD with Github Actions
Custom domain name (optional)
1. Create Github account and repository
Create Github account and repository. It’s important to name the repository username.github.io
where username
is your Github username. My repository is named defilippomattia.github.io
.
2. Install Hugo
Just follow the official guide.
3. Create a new Hugo site
Clone previously created repository.
git clone https://github.com/defilippomattia/defilippomattia.github.io.git
cd ./defilippomattia.github.io
Run Hugo command to create a new site.
hugo new site myblog
Add a theme, I’m using Lowkey. Follow the theme’s instructions to install it.
For Lowkey theme I did this:
git submodule add https://github.com/nixentric/Lowkey-Hugo-Theme.git themes/lowkey
cp -r themes/lowkey/ExampleSite/* .
rm -rf themes/lowkey/ExampleSite/config/_default/config.toml
npm install
- Start the Hugo server.
hugo server -D
Now you can see your website at http://localhost:1313/
. Once you are happy with the result, you can stop the server and commit your changes.
4. Setup CI/CD with Github Actions
Next goal is to setup CI/CD with Github Actions, this will allow us to automatically build and deploy the website on every push (for eg. when a new post is created). I was suprised how easy it was to setup this, literally in 5 minutes I had a working CI/CD pipeline. I just followed the official guide.
5. Custom domain name (optional)
You can host your website on Github Pages for free (on username.github.io
), but you can also use a custom domain name. I bought my domain name on Namecheap and I configured it to point to Github Pages.
Conclusion
With this setup, it’s very easy to create and deploy new content. Just create a new post, commit and push it. Github Actions will automatically build and deploy the website.
GitHub repository is available here: https://github.com/defilippomattia/defilippomattia.github.io