So, you bought a domain name? 16 Steps to Deploy your React App to GitHub Pages with a Go Daddy Domain Name
Tags: codenewbie, beginners, 100daysofcode, todayilearned
Published: 2021-12-29 02:33:50

✨ 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pf4xi9o7phw6w1a0s71s.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvu688pus74ps89rb5fb.png)

## Step 3. Choose _Manage DNS_.

From the dropdown menu, choose "Manage DNS." ⬇️
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvzw6h3r5drxfhgilqpo.png)
  
## Step 4. Ignore the NS and SOA records settings. 

You cannot edit these, so ignore them. ⬇️
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53c0h3yvqe0r6q8qac6l.png)
 
## 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: **185.199.108.153** is specific to GitHub Pages. (You can learn more about this by visiting [GitHub Documentation](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site)). At first, your **A** record will display as value: "parked" and name: "@", but you will edit ✏️ those two categories. ⬇️
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7qbf5x2gpx3ot1rxl5a.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21k9a6q6xalinzvkp6vg.png)
 
You will see the following editor panel: ⬇️
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abj25hnpiv2j8kfonyrd.png)

The next three A records will be the same as you see below. They will have the values of **185.199.109.153**, **185.199.110.153**, and **185.199.111.153**. (Remember, your first **A** record had the value of **185.199.108.153**). ⬇️
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ids5mo4dsomfxqx36kly.png) 

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 **_your-git-hub-username_.github.io** ⬇️
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkb8w2ez4nchkrm0qm00.png)
 
🎉 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](https://create-react-app.dev/docs/deployment/), 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:" "http://www.YOUR-DOMAIN-NAME-GOES-HERE.com/",`. The beginning of your `package.json` should look something like this:
```json
{
  "name": "YOUR-PROJECT-NAME-APPEARS HERE",
  "version": "0.1.0",
  "private": true,
  "homepage": "“http://www.YOUR-DOMAIN-NAME-APPEARS-HERE.com/",
  "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"
  },
```

## 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: 
```json
  "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"
  },
```

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mf5dwycji4xodb83f847.png)

Then, navigate down to the **Pages** section. ⬇️
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xi2lwmcku765d7ml2poa.png)

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 `www.YOUR-DOMAIN-NAME.com`. ⬇️
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3nkxg2n56gr2zlhd4fow.png)
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvvw6grkqwu571xnv1yq.png) 

## 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 `www.YOUR-DOMAIN-NAME.com`. 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](https://stackoverflow.com/questions/63964575/fatal-a-branch-named-gh-pages-already-exists)), 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! 👏