Vite deploy website on Github

PHOTO EMBED

Wed May 03 2023 18:07:15 GMT+0000 (Coordinated Universal Time)

Saved by @Kristi

// Create new Vite project using React template
npm create vite@latest name -- --template react

// Install dependencies and start development server
cd name
npm install
npm run dev

// Add the following line in vite.config.js, will be the name of the repository:
 base: '/scoot-react-multi-website/'

//If the project is working fine, let's init a new git repository.
git init
git add .
git commit -m "init vite project"

//Create a new GitHub repository, once the repo is created, copy and paste the instructions similar to these to your terminal
git remote add origin git@github.com:sitek94/vite-deploy-demo.git
git branch -M main
git push -u origin main

//Create a new file: .github/workflows/deploy.yml and paste the following code:
name: Deploy

on:
  push:
    branches:
      - main

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

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

      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 16

      - name: Install dependencies
        uses: bahmutov/npm-install@v1

      - name: Build project
        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/main'

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

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


//This workflow will run on every push to the main branch. It will first build the project, and then deploy it to GitHub pages.

//Commit deployment workflow and push the changes to GitHub.
git add .
git commit -m "add deploy workflow"
git push

//When you go, to Actions and click on the recent workflow, you should see that it failed, because of missing permissions:

//To fix that, go to Actions Settings, select Read and write permissions and hit Save.
//Go back to Actions, click on failed workflow and in the top-right corner click on Re-run failed jobs

//To host the app, go to Pages Settings, set Source to gh-pages, and hit Save.
content_copyCOPY

https://github.com/sitek94/vite-deploy-demo/tree/main#readme