I started playing around with vue.js for a while, watched a couple of videos on youtube, and had an idea for building a demo app(you guessed it right, a todo-list). While the official docs does contain a simple todo list in it's examples section, I wanted to try something more complex and something that I've been wanting to use for a while now — a repeatable checklist — in my terms, an Object Oriented to-do list. After a couple of days of hacking, I was able to complete the task and wanted to demo it to the world, cause Yay, I learnt a new front-end library!.
Being primarily a Back-end/Ops guy, my first obvious choice was to "host" the app. So I went to my Heroku console and spun up a new node.js app. A simple Google Search pointed me to this easy-to-follow article on how to deploy a static, front-end only vuejs app on heroku. I followed the steps in the article and was able to successfully launch the site. Wohooo. But wait, there was a small problem. Heroku's free tier has a limitation. The allocated dynos(compute instances) would go to sleep if the app stops receiving requests. Of course, there were hacks to avoid these, but to avoid the unnecessary complexities of keeping my app awake all the time, building and deploying code for small small changes, I decided to take an easier route to success.
I had heard of github pages a while back and had hosted my personal website on it for quite a while now. Since this was going to be a static only site, I decided to go ahead with hosting it on github pages. For those unaware, github lets you create websites for your open source projects and host them for free. You can learn more here.
To get started, you will need to create a repo by the name ".github.io". An index.html file on this repo will then be served as root at the url "https://your_github_username.github.io". Individual project webpages can then be spun up by creating a 'gh-pages' branch on those repositories. These will then be accessible at "https://github_username.github.io/repo_name".
In my case, the gh-pages branch was a subset of the master branch itself. I first pruned whatever was not required(package.json, vue specific src files, webpack.config and other configuration files). I then copied the build.js file from dist/ and put it inside my public folder and modified the index.html file to lookup for the build.js file inside my public folder instead of dist. After committing the changes and syncing the branch to the remote repository, I was able to access my todolist within seconds. With these minimal changes/effort, I was able to host the app at 0 cost and no maintenance headaches.
Thank you for reading.