Contribute for Tokens

As developers, there are times when we want the best things in life – those development tools that are mostly – free. If you would like to set up a mostly static site using github pages, then this post is for you.

If you are doing something similar, go through these straightforward 2 steps and save your time 🙂

Before proceeding to the two steps, on how to use custom domain, I will brief on how to publish your website using GitHub pages. If you already have a GitHub page (Eg., you can directly proceed to the step number #1 Adding CNAME to GitHub repo.

Publish Your Website Using GitHub Pages

Since this is a tutorial article with straightforward steps, I will directly move to the steps 🙂

STEP 1: Create Repository

Of course, the first step is to create the repository for the website you wish to publish.

Let’s say (in my case) it’s

1*8b9z2iIYA60ccwNE VcQMw | IT SERIES | free hosting using github, github pages

STEP 2: Push Your Code

The html file with name index.html will be published as the home page. If there is no index.html file, then it searches for file and that markdown file will be published as the homepage.

1*9WQEbbv77InkislA GptkA | IT SERIES | free hosting using github, github pages


You can also push the code for static website in a branch named gh-pages and select that branch to be rendered/published in the next step. But there is no such hard and fast rule that you will have to publish gh-pages branch, you can simple deploy the master branch too.

STEP 3: Go To Settings

Click on the settings tab.

1*Z5bfkZJZykUGLNe 7s4s0w | IT SERIES | free hosting using github, github pages

STEP 4: Publish GitHub Page

Scroll down to GitHub Pages section and select master branch (or gh-pages branch)

github pages

Note* Keep in mind that index.html file will be rendered as the home page of published website, if index.html is not found, will be published, so keep the names of your files accordingly.

STEP 5: Go To Website

You can go to the published website after 15–20 seconds ( Your site is published at <address>)

1*DvUNk0tTL9ZrVassSSHBvg | IT SERIES | free hosting using github, github pages

Adding Custom Domain

Follow these two steps!

1. Adding CNAME to GitHub repo

First of all, you’ll need to add a CNAME file to your GitHub repo. Now, just as adding a normal file, it can be done by two ways.

One way is to create a new file called CNAME (without any extension) and in that file, add the domain name (Eg. in my case) then commit and push the changes from Git bash or your terminal.

Second way is to do it directly from GitHub,

  • Click on “Create New File”
  • Name the file “CNAME”
  • In the contents, add the domain name

That’s it, GitHub part is over

1*nWy4Ub0yfESZ29iAFMyJLA | IT SERIES | free hosting using github, github pages

2. Adding A Records with your DNS provider

First step (adding cname) was to be done on your GitHub side, your own repo! The second step (adding A record) will be done on the side of your DNS provider.

In this step we will be creating an ALIAS or ANAME record, or simply, A record that points to the IP (or domain) of GitHub pages server.

Doing this is very simple, all you need to do is find a section on the website of your domain name provider where you can add A records. Generally this section itself is called DNS. Once you find it, add the following IP addresses in the Points To field.
1*oC8GmN fBM sQ5y1WF XPA | IT SERIES | free hosting using github, github pages

For complete documentation on setting up an apex domain, click here!

That’s it
Do you like Maida Barrientos's articles? Follow on social!
Create your free link page or bio page
No Comments
Comments to: Host your Personal Site on Github Pages – Step by Step – 2020

What do you think?