DEV Community

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

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
Enter fullscreen mode Exit fullscreen mode

2)
2a) Open package.json, add homepage above your project name:

  "homepage": "https://www.your-custom-domain-name.whatever",
  "name": "your-react-project-name",
Enter fullscreen mode Exit fullscreen mode

2b) Add a CNAME file in the public folder with a single entry of www.your-custom-domain-name.whatever

CNAME file

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",
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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:

Successfully hosting React App on custom domain using GitHub Page

BannerPic by Martin Katler

Top comments (0)