CODEWITHSUNDEEP
reactjsgatsbygithub-pagesgithub-actions
J.erome
J.erome

Reputation: 788

How can I easily deploy React and Gastby to github-pages using Github's worflow?

I'm trying to create a workflow so whenever I push code to my main branch, it automatically do npm run deploy so my github pages website is always up to date with the main branch.

My app is a react and gatsby app but I can't find a way to make a workflow to do that. I tried many workflow and I always end up with some errors.

name: GitHub Pages

on:
  push:
    branches:
      - main
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - run: npm ci
      - run: npm run format
      - run: npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        if: ${{ github.ref == 'refs/heads/main' }}
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

now my problem is that when I do npm run deploy the website on github pages is allright, but when I try to use my workflow most of the images aren't working.

Here is my files structure: https://github.com/JeromevDEV/my-portfolio

Upvotes: 0

Views: 32

Answers (1)

J.erome
J.erome

Reputation: 788

The solution is to use Gatsby Publish : https://github.com/marketplace/actions/gatsby-publish

Upvotes: 1

Related Questions