How I Created My Site For Free with Hugo and GitHub Pages
Table of Contents
If you are like me, then you’ve probably wanted to create a personal site but the available options were either expensive or simply not good enough. That was until I learnt of static site generators and their simplicity. This blog you are reading is made using Hugo and hosted on GitHub.
Here is the process:
- Installing Hugo
- Creating your new hugo site
- Building the site
- Hosting with GitHub Pages
Installing Hugo
This part may differ based on your development setup. I’d recommend Chocolatey for Windows and Homebrew for Mac but Hugo has documentation on the many installation methods. For Linux, Hugo is most likely on your distribution’s repository but you can check out the documentation.
Creating Your New Hugo Site
- Open your console, navigate to where you want to save your site and run
hugo new site .
to create the site in the current directory. If you’d like to create the site in a new directory, runhugo new site SITE_NAME
. - Look for a Hugo theme and setup the site skeleton based on the theme’s documentation. I personally use Blowfish
I recommend downloading themes as a Git Submodule as this will make it easier to update them. It’s also important to choose a theme with great documentation for your ease of use.
Building The Site
At this point we already have a skeleton of a site and we can run hugo server
at the root of our site. This will also allow us to observe the changes we make and their effect. You can run hugo server -D
if you want to test out with some draft posts as by default Hugo doesn’t show drafts.
Your site is now available at localhost:1313
Google as well as your theme’s documentation will be your friend from hereon. You can check out the exampleSite and other sites that use the same theme for inspiration.
Hosting with GitHub Pages
-
Create a public GitHub repository named
YOUR_GITHUB_USERNAME.github.io
but can use any other name. (we’ll get to that later) -
As you might have noticed, when you run
hugo
orhugo server
, some directories are created. These aren’t required and therefore we can create a .gitignore file and add/public
and/resources
to it. -
Push your changes to the GitHub repository we created.
-
Set up GitHub Actions by creating a file in
.github/workflows/gh-pages.yml
. Copy the content of the file from this section of the Hugo documentation.What this does is once GitHub notices changes to your main branch, it will perform a set of actions to publish your site to
gh-pages
branch. -
Push the GitHub Actions file and you’re done.
Your site is now live at YOUR_GITHUB_USERNAME.github.io
. If you chose to use a different repository name then your site is live at YOUR_GITHUB_USERNAME.github.io/REPOSITORY_NAME
Some YouTube channels that I found helpful when creating my site were Chris Stayte, Eric Murphy and Luke Smith.
Till next time, feel free to reach out. Cheers!