My personal website built on vue.js and github pages.
The goal of this website is to create one that would host all of my projects, blog/posts/ramblings, and designs on one URL. I also wanted all this done for free, so I make use of Github Pages free hosting and VueJS because it is a completely client-side website framework.
Using VueJS and Github Pages become tricky at some points. My Github Pages was restricted to only hosting the site on the master branch, so many tools requiring the gh-pages branch for VueJS and Github Pages did not work for me.
To get VueJS to work with Github Pages, I host all source code on the dev branch. I build it like you normally would and this outputs the production site into the dist folder. I also ensured that .gitignore did not ignore the dist folder to make sure it kept the CNAME and README.md files. I then push all changes onto the dev branch. Finally, I use a Node.JS tool called git-directory-deploy to push the dist folder alone into the master branch.
If you would like to have a script for this or see mine, refer to the bin/deploy script in the dev branch.
- Blue paint image (Photo by Joel Filipe on Unsplash)