Creating vite vue ts template: Deploy to Github Pages

#github #deployment #vite #vue

Setup project for Github Pages integration

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/',
```
git add -u
git commit -m "update vite's 'base' option for github pages"
Prepare our sources npm run bulid on main branch.
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
```
Clear the index and the working tree right after creating the orphan branch.
```
$ git rm -rf .
```
Put dist/ folder contents into root of a project.
```
mv dist/* . &&  rmdir dist/
```
git add assets/ favicon.ico index.html
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.