This blog is part of a series where I document rebuilding a website that relies on HTML, CSS and Bootstrap in React.js using the Next.js framework to improve performance, reduce costs and increase my workflow for future changes.
The finished website (hosted on GitHub Pages): https://wallisconsultancy.co.uk
The source code: https://github.com/james-wallis/wallisconsultancy
Using a custom domain with GitHub Pages
Configuring a custom domain for your GitHub Pages site - GitHub Docs
In my previous blog I demonstrated how to run a static website on GitHub Pages. But it was using a default domain name specific to GitHub as wasn't very professional. We can fix this by making it accessible using our own domain name of choosing (wallisconsultancy.co.uk in my case).
Let's modify GitHub Pages to use a custom domain. This will be done in three steps:
- Add custom domain to GitHub Pages
- Update DNS settings
First we need to modify the
.travis.yml file we created in the previous to add a
fqdn field tells Travis to create a
CNAME file with our domain in each time we push to the
gh-pages branch. If we don't keep creating this, it will be deleted on the next push.
language: node_js node_js: - 12 cache: directories: - node_modules script: - npm run eslint - npm run build - npm run export - touch out/.nojekyll deploy: provider: pages skip_cleanup: true github_token: $github_token local_dir: out fqdn: wallisconsultancy.co.uk # This instructs Travis to create a CNAME file with wallisconsultancy.co.uk as the contents on every deployment to the gh-pages branch on: branch: master
Enter fullscreen mode Exit fullscreen mode
Add custom domain to GitHub Pages
Next we need to tell GitHub that we are going to use a custom domain.
To do this:
- Go to the settings of your GitHub repository for the project
- Scroll to the GitHub Pages section
- Enter your domain in the Custom Domain section
GitHub Pages settings with a custom domain
.github.io/repository domain will now redirect to your custom domain.
However, the website will not yet be reachable as we need to update the DNS settings for the domain name.
Update DNS settings to point to GitHub Pages
Now GitHub Pages is expecting to be reached via a custom domain and will redirect the old
user.github.io/ to it. We now need to set the domain up so that it points to the GitHub server where the website is being hosted.
To update the DNS settings you need to go to your DNS provider and do the following:
Note: I am using Digital Ocean so all the examples are using their UI
www.yoursite.com that points to your
.github.io address without the subpath.
My CNAME record settings on Digital Ocean
Optional, using an apex domain rather than
If you want your domain to be
yoursite.com rather than
www.yoursite.com you need to do a further step.
A record to point to the following IP addresses (check the GitHub docs to verify they haven't changed since the writing of this post.
My A record settings on Digital Ocean
You've successfully setup your website to run on GitHub pages using a custom domain name. It might take a few minutes for the DNS changes to update but soon your website will be production ready!
Note: If you modified your code for the GitHub subPath issue above, you can now tear this code out.
This blog demonstrated how to setup a Next.js website onto GitHub Pages with a custom domain name.
The Wallis Consultancy website is now published into production. This marks the end of the series of blog posts in which I rebuilt the old Wallis Consultancy website that ran using Bootstrap in React.js using Next.js and finally hosted it on GitHub Pages.
Top comments (1)
Hi, I am new here. If I dont have custom domain, should I bought it somewhere? I had visited freenom.com but somehow I could not access free domain.
Can you suggest me a solution?