How to Setup a Custom Domain for Your GitHub Hosted Website

Introduction

With Github pages, you can setup your own personal website, a portfolio website or even a full fledged blog (based on Jekyll) with your own custom domain name and you only have to pay for the domain name (to your domain name seller, around 12$ yearly). Isn’t that very awesome?

Your Github hosted website or blog uses the same infrastructure used by Github so you don’t have to worry about exceeding bandwidth or anything like that.If you are a blogger who’s using popular blogging and CMS platforms such as Wordpress, you may consider switching to Jekyll and GitHub pages. Jekyll allows you to have a full fledged blog where you have posts, categories, pagination and other cool things with a major difference from the other platforms, there is no database! only static files. Jekyll is the static site generator and engine behind Github pages so you can host any Jekyll based blog on GitHub which will take care of running Jekyll for you and makes your site ready for serving on each commit.

In this tutorial, we are going to see how to setup a custom domain name for your website hosted with GitHub Pages.

We assume you already have a Github page configured and ready for a custom domain name and of course, you have bought the domain name you want to use.

There are two slightly different but equivalent methods that you can use to link your custom domain name to your Github page.

Method 1: Create CNAME File Manually

You first create your local git repository:

Next, enter your repository info and other optional things such as the description.

Add some bunch of HTML, CSS and JavaScript files with an index.html file, then create a CNAME file in the root folder (where index.html lives).

mkdir my-website && cd my-website
git init
mkdir css js
touch index.html
echo "hello world" > index.html 
touch CNAME 
echo "my-domain-name.com" > CNAME

Next, you need just to commit and push files to a GitHub repository you have created.

git remote add origin https://github.com/techiediaries/my-github-website.git
add .
commit -m "first website commit"
git push -u origin master 

You should have your repository source look like the following screenshot:

GitHub pages are disabled by default, you need to enable them by going to repository settings, scroll down until you find Github pages pane, next select your website source to enable Github pages.

Choose the master branch as a source and click on Save.

Now after the settings page reloads, you should see this message:

Your site is ready to be published at http://my-domain-name.com/.

That is all you have to do from GitHub side.

Method 2: Create CNAME from Repository Settings

The second method is equivalent to the first one, you don’t need to create the CNAME file manually.

After pushing your repository (without creating a CNAME), go to settings, choose the source of your website and click on Save.

After settings page reloading, you need to enter your domain name and click on Save.

A CNAME file will be created for you automatically, go to repo source to find it.

Just make sure to pull out the changes to your local repository so you get no conflicts when you commit and push your local repo next time.

Pointing Your Domain Name Provider DNS to GitHub

The next thing to do is set up your domain name provider DNS to point to GitHub servers.

Whatever DNS provider you use, all you have to do is create an Alias, Aname or A record and point it to Github servers.

So just try following your DNS provider’s instructions and create two A records that point your custom domain to these GitHub IP addresses:

192.30.252.153
192.30.252.154

Make sure that your apex domain is pointing to both IP addresses you provided. After waiting a while, just let DNS information propagate (the period differs between providers). You can then visit your website to see if everything is ok, if not, try a utility like dig to see if your apex domain is pointing to GitHub IP addresses.

$ dig my-domain-name.com +nostats +nocomments +nocmd

Normally, you should get something like this:

my-domain-name.com.   73  IN  A 192.30.252.153
my-domain-name.com.   73  IN  A 192.30.252.154

Conclusion

So congratulations for setting up your custom domain name to point to your GitHub hosted website. As I said earlier, if you are a blogger, you should consider Jekyll as an alternative to other blogging platforms, especially if you are looking for good quality hosting for free. You can find the repository we just created at this link.

This post How to setup a custom domain for your github hosted website first appeared on techiediaries.