Deploying Your React App with GitHub Pages and Adding a GoDaddy Custom Domain Name
A simple guide for deploying your projects
After lovingly crafting my portfolio site, I was beyond excited to share my work with the world. The only thing standing in my way was deploying the site and adding a very professional, custom domain purchased from GoDaddy. Deploying wasn’t so much an issue as I had deployed projects in the past, however, configuring my custom domain name was a new challenge. The internet is rife with tutorials outlining how to deploy with hosting services like Heroku, Netlify, and GitHub Pages. And there are equally as many resources providing instructions on adding custom domain names with numerous domain providers. As a result, I wanted to create an all-in-one guide for those deploying with the specific combination of GitHub Pages and GoDaddy.
Deploying With GitHub Pages
Before diving into the deploying process, we must first briefly investigate what is going on under the hood when deploying. As our application currently stands, it cannot be read by GitHub Pages. When we deploy, it is converted to a readable format which lives in a branch commonly called gh-pages. This branch will look very different from your original file tree, but not to worry, we will largely be leaving this branch alone.
Installation
For the purpose of this blog, it is assumed a completed React app is already present and pushed to a GitHub repository. To begin, we will install the package for GitHub Pages which is essentially responsible for converting our project to the readable branch mentioned above. While in the root directory of the project, run the following terminal command:
npm install gh-pages --save-devRe-Organizing Our Branches
We’re going to slightly reorganize our branches to ensure the branches we develop on and deploy on are clearly identified and kept separate. When deploying ‘project sites’ from GitHub Pages, this step is not necessary, however, I found it helpful. Each user is provided with one ‘user site’, this is “username.github.io”, and an unlimited number of project sites under “username.github.io/repository-name”. The same goes for organizations using GitHub Pages. User and organization sites must be deployed from the master branch, however, project sites can be deployed from either master or gh-pages.
By default, GitHub Pages pushes to and deploys from gh-pages, leaving our file tree untouched. We are going to structure our repository so that the master branch we develop on becomes the dev branch and the gh-pages branch that we deploy from becomes the master branch. To do this, enter the following terminal commands from your project directory:
git status
git add .
git commit -m "creating dev branch to keep development branch and deploying branch separate"
git checkout -b "dev"
git pushSwitching over to our project’s GitHub repository, we now have a master and dev branch. We are going to switch our default branch to the dev branch. This way as we continue to work on our site and push changes, they automatically are pushed to the dev branch and NOT the master branch we deploy from. To do this, navigate to the settings tab in the project repository and click on ‘Branches’ in the left-hand menu. Under the ‘Default Branch’ section, click the drop-down and select dev. Click ‘update’ to finish.
Editing “package.json”
We now need to include a couple of additions to the package.json file in our project. Open your application in your text editor and add the following to the highest level of the object, right above "name": "project-name" :
"homepage": "https://username.github.io/repository-name",Replace username with your GitHub username and repository-name with the name of the repository in which your project lives. Next, in the "scripts" object we will add:
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build",
In other tutorials, you may see "deploy": "gh-pages -d build". The -b master included in our code specifies that we are deploying from the master branch and not the default gh-pages branch.
Deploying
We are now ready to deploy! To deploy, simply run the following terminal command:
npm run deployIt is important to note that you should not carry out a pull request on GitHub at this time! This will merge the dev and master branches, creating a horrible mess.
To finish deploying, return to your project GitHub and navigate to the “Settings” tab. Scroll down to the “GitHub Pages” section. There, in the “Source” section, there will be a drop-down menu for you to specify the branch to deploy and you will select master. Shortly, the header at the top of the section will turn green and display a message that your site has been published. Click this link and feast your eyes on your freshly deployed site!
Anytime you want to update your deployed site, just push the changes to GitHub, merge with your dev branch, and then run npm run deploy. Refresh your website page and your changes should be implemented!
Adding a Custom Domain from GoDaddy
Currently, our site is up and running but has a horribly clunky URL. If you’re anything like me, you purchased a custom domain name (maybe your exact name was even available!) and you’re eager to use it. Adding custom domain involves a couple of steps on both the GitHub side and GoDaddy side. Let’s begin with GoDaddy.
Managing the DNS
In the “My Products” homepage of your GoDaddy account, scroll down to “All Products and Services” where you will see “Domains”.
Click the “Manage” option on the right of your chosen domain. Scroll down to “Additional Settings” and click “Manage DNS”.
Here you will see a list of records. In the type “A” row, we need to update the IP address to point to the GitHub server. Edit the record and include 185.199.108.153 as the value. Additionally, we will create 3 more records of “A” type with a name of “@” and values of 185.199.109.153, 185.199.110.153, 185.199.111.153. We also need to edit the CNAME record so that name is “www” and the value is “username.github.io”.
That’s it for GoDaddy — let’s move on.
Adding a CNAME File and Custom Domain to GitHub
In your GitHub project repository, navigate to the root directory of your master branch (the branch we deploy from). Click the “Add file” button to the right and then “Create new file”. Title this new file “CNAME” and include your custom domain name in the contents of the file.
At the bottom of the page, click “Commit new file”.
Next, navigate to the “Settings” tab of the repository and scroll down to the “GitHub Pages” section. In the “Custom domain” field, enter your custom domain and click “Save”. You should also check the “Enforce HTTPS” box. This option may not be immediately available, as the site certificate must be issued first, but be sure to enable this option when possible.
Shortly, your site should be published at your custom domain!
For troubleshooting purposes, you can check that your DNS is correctly set up with the following terminal command:
dig example.comWhere “example.com” is your custom domain name.
In my own experience, I had a bug in which my site was completely blank after implementing my custom domain. After some searching, I found the solution in this Stack Overflow thread to be a fix. If you experience similar, give that solution a try. If you experience any other problems, refer to the GitHub documentation around troubleshooting custom domains.
