TinyHow2: GitHub Page hosting for React (with custom domain)

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 and Value: 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