Membuat Github-Pages dengan reactjs

Ary Setya P. Apr 23, 2022 ・1 min read

Pertama, kita persiapkan repo dahulu yang mengandung github.io
example: https://coozyme.github.io

Kedua, kita buat repo untuk menaruh project yang kita buat nanti
example: me -> https://github.com/coozyme/me.git

Ketiga, Kita buat forlder untuk ci/cd pada repo kedua yang kita buat
example: .github/workflows/gh-pages.yml

lalu kita isi file gh-pages.yml

name: GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout-Code
        uses: actions/checkout@v2

      - name: Install-Node.js
        uses: actions/setup-node@v2
        with:
          node-version: v13.x

      - name: Install NPM packages
        run: npm ci

      - name: Build Project
        run: npm run build

      - name: Run tests
        run: npm run test

      - name: Upload production-ready build files
        uses: actions/upload-artifact@v2
        with:
          name: production-files
          path: ./build

  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
      - name: Download artifact
        uses: actions/download-artifact@v2
        with:
          name: production-files
          path: ./build

      - name: Deploy to gh-pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{secrets.TOKEN_GITHUB}}
          publish_dir: ./build

Keempat, setting secret token