During my free time before starting my first semester of university, I decided to start a blog! Using Hugo and Github Pages, I was able to have my very cool blog up and running (completely free!) in a very short amount of time. In this post, I will show you how exactly I did this!

Hugo 📦

What Is Hugo?

Hugo is a framework for building websites written in GoLang and thus, one of its main selling points is its speed. Similar to Jekyll, it is a static site generator which means that this is a perfectly suitable tool for blogs.

Installation

Unlike Jekyll, installing Hugo is much easier in my opinion. If you are macOS like me, simply open up your terminal and type:

brew install hugo

For information on Homebrew and how to install this package manager, visit brew.sh.

For installing Hugo on other operating systems, visit the doc here.

Create Your Site And Run It

Once you have installed Hugo, you can create a new site using the following command:

hugo new site <name_of_your_site>

This should create a folder called whatever you named your site. Run your blog locally by running the following command:

hugo server

You should see where the web server is available at in the terminal (usually http://localhost:1313) and you should be able to see your blog there. Any changes should automatically appear on the site whilst the server is still running!

Themes

Next step for me was to select a theme from the plethora of themes available for free on themes.gohugo.io. Whether you are creating a blog, landing page, portfolio page or some other type of website, there will be a theme suited for your needs. Whatever theme you choose, they should provide you with instructions to install your theme.

The particular theme I am using for this blog is called PaperMod.

Config

Within the folder of your newly created site, you should find a file called config.toml (or config.yml if you did -f yml on the command to create the site). In there, you can change your blog name and more importantly, you can apply the theme to your site by adding the following line of code to your config.toml:

theme = "<name_of_the_theme>"

or if you have a config.yml:

theme: <name_of_the_theme>

There will be many other config params that you can add to your config file. These will be specific to your theme, so you must look them up by yourself.

Creating New Posts

To create a new blog post, simply type the follow command to your terminal:

hugo new --kind post post/<name_of_the_post>.md
# or
hugo new -k post post/<name_of_the_post>.md

Now you can go to that file and edit your new blog post. To make the post visible, go to the post and set draft: false.

Deployment ⚒️

What Is Github Pages?

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.

Interestingly, Github Pages recommend and use Jekyll to build static sites by default.

You can learn more about Github Pages here.

Deploy!

To deploy your blog to Github Pages, you will first need to create a repository on Github and push your code there. Then in your repository, you will have to go to the Actions section to add a new workflow. Name the file gh-pages.yml and paste in the code from here. This will make sure that every time you push your code to the repository, Github Actions will build the site automatically and ensure your site is up to date.

The final step is to go back to your repository. Go to Settings -> Pages to find your base URL which you will copy and paste to your config file. You must also select gh-pages as your source branch.

That’s it! You’ve made it to the end and you should (hopefully) have a fully functioning blog! 🥳

All my socials, including my Github where you can find the repository for my blog, can be found on my blog homepage!