DEV Community

Cover image for Creating vite vue ts template: Deploy to Github Pages
Sardorbek Imomaliev
Sardorbek Imomaliev

Posted on • Updated on

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

Links

Project

GitHub logo imomaliev / vue-ts

Vite + Vue + TypeScript template

Top comments (0)