DEV Community

Taylor Overturf
Taylor Overturf

Posted on • Updated on


So, you bought a domain name? 16 Steps to Deploy your React App to GitHub Pages with a Go Daddy Domain Name

✨ This post is intended to help fellow coding newbies walk through deploying a React app to GitHub Pages with a custom domain name purchased through GoDaddy. 🧐 Pretty specific, I know, but I had trouble my first time and I hope to help others succeed at this task in 16 clear steps. Let's go!

Step 1. Sign into your GoDaddy account and click on My Products.

First of all, make sure you have successfully purchased a domain through GoDaddy. 💸 Then, sign into your account if you're not already. In the upper right hand corner of the screen, you will see "My Products" in the dropdown menu. ⬇️
Image description

Step 2. Find your domain in the Domains section.

Do not get distracted by the shiny, green basketballs 🟢 🏀 in the "Start using your new products" section. Instead, find your domain in the "Domains" section. Click on the dropdown menu. ⬇️
Image description

Step 3. Choose Manage DNS.

From the dropdown menu, choose "Manage DNS." ⬇️
Image description

Step 4. Ignore the NS and SOA records settings.

You cannot edit these, so ignore them. ⬇️
Image description

Step 5. Edit the A name record you see.

You will now edit the first A record to have the name, value, and TTL as you see below. The value: is specific to GitHub Pages. (You can learn more about this by visiting GitHub Documentation). At first, your A record will display as value: "parked" and name: "@", but you will edit ✏️ those two categories. ⬇️
Image description

Step 6. Add three more A records.

You will now add three more A records, one by one, by pressing the blue ADD button in the bottom right corner. ⬇️
Image description

You will see the following editor panel: ⬇️
Image description

The next three A records will be the same as you see below. They will have the values of,, and (Remember, your first A record had the value of ⬇️
Image description

Don't worry if your A records are not in the same order as mine, the next time you sign into your DNS Settings it will be alphabetized, and the order is not important to the process!

Step 7. Edit the CNAME record with the name, "www".

You will now edit the first CNAME record that is named "www," change the value to ⬇️
Image description

🎉 Congratulations, at this point, your GoDaddy DNS settings are correctly configured!

Step 8. Update your GitHub repository.

Make sure your GitHub repository is up to date with your latest commit.

🌲 nothing to commit, working tree clean

The next seven steps are available in the official React Documentation, but I have also outlined them here so you do not need to open another link if you don't want to. Carry on! 🙌 You're almost there!

Step 9. Add a homepage to your package.json.

Open your project files in your favorite code editor. Find your package.json and add "homepage:" "",. The beginning of your package.json should look something like this:

  "version": "0.1.0",
  "private": true,
  "homepage": "“",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "gh-pages": "^3.2.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2"
Enter fullscreen mode Exit fullscreen mode

Step 10. Go to your terminal and install gh-pages.

🏃🏽‍♀️ Run:
npm install --save gh-pages

Step 11. Make two more additions to the package.json.

In your scripts, you will want to add: "predeploy": "npm run build", and "deploy": "gh-pages -d build",. The scripts in your package.json should look something like this:

  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
Enter fullscreen mode Exit fullscreen mode

Step 12. Go to your terminal and deploy!

🏃🏽‍♀️ Run:
npm run deploy

Step 13. Go to your GitHub repository settings.

In your GitHub repository, you will see Settings at the far right. ➡️
Image description

Then, navigate down to the Pages section. ⬇️
Image description

You will need to make some final changes on this page.

Step 14. Add your custom domain name to your repository settings.

First, confirm that the Source is set to the gh-pages branch at the /(root). Then, you can add your custom domain in the form of ⬇️
Image description

After you click save, you will see a message that says: TLS certificate is being provisioned. This may take up to 15 minutes to complete.

And, they’re not joking around about that 15 minute time frame. You should go make a coffee. ☕️ Do NOT be tempted to press the blue link ("Your site is ready to be published at...") before it becomes green, because you will be very disappointed. 😔

What you can do is to refresh this settings page if you’re feeling impatient.

Step 15. Moment of Truth

Once you see green, it's time to check your link! I recommend going to your site in incognito mode 🕵🏽‍♀️ because it will make seeing updates (when you npm run deploy again) easier later.

You should see: ⬇️
Image description

Step 16. Add a CNAME file to your project.

Finally, go to your code editor and add a new file in the public folder. The name of the file will be: CNAME (all caps, dot nothing) and it will contain one line of code, simply stating No quotes, nothing. That's it. 🤷‍♀️

You can now git add, git commit, and git push this change to your remote repository. You can also npm run deploy if you made any other changes to your files. It may take some time for your deployed site to update. If you're not seeing a specific change, again, try opening the webpage in incognito mode.

And, if you're reading this, 👀 hopefully you have a successfully deployed site. Hurray! 🏆

🔥 Troubleshooting Notes

☝️ Please note that domain names that do not end in .com, may have some additional steps or DNS settings.

✌️ If you see an error in any of my directions, or if you believe one of my steps could be clearer, please let me know! I'm on a learning journey and I welcome all constructive feedback. ❤️

🤞 Lastly, if you had previously deployed your site to GitHub pages and you are retroactively trying to change it over to a domain name, you may run into some fun bugs... 🙄 Don't worry! I've run into them all. Most notably, a blank white page and the terminal error of 💀 fatal: A branch named 'gh-pages' already exists.. One solution I have found (see this StackOverflow), if you're running into that specific error, is to run rm -rf node_modules/gh-pages/.cache and then go into your code editor, find the node_modules folder, look for the gh-pages folder, and if it's there, physically delete it and npm run deploy.

Like, share, follow, and spread the deployment love! 👏

Top comments (1)

adelaney923 profile image

Taylor, this was so helpful! I just successfully deployed my site in less than 15 minutes. Please keep these awesome articles coming!

Here is a post you might want to check out:

Regex for lazy developers

regex for lazy devs

Sorry for the callout 😆