The requirements:
This short instruction is written under the following assumptions:
You have already familiarized yourself with GitHub workflow, Node.js, and Npm.
Your app is neatly stored on a GitHub repository that you own.
You can work the console/ terminal window.
You're in TLDR mode and you don't have time for lengthy technical instruction.
If that's not you, please refer to this detailed instruction.
The setting:
a) You have just made your last commit to the dev-branch of your first React (JS) app on GitHub.
b) You are itching to deploy it using GitHub Page.
c) You have already grabbed a custom domain with a neat name. It's being hosted by GoDaddy, Bluehost, Namecheap or a similar (domain) hosting service.
The approach:
1) Open the console/ terminal window, make sure that you're inside the folder which contains your React project and run:
npm install gh-pages
Notes: Open package.json
and make sure that you have the following dependency installed for everything mentioned herein to work properly:
"devDependencies": {
"gh-pages": "^3.2.3"
}
2)
2a) Open package.json
, add homepage
above your project name:
"homepage": "https://www.your-custom-domain-name.whatever",
"name": "your-react-project-name",
2b) Add a CNAME file in the public folder with a single entry of www.your-custom-domain-name.whatever
3) Scroll down to the script
section of package.json
and make sure to add the following:
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
4) Configure your custom domain from the side of your hosting service:
Simply locate
Advanced DNS
tab/option on your domain hosting dashboard.Create the following A records:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
- Create a CNAME record with:
Host: www
andValue: your-github-username.github.io
. Then save everything.
Notes: These changes can take a while to be applied.
5) Open the console/ terminal window again and run:
npm run deploy
6) Get on github.com and navigate to the repository to be deployed from, locate the Settings
tab and click on Pages
.
7) Select Branch: gh-pages
as the source.
8) Make sure that your custom domain pass the DNS check and don't forget to check Enforce HTTPS
afterward. If everything goes well, you should see:
BannerPic by Martin Katler
Top comments (0)