photo by @sincerelymedia
As a recent software engineering graduate, I decided to create a portfolio website as a way to showcase what I can do as well as to improve my coding skills. In previous posts, I've discussed why GitHub Pages and React are good tools for a portfolio site and how to get started with your app. In this post I'll be looking at how I set up my custom domain and added it to my GitHub Pages and React website. While a custom domain name is completely optional, it can be a great way to personalise your portfolio.
Click here to see the website I've created using GitHub Pages and React.
When you create your GitHub Pages website, it will automatically be published at your equivalent of username.github.io (in this case, mine would be iona-b.github.io). While it's absolutely fine to use this URL, there are a couple of reasons why you might want to consider using a custom domain.
When you originally created your GitHub account, you may have chosen a username that's not completely recognisable as you. While you can change your username, there might be unintended side effects, so it's something you may want to avoid. You can mitigate this issue by choosing a custom domain name that makes your site immediately identifiable to visitors and minimises any potential confusion.
Using the github.io version doesn't look bad by any means, but having your own custom domain shows that you're taking your portfolio website seriously and that you have the skills to properly configure it.
Most domain registrars offer your first domain registration at a relatively low price and some will even give you a certain period for free. You should look carefully at the terms before signing up to avoid any hidden costs, but getting your personalised domain name is a no-brainer if you can find a good deal.
To use a custom domain with your GitHub Pages and React website, follow these steps:
Generally, when it comes to choosing a domain name for a portfolio website, the firstnamelastname.com format is preferred, as it makes your site easy to find. If someone else has already registered your preferred domain name, try to come up with a close alternative (perhaps you can add a dash between your first and last name, or include a middle name?) and make sure that you're consistent across all of your online branding. If you've already established a personal brand using something other than the firstname + lastname format, go with that.
There are many companies with which you can register a domain name and they'll often offer additional services, such as a sizeable storage limit or a backup system. Some factors you may want to consider include pricing, expiration policies, whether you can transfer a domain name to another registrar, add ons and hidden fees, and other users' reviews. You can find an overview of some of the most highly-rated registrars here, so make sure you look around and consider all of your options before deciding.
The Domain Name System (DNS) is a naming system for computers and other resources connected to the internet and is responsible for translating domain names to IP addresses, which in turn allows your browser to load the resources at that IP address.
Once you've registered your domain, it's likely that you'll need to set it up correctly to be able to use it. As I used GoDaddy for my domain name, I'll be explaining specifically how to configure your DNS settings using this service. If you've chosen a different domain registrar, you may need to search for instructions specific to that service, however the rest of this guide should still be relevant.
Go to the DNS Management Page for your chosen domain and make the following changes:
- In the Type A row, update the value to 220.127.116.11. This allows your domain name to point to the GitHub server.
- Add another Type A row and use the IP address value of 18.104.22.168.
- Add another Type A row and use the IP address value of 22.214.171.124.
- Add another Type A row and use the IP address value of 126.96.36.199.
- Add your GitHub Pages URL as the value for the Type CNAME row. For me, this would be iona-b.github.io.
Once you've made those changes, your finalised DNS Management page should look something like this:
Updated DNS Management Page
Once you've correctly configured your DNS settings, go to the package.json file for your app. When you initially set this up, you probably added your version of
to the first section of the file. You can now update this with your new domain name. It should end up looking something like this:
Add Domain Name to package.json
Make sure you push your changes and run
npm run deploy
before moving onto the next step.
Finally, you just need to add your domain name to your repository. Go to the GitHub Pages section of your repo and add your new domain name to the Custom Domain Section and save. The updated page should look like this:
Add Domain Name to GitHub Repository
And that's it! You should now be able to access your website at your custom URL.
In the next post, I'll be looking more at the React app itself and how we can use it to create an effective portfolio website. See you then!
- "Configuring a custom domain for your GitHub Pages site", GitHub Docs, Accessed October 23, 2020
- "Changing your GitHub username ", GitHub Docs, Accessed October 23, 2020
- "GoDaddy Domain with GitHub Pages", Jinna Balu on Medium, Accessed October 23, 2020
- "10 Best Domain Registrars", HostingFacts, Accessed October 23, 2020
- "What is DNS?", Cloudflare, Accessed October 23, 2020