Vite deploy website on Github
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
Comments