Deploying Sapper PWA using Github Pages: Step by Step Tutorial ( Part 2)
Add custom domain to the website
In part 1, I talked about how you can deploy the Sapper PWA app to production and also host it free of cost using GitHub pages. If you haven’t seen that check that out ⬇️
In this section I am going to explain how you can add a custom domain to the same website. Please note that this is applicable to hosting any GitHub page and not specific to svelte/sapper deployment per se.
After you have published your static website to the GitHub pages, the domain would look something like http://<username>.github.io/ in my case it was http://anshul2209.github.io/.
To add a custom domain follow the steps below.
Step 1: Buy a custom domain (of course 😁).
There are a number of domain name provider like GoDaddy, DOMAIN.COM, Hostgator etc. I bought mine from Domain.com.
Step 2: Add the domain name to the GitHub page section in the settings of your repository.
Repository -> Settings -> Github Pages -> Custom Domain
Add your custom domain in the input field and also enable Enforce HTTPS.
Once you add the custom domain in this section there will be CNAME file committed to the repository in the master branch with an entry of your domain name.
Note: Make sure you commit the CNAME file in develop branch as well, otherwise this file will be deleted every time you are deploying new changes.
Step 3: Point your apex domain to the IP addresses for GitHub Pages.
As of today the IP addresses are 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153.
This is required because every-time a request comes to your custom domain it will redirected to the GitHub pages domain where your static site is hosted.
Go to the DNS & Nameservers section (it would be something similar with other domain name provider) of your domain name provider (in my case it was domain.com) and make the following entries.
You will have to make this kind of entry four times where everything remains the same except IP Addresses (185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153)
THAT IS IT! 😃
This would how the things would look on the github pages.
It’s pretty straightforward, in case you get stuck somewhere and need assistance or have any suggestions, please drop me a note as a comment to this post. 🍻
You may also refer the below link for configuring custom domain for GitHub.
