Skip to content

Latest commit

 

History

History
156 lines (114 loc) · 2.68 KB

README.md

File metadata and controls

156 lines (114 loc) · 2.68 KB
Raw

How to Deploy Create React App to GitHub Pages?

YouTube Tutorial

Create React App & GitHub Repo

  • Create react-pages-demo empty GitHub repository

  • Create react app using create-react-app tool

npx create-react-app react-pages-demo
  • Test react app locally
cd react-pages-demo
npm start

Deploy React App to GitHub Pages

  • Add homepage attribute to the package.json file
{
    ...
    "homepage": "https://antonputra.github.io/react-pages-demo",
    ...
}
  • Install gh-pages npm module to publishing files to a gh-pages branch on GitHub
npm install gh-pages
  • Add couple of tasks to package.json file
{
    ...
    "scripts":
    {
        ...
        "predeploy": "npm run build",
        "deploy": "gh-pages -d build"
    }
}
  • Connect local repository to the remote
git remote add origin git@github.com:antonputra/react-pages-demo.git
git branch -M main
git push -u origin main
  • Deploy react app to GitHub pahes
npm run deploy

Setup Custom Domain for GitHub Pages

  • Set your custom DNS name from the GitHub settings Pages (devopsbyexample.io)

  • Go to your DNS provider (in my case Google Domains)

  • Create A record for your Apex domain (devopsbyexample.io)

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

  • Create CNAME record for www subdomain

    • www -> antonputra.github.io

  • Add CNAME file under public directory

devopsbyexample.io
  • Update homepage attribute
{
    ...
    "homepage": "https://devopsbyexample.io",
    ...
}
  • Commit the changes and deploy to github pages
git add .
git commit -m 'Add custom domain'
git push origin main
npm run deploy

Automate Deployment with GitHub Actions

  • Create .github/workflows/github-pages.yml GitHub actions workflow
---
name: Build and Deploy React App to GitHub Pages
on:
  push:
    branches: [ main ]
jobs:
  build-and-deploy:
    name: Build and Deploy
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v2

    - name: Build
      run: npm install

    - name: Test
      run: npm run test

    - name: Deploy
      run: |
        git config --global user.name 'Anton Putra'
        git config --global user.email 'me@antonputra.com'
        git remote set-url origin https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}    
        npm run deploy

  • Update src/App.js with random text

  • Commit and push

git add .
git commit -m 'Add GitHub Actions'
git push origin main

Links