Publishing GitHub page website on a custom domain with Https enforcement

I recently helped my junior to publish his portfolio website on a custom domain purchased from GoDaddy with https enforcement. I had some experience publishing my website before but I hardly knew about https enforcement. So when my junior told about it, I started reading the GitHub Help.

I found out that Https enforcement was introduced on Github on June 2016. The steps to publish the website are available on the Github Help but they are so overwhelming and tough to understand for a beginner and the designers like us. So here’s an article guide on how to publish GitHub page website.

Publishing your website on GitHub Pages

1. Create a repo named as<your-github-username>.github.io. For my case, it was nikyadav.github.io.

2. Push the website code from your computer to this repository. You can either do it from the terminal or directly upload the files and commit the changes.

Push code to repo

3. Go to the Settings tab.

Settings Tab

4. Scroll down to Github Pages section and select masterbranch (if not selected by default). You’ll see the website live in 15–20 seconds.

Adding a Custom Domain

Step #1 Buy a domain

Purchase a custom domain from domain providers. I purchased from GoDaddy.

Step #2 Add a CNAME file

Add a CNAME file in your repository. This can be done in 3 ways.

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

Creating CNAME file locally

Second is to do it directly from GitHub

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

Creating CNAME file from github

The third is the most simple way.

• Click on the Settings tab
• Scroll all the way down to Github pages section and under the custom domain, write your domain name.
• Hit “Save”. This will add a CNAME file in your directory (No commit is required).

Creating CNAME file from Settings

Step #3 Add ‘A’ records

Visit your domain service provider (let say, GoDaddy). Go to DNS settings and create ALIAS or ANAME or A records that points to following IP addresses.

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

You have to create separate A record for each IP address.

Adding A records

*Important*

If you have published site before June 2016 and you’re using an A record that points to 192.30.252.153 or 192.30.252.154, you’ll need to update your DNS settings for your site to be available over HTTPS or served with a Content Delivery Network.

If you’re using an A record that points to 207.97.227.245 or 204.232.175.78, you’ll need to update your DNS settings, as Github no longer serve Pages directly from those servers.

Also, If you are updating your previous records, you may need to delete the CNAME file from your repository and re-add it.

It can take a full day to update and the wait varies among DNS providers, for the newly created records to take effect.

Enforcing Https

Head back over to GitHub settings and Enforce HTTPS. After which it could take a few hours for your site to be https secure.

Troubleshooting Https error

If your website still shows some error, This may be due to the following possible reasons-

1. Mixed Content

If your site’s HTML still references images, CSS, or JavaScript over HTTP, then your site is serving mixed content, and you may have trouble loading assets.

To remove your site’s mixed content, edit your site’s HTML files and change http:// to https:// so that all of your assets are served over HTTPS.

Source: Github Help

2. HTTPS error

It can take up to an hour for your GitHub Pages site to become available over HTTPS after you add and correctly configure your custom domain.

If you’ve chosen to use Certification Authority Authorization (CAA) records, at least one CAA record must exist with the value letsencrypt.org for your GitHub Pages site to be accessible over HTTPS. For more information, see “Certificate Authority Authorization (CAA)” in the Let’s Encrypt documentation.

To create a CAA record, refer to this link.

Basically, add a CAA record that points to letsencrypt.org.

Add a CAA record

Congrats!

After you have successfully enabled https, You would have a working GitHub page website on a custom domain with https enforcement.

Congratulations

Thanks for reading this so far. If you like this article, please hit the 👏 button and let others too know about this. If you want any help or just want to say hi, ping me on yadavnikhil012@gmail.com.

Also Keep following me on Medium, Dribbble, and twitter for such updates. 🔥 🔥 🔥