GitHub Pages and Single-Page Apps

Evan Salter on May 06, 2017

This post originally appeared on my personal blog. Single-Page Apps (SPAs) are all the rage right now. They make it ex... [Read Full]
markdown cheatsheet

netlify is cool

The free tier gives you everything GitHub Pages gives you, plus HTTPS with LetsEncrypt, URL rewrites/redirects, and the ability to use any static site build system (not just Jekyll). Plus if your site is for an open-source project, you get the $50 a month plan for free. I have no plans to ever use GitHub Pages ever again.

Thanks for the heads up, looks great.

Thanks for recommending netlify. I've now moved my portfolio and the po-util website there now. Digging the easy setup and free SSL.

Wow that looks pretty cool. I'll definitely be looking into that more! Maybe I'll move my site to that, or keep it in mind for a future project. Thanks!

I did something similar for a Jekyll website I was building, but I was using the dev branch to commit the root project, and then, my npm run build or yarn run build would automatically cd to the build folder, check the master branch and commit for me.

For the HTTPS problem you're having: you can either use CloudFlare (which will boost your website performance (http2, caching, 100s of PoPs)) or create Let's Encrypt certs which you need to provide your DNS manager (you may not be able to do this).

Yeah I thought about using CloudFlare but only the traffic between the user and CloudFlare is encrypted. Traffic between GitHub and CloudFlare will be plain text. There's probably still an advantage, however I don't like the idea of making the user think their traffic is encrypted end-to-end when it's actually only encrypted half way. If my site transferred any sensitive information, I definitely would have searched for another solution.

Though it might be worth it to look into CloudFlare for the other benefits it can provide!

I faced similar issues when I was planning to host my SPA.
Same as you I too did a lot of research and finally settled on Firebase Hosting as it has support for SPA and free SSL for custom domains, plus it's free if your site traffic is less than 10G/month

I strongly concur with Firebase Hosting. Several advantages in my mind:

  • As noted - SSL is provided. Strongly encouraged, even.
  • Easy integration with the Firebase DB, which was designed for SPAs to do a lot of things without requiring a hosted back-end middleware.
  • Easy integration with Google Cloud Functions, which provide some of that middleware support with node.js if you need it. Only bills you for the time actually used (and it scales to zero, unlike the newer App Engine offering).

Yeah I have heard great things about Firebase Hosting. I kind of got hooked on the idea of having zero costs associated with this project, just to see how easy it would be to do. Though the costs through Firebase would have been negligible. I'll keep it in mind for my next project!

A great article! I just published my personal website via Github pages. I also created a Build branch where I have a build system for my website, and then I manually publish the output to the master branch. Thanks for the advice on automation, I'll definitely take a look at improving the process.

By the way, I'm not using any framework, and I built a simple router that queries the requested page and diffs it with previous page. I'm also using Web Components to help with the process, it allows me to extend an Anchor HTML element, which makes it easier to override links and to make sure the site works even without JavaScript.

Hi Evan, really thanks for this post. I will try to steal your travis script :) :P

I also moved recently from Medium to github pages (github.com/kalinchernev/kalinchern...) and I also bumped my head against the wall with the master branch trick. My deployment scripts are also just fine for the moment (github.com/kalinchernev/kalinchern...) but I'll try to make use of your example :D

By the way, on my similar journey like yours, I met several other ideas and concepts:

Basically, we're trendy! It's the cool way to make personal sites and blogs nowadays :))

Yeah I found it kind of annoying that you can't serve a user or org site from a specific directory on master like you can with the docs folder on the project sites. Though once I got it set up with Travis, I did prefer that way since it keeps the built files separate from the source code.

I didn't know about that gh-pages node module, it looks pretty handy! Thanks for the links, I'll definitely check them out.

With now you can alias your deployments to a better URL, in the free tier you can alias to now.sh sub domains (eg. coolproject.now.sh), if you paid you can use a custom domain but I think for OSS projects (free tier) a now.sh sub domain it's OK

Definitely good to know about the subdomain aliases. I like to use now for prototypes that I can easily share with others, so that will come in handy!

For my personal site, I wanted to use evansalter.com for the domain, so that wouldn't have worked for me unless I wanted to pay. I definitely haven't ruled out now for other types of projects though, as I do like what the service offers. Thanks for the tip!

As for static page generators, I recently did my personal page too and found Hugo on the way. It's pretty easy to get it running, try it later!

Also, it's always nice to know about other ways to host SPAs and thanks for writing!

Glitch.com is pretty cool too. It's a little bit challenging for me to wrap my already tool-soaked head around their development model, but they clearly let you build some cool things.

Netlify is pretty good.

I've been using Github Pages for a while but then I stumbled upon Netlify and I never looked backed since. They offer a lot more features than Github Pages in their free plan.

Great article thanks a lot. I think hexo or metalsmith are worth to try for static pages generation.

Rollup the rim to win, the epitome of Canadiana, Thanks for the article too!

You can use CloudFlare as a reverse proxy with GH-Pages to add SSL encryption and other nice extras.

Surge.sh is like now, but you can pick the subdomain (so you can keep using the same one). Also, by copying your index.html to 200.html, routing is handled.

code of conduct - report abuse