✨ 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. ⬇️
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. ⬇️
Step 3. Choose Manage DNS.
From the dropdown menu, choose "Manage DNS." ⬇️
Step 4. Ignore the NS and SOA records settings.
You cannot edit these, so ignore them. ⬇️
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). At first, your A record will display as value: "parked" and name: "@", but you will edit ✏️ those two categories. ⬇️
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. ⬇️
You will see the following editor panel: ⬇️
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). ⬇️
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 ⬇️
🎉 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:" "http://www.YOUR-DOMAIN-NAME-GOES-HERE.com/",. The beginning of your package.json should look something like this:
{
"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:
"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. ➡️
Then, navigate down to the Pages section. ⬇️
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. ⬇️
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: ⬇️
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), 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)
Taylor, this was so helpful! I just successfully deployed my site in less than 15 minutes. Please keep these awesome articles coming!