Deploying Vitepress to Github Pages

Yesterday (4 March 2021) I tried to deploy Vitepress to Github pages. I looked at the Vitepress documentation, it is quite straightforward though.

We just need to add deploy.sh file and it's done!

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run docs:build

# navigate into the build output directory
cd docs/.vitepress/dist

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# if you are deploying to https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

Then just run the bash script by sh deploy.sh.

TADA!!!

Somehow it didn't work. In fact, my Vitepress code is overwritten with the Vitepress build code.

Two hours I was stuck here, looking to various sources but could not find a solution.

Since it was almost 10 PM and I wanted to sleep, I had to look at the deploy.sh code again and maybe this method can be done as temporary solution while waiting for the right way.

Let's go to the following line:

git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

Because in the previous deployment it turned out that my Vitepress code was overwritten, my "hack" was to create a new branch specifically for deploying the Vitepress build code.

It looks like this:

git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages-deploy

Then go to the repository settings, then change the branch for Github page to gh-pages-deploy.

If you have other proper solution please let me know 😁.

Let's connect with me https://twitter.com/BurhannAhm

🎉🎉 Happy coding !!!

Don't forget to check out https://initbase.github.io/vue-modal-2/