Host Your Website on GitHub with Hugo: A Step-by-Step Guide

Today I've gone through lot's of pain to build my website (again) using Hugo for the 3rd time. 🙂 So I'm now documenting my process so that I can redo these in the future smoothly.

Prerequisite

I'm assuming you already know how to work with github for my own convenience. If you don't, there are lots of great blogs and youtube videos just one google search away!
I'm also assuming you are using Linux like me. 🙂

For reference you can checkout quick start page.

Steps

  1. Install Hugo server & Git:
sudo apt install hugo
sudo apt install git
  1. Create a directory structure for your project with "what ever" name you want using the following command:
hugo new site [any_name]
  1. Import the theme you want to use in your website:
cd [any_name]
git init
git submodule add git@github.com:luizdepra/hugo-coder.git themes/hugo-coder
  1. Edit config.toml file as instructed in your theme.

Bug: Dong change "+++" to "---" in markdown's yaml. It took me hours to figure out. 😑

  1. Put your contents like following way:
content/  
├─ posts  
│　├─ post 1.md  
│　└─ post 2.md  
├─ about.md  
└─ contact.md

Note: It is not necessary to follow the above format. You can name what ever you want. You just need to tweak certain settings accordingly if you don't follow default way.

  1. Go to [any_name] directory what you had created. Then run hugo server command to run hugo server on your device. This is how you can check everything is looking fine on you website or not.
  2. Give your all attention here!. Run hugo command to create public directory. The directory contains all the code of your website. You will just deploy the files inside the public directory into github page. Noting else.
  3. Go to public directory, run git and push it into your github repo named [your_username].github.io.
  4. Now take a coffee break. Checkout your website after sometime. You are all set!