Build your own website: Hugo + Github Pages + Namecheap

 

Did you know that you can have your own website without paying for hosting?

Ok, the purpose of this post is not promoting a cost-saving method, but to show you how you can setup your website using a static content generator (Hugo) and hosting in on GitHub.com connected to your own domain. So you don’t need to pay for and manage a hosting service.

What you need for this:

  1. A registered domain name (You can still use this with a sub-domain on github.io website, but the process will be a bit different)
  2. An account in GitHub.com website
  3. A terminal application (Like iTerm on Mac or the command line on Windows)

Here is the list of steps you need to take:

  1. Setup DNS for your domain
  2. Setup your GitHub.com account
  3. Download Hugo on your computer and write something
  4. Update your GitHub.com account with the new content

And now the details!

Setup DNS

Details of this step depend on your domain registrar. For me, it is NameCheap.

You need to enter the address of GitHub.com as the hosting system for your domain. So if anyone types your domain name into their browser, they will be redirected to GitHub to show content.

First, you need to set “NAMESERVERS” option in the domain management page to “Namecheap BasicDNS”.

Screen Shot 2017-06-29 at 04.43.47

After that you can go to “Advanced DNS” page and update “HOST RECORDS” like below:

Screen Shot 2017-06-29 at 04.44.18

Here the numbers are specific to GitHub, so you will need to enter them exactly like this. “mahdix” is my username on the GitHub website. You will need to replace this with your own username.

Set up GitHub

After setting up your DNS records, you need to tell GitHub about your domain. So when it is referred to about a domain name, it knows what to show.

Go to your GitHub.com account, add a new repository by clicking “+” button on the top right of the screen, and selecting “New repository”. It’s better if you name this new repository same as your domain name but you can choose whatever name you like. ┬áMake sure “Initialise this repository with a README” is checked, so your repository will be created with some basic content.

Screen Shot 2017-06-29 at 04.47.32

Get Hugo and write

First, you will need to open your console application. Make sure `git` is installed on your system. If it is not, follow instructions here to do the installation.

In the console, run `git clone` command to fetch a copy of your newly created repository.

Then you will need to run Hugo and write some content. You can follow instructions here as a starting guide.

When you are finished writing some content, you will need to push your changes to GitHub. This step informs GitHub about the new content you have just generated. This is done via `git push origin` command. Note that you may need to set up SSH keys if you are doing this for the first time (explained here).

Finish GitHub set up

Now, you need to tell GitHub about your domain name. Go to your GitHub repository, and go to “Settings” tab. There is a section called “Custom Domain”. You will need to enter your domain name there:

Screen Shot 2017-06-29 at 04.56.25

After you have done this step, your new content will be visible in a few minutes (This takes a bit longer only for the first time). Note that you only need to do this step once.

How to automate the publish process

There is a way to use some online services to automate the Hugo part. So you only need to make changes on GitHub website interface (write content, create new pages, …) and as soon as you submit your changes, they will be published for you. I will explain this in a follow-up post.

 

Leave a Reply

Your email address will not be published. Required fields are marked *