DEV Community

Cover image for Step-by-Step Guide to Deploy React Website to GitHub Pages Using GitHub Actions
TD!
TD!

Posted on

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

#100daysofmiva #github #githubactions

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

2. Set Up GitHub Repository

Initialize a Git repository in your React project:

 git init git add . git commit -m "Initial commit"
Enter fullscreen mode Exit fullscreen mode

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

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

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

Add the predeploy and deploy scripts:

 "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" }
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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

Vercel:

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

 npm install vercel -g vercel --prod
Enter fullscreen mode Exit fullscreen mode

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

Top comments (8)

Collapse
 
cwrite profile image
Christopher Wright •

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

Collapse
 
eshimischi profile image
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

Collapse
 
tobidelly profile image
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

Thread Thread
 
eshimischi profile image
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

Thread Thread
 
tobidelly profile image
TD! •

You're right...

Thread Thread
 
eshimischi profile image
eshimischi •

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

Thread Thread
 
tobidelly profile image
TD! •

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

Collapse
 
tobidelly profile image
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.