DEV Community

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 extremely easy to build featu...
Collapse
 
tbodt profile image
tbodt

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.

Collapse
 
nrobinson2000 profile image
Nathan Robinson

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

Collapse
 
_evansalter profile image
Evan Salter

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!

Collapse
 
ben profile image
Ben Halpern

Thanks for the heads up, looks great.

Collapse
 
hugmanrique profile image
Hugo Manrique

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).

Collapse
 
_evansalter profile image
Evan Salter

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!

Collapse
 
guitarino profile image
Kirill Shestakov

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.

Collapse
 
jaydp17 profile image
Jaydeep Solanki

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

Collapse
 
afirstenberg profile image
Allen Firstenberg

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).
Collapse
 
_evansalter profile image
Evan Salter

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!

Collapse
 
sergiodxa profile image
Sergio Daniel Xalambrí

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

Collapse
 
_evansalter profile image
Evan Salter

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!

Collapse
 
kalinchernev profile image
Kalin Chernev

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 :))

Collapse
 
_evansalter profile image
Evan Salter

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.

Collapse
 
gildaswise profile image
Gildásio Filho

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!

Collapse
 
jgb profile image
Jean Gérard Bousiquot

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.

Collapse
 
toptourist profile image
toptourist

It was a very useful article. I am happy to visit my tourism websites as well

جاهای تفریحی دبی

جاهای دیدنی دبی

بلیط چارتر هواپیما

رزرو آنلاین هتل

Collapse
 
pooyatb profile image
pooyatb

pishbinifootball.website
footballbet.website
pishbinifootball.online

سایت شرط بندی
سایت پیشبینی فوتبال
شرط بندی فوتبال
پیشبینی فوتبال
—————————————-
bazi-enfejar.com/
bazienfejar.net/
بازی انفجار
سایت انفجار

Collapse
 
ayda111111 profile image
ayda khaleghi

فیلیمو تخفیفِ خرید اشتراک را برای مشتریان خود فراهم کرده ‌است که هزینه اشتراک هر بسته متناسب با دوره زمانی خریداری شده، از یک‌ماهه، سه‌ماهه و شش‌ماهه است و تخفیف خرید اشتراک فیلیمو بدون هیچ محدودیتی برای کاربران فراهم شده است.

Collapse
 
mindlace profile image
Ethan Fremen

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.

Collapse
 
jswhisperer profile image
Greg, The JavaScript Whisperer

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

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
empty2k12 profile image
Gero

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

Collapse
 
orhanveli profile image
orhan

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

Collapse
 
ehsanskandari profile image
Ehsan Eskandari

Thanks for recommending netlify.
کوش آداسی

Collapse
 
reeder29 profile image
Doug Reeder

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.