Step-by-Step Guide to Deploy React Website to GitHub Pages Using GitHub Actions

Day #19 of the #100daysofMiva coding challenge has been hectic troubleshooting GitHub pages via GitHub actions and deploying both static website and through framework. I decided to write a step by step guide to deploying a React website to GitHub pages using GitHub actions.

1. Create a React App (If not already created)

If you don't have a React app yet, create one using the following command:

npx create-react-app my-app
cd my-app

2. Set Up GitHub Repository

Initialize a Git repository in your React project:

git init
git add .
git commit -m "Initial commit"

Push it to GitHub:

git remote add origin https://github.com/your-username/your-repo.git
git branch -M main
git push -u origin main

3. Install gh-pages for GitHub Pages

You need to install gh-pages as a dependency to deploy the site to GitHub Pages.

npm install gh-pages --save-dev

4. Update package.json for GitHub Pages

Add the following lines to your package.json file:

Set the homepage URL, which tells GitHub Pages where to find your React app:

"homepage": "https://your-username.github.io/your-repo"

Add the predeploy and deploy scripts:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

5. Create a GitHub Action Workflow

To automate the deployment using GitHub Actions, you'll create a new workflow.

In the root of your repository, create the following folder structure:

.github/workflows/deploy.yml

Inside the deploy.yml file, add the following configuration for the GitHub Action:

name: Deploy React App to GitHub Pages

on:
  push:
    branches:
      - main  # Deploy only when pushing to the main branch

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      # Step 1: Checkout the repository
      - name: Checkout Repository
        uses: actions/checkout@v3

      # Step 2: Set up Node.js
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'  # Specify the Node.js version

      # Step 3: Install dependencies
      - name: Install Dependencies
        run: npm install

      # Step 4: Build the React app
      - name: Build React App
        run: npm run build

      # Step 5: Deploy to GitHub Pages
      - name: Deploy to GitHub Pages
        run: npm run deploy
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

6. Push Your Code to GitHub

Push your code to GitHub, and the GitHub Action will automatically deploy your app to GitHub Pages:

git add .
git commit -m "Set up GitHub Actions for deployment"
git push origin main

7. Enable GitHub Pages

Go to your repository on GitHub.
Navigate to Settings > Pages.
Under Source, select the gh-pages branch. After a few minutes, your site will be live at https://your-username.github.io/your-repo.

Optional: Deploying to Other Platforms (Netlify, Vercel)
Netlify:

You can use the netlify-cli to deploy to Netlify:

npm install netlify-cli -g
netlify deploy --prod

Or create a GitHub Action using the Netlify Deploy Action:

name: Deploy to Netlify
on: [push]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v1
        with:
          publish-dir: './build'
          production-deploy: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

Vercel:

For Vercel, after setting up your Vercel project, you can use Vercel CLI:

npm install vercel -g
vercel --prod

Alternatively, use the Vercel GitHub Action for seamless integration:

name: Deploy to Vercel
on: [push]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Deploy to Vercel
        run: vercel --prod
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}

Comments

[Christopher Wright]

How does this method compare with using Netlify or Vercel for continuous deployment? Would love to hear your thoughts!

[eshimischi]

Github Pages is just a very light version. Usually developers use it for Storybook project, nothing more. If you need to deploy properly - Next.js, Complex React Client/Server app - use Vercel

[TD!]

Hmmm....I've seen some heavy projects on GitHub pages though, but I'd say they're not much. Maybe with time things will change with GitHub pages, but I agree with you Vercel is better used for complex apps

[eshimischi]

"GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website."
docs.github.com/en/pages/getting-s...

You cannot deploy server apps (Nest.js, Prism, Express, etc), only static pages - documentation web-site, Storybook, nothing beyond that

[TD!]

You're right...

[eshimischi]

I had no intentions to criticise your article, just to call things their names. Thanks!

[TD!]

Discussing technology and innovation is what I'm passionate about, I love the interaction.

[TD!]

I personally think Github pages is easier. While my repos are stored on GitHub I only need click settings and go to Pages, and deploy.