(技術)透過Github-Action實現CICD-Pipeline

How to use

git clone

1	https://github.com/chienniman/mantine-vite-template.git

download the ZIP
fork the project

Create a new repository

Selected Public to host free gh-page app

Create CI/CD workflow

.github /workflows/main.yml

name: Deploy to gh-page
permissions:
  contents: write
on:
  push:
    branches: master

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v2

      - name: CI
        run: npm ci

      - name: Typecheck
        run: npm run typecheck

      - name: Prettier
        run: npm run prettier
      
      - name: Lint
        run: npm run lint

      - name: Jest
        run: npm run jest

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

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

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

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

Local development and usage

install yarn

1	yarn --version

1	npm install --global yarn

install node_modules

1	yarn install

add homepage to package.json

1	"homepage": "https://<githubusername>.github.io/<app>"

Start the vite server and develop new features.

1	npm run dev

test

1	npm run test

Commit to master branch

1
2
3

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

Enable GitHub Pages

The source must be set to gh-pages instead of master/main, otherwise it will not be displayed.

Done

Discussion

Assets links

To fix the issue of resource loading 404 errors and modify the default path, you can achieve it through the configuration in vite.config.ts.

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: '/mantine-vite-template/',
  build: {
    assetsDir: 'assets',
  },
});

Pages build and deployment

I think there’s a lot of scope for confusion for users of this action, when pages build and deployment will also be running on every push and pushing pages assets.

I think it’s impossible to really say right now what that looks like until GitHub announces what these actions intend to do in the long run. As the post suggests this is a necessary step that occurs after the push gets made, this was already occurring behind the scenes it just wasn’t made visible.