Creating vite vue ts template: Deploy to Github Pages

Setup project for Github Pages integration

1. Configure vite by setting correct base option. Update vite.config.js

   If you are deploying to https://<USERNAME>.github.io/<REPO>/, for example your repository is at https://github.com/<USERNAME>/<REPO>, then set base to '/<REPO>/'.
   

    export default defineConfig({
      plugins: [vue()],
   +  base: '/vue-ts/',
   

2. git add -u

3. git commit -m "update vite's 'base' option for github pages"

4. Prepare our sources npm run bulid on main branch.

5. Let's setup gh-pages branch that will contain our site source. From docs:

   The default publishing source for project sites is the root of the gh-pages branch.
   

   # Create a new branch, with no history or contents, called gh-pages and switches to the gh-pages branc
   $ git checkout --orphan gh-pages
   

6. Clear the index and the working tree right after creating the orphan branch.
   

   $ git rm -rf .
   

7. Put dist/ folder contents into root of a project.
   

   mv dist/* . &&  rmdir dist/
   

8. git add assets/ favicon.ico index.html

9. git commit -m 'deploy' --no-verify. We are adding --no-verify here to skip pre-commit checks, which will fail because we have deleted .pre-commit-config.yaml from this branch.

Deploy to Github Pages with Github Actions

Creating vite vue ts template: Deploy to Github Pages with Github Actions

Sardorbek Imomaliev ・ Jul 30 '21

#github #ci #vite #vue

Links

• https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages
• https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll
• https://vitejs.dev/guide/static-deploy.html#github-pages
• https://cli.vuejs.org/guide/deployment.html#github-pages
• https://pre-commit.com/#temporarily-disabling-hooks

Project

imomaliev / vue-ts

Vite + Vue + TypeScript template