- git clone
https://github.com/chienniman/mantine-vite-template.git
- download the ZIP
- fork the project
.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 yarn --versionnpm install --global yarnyarn install
"homepage": "https://<githubusername>.github.io/<app>"
npm run dev
npm run test
git init
git add .
git commit -m "xxx"
The source must be set to gh-pages instead of master/main, otherwise it will not be displayed.
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',
},
});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.