Configuring Subdomains with Github pages
If you want to use custom subdomains to use with github pages this blog will help you with the steps.
For this guide I am using cloudflare dns
Cloudflare dns settings
Here is what my dns setup looks like at cloudflare dashboard
The content for the A records should be pointing to the IP address of the github pages.
Here is the IP addresses of github pages as mentioned in docs
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
The Name field should be your domain name. In my case it was gyawaliprashant.com.np
Github Pages settings
Go to the project for which you have created github pages, if you have not created make sure to create the
page.
Then go to repo settings.
This is what the settings should look like for your domains.
For my case, for the root domain gyawaliprashant.com.np
For subdomain blog.gyawaliprashant.com.np
Things to Consider
Relative paths
Try to use relative paths instead of absolute paths. Relative paths start with ./ while absolute
paths start with /.
Improperly used absolute paths may cause 404 error for the assets (it caused me lot of headaches)
Homepage
For react apps and others, make sure to set the homepage in package.json. Else it will generate javascript
and styles and include then in the html
using absolute paths.
Example package.json from my portfolio:
{
"name": "portfolio",
"version": "0.1.0",
"homepage": "./",
"dependencies": {
...}
}
DNS and Build delays
It may take some time for the DNS settings to propagate for your first setup. But make sure
to visit from time to time to see if the site is live on your custom domain.
For me it didnot take more than few minutes, since I already had A records and CNAME for root domain and www
subdomain.
Also, since the your project gets rebuilt (for those with build step) when adding the custom domain on
github, you need to wait for it to get built first.
Be patient, its good if you can get it right first try but dont be afraid to google whenever you get stuck
cause thats where the learning happens.
Happy Coding 🫡