January 8, 2018

Moving the JS Playground from GitHub Pages to Netlify

Over the weekend I moved this blog from GitHub Pages to Netlify and in this blog post I want to talk about why.

Github Pages and the JavaScript Playground

Ever since the first blog post on this site in April 2012 I've used GitHub Pages to host the site and it's served me well. The site is a pretty standard Jekyll website and as such I've never needed more power than GitHub provided.

In the future that may not be the case. I have some big plans for this blog this year (firstly a video series on testing React) and I was beginning to feel that GitHub Pages was limiting me; you are able to depend on a small subset of Jekyll plugins and that you couldn't configure redirects, extra headers or any of your server's behaviour.

Couple the above frustrations with the fact that Phil Hawksworth, who I've been lucky enough to share a stage with at a conference, joined Netlify, and I felt that the time was right to try something different.

Netlify takes the idea of publishing static code but wraps it in a powerful application that supports continuous deployment, redirect, headers control, and much more out of the box. Even better, you pay for more features, rather than per users on your site, and so the free plan is more than enough for this site.

(There is a soft limit of 100GB per month on the free accounts; but as this is a text based blog, that's not going to be an issue.)

Moving to Netlify

If you want to follow along fully, you can see the changes I made on GitHub.

Moving to Netlify involved the following steps:

Update the blog's Gemfile to remove the github-pages gem in favour of jekyll directly.
Sign up / in with Netlify and configure it to build this repository. Netlify lets you specify the build command (in this case, jekyll build) and the folder to deploy (_site).
Tell Netlify which branches to deploy. You can have it deploy lots of branches but I told Netlify to track the master branch for now.

And with that, I had Netlify deploying the blog!

Updating the custom domain

As part of the free Netlify package you are also able to add custom domains. The process of moving the domain to being hosted by Netlify was straight forward:

Disable Cloudflare on the domain. I used this for SSL, but Netlify provides that out of the box too (via Let's Encrypt). In hindsight I should have done this last because it meant for a while there were security warnings on the site.
Use Netlify's admin panel to create a DNS zone for the domain, which allows Netlify to fully control the domain.
Netlify then provides the new nameservers, which I was able to login to my domain provider and update.

And that's about it! Bar the time spent waiting for DNS propagation, that was me done.

Simplifying URLs and Netlify redirects

I also took some extra steps as I decided to simplify down the URL structure of the blog. Rather than the URL for posts being:

/blog/2018/01/moving-to-netlify

I wanted to instead change it to:

/moving-to-netlify

Making this change on the Jekyll site was easy; I updated my _config.yml to include permalink: /:title/.

If I left it like this and deployed, any links on the web to any of my previous blog posts would break, which isn't ideal for users. Netlify offers the ability to configure redirects to prevent this from happening.

To do this I created a _redirects file and put the following line into it:

/blog/:year/:month/:title  /:title

This will set up an HTTP 301 redirect from any URL that matches /blog/:year/:month/:title to /:title. By using the :title syntax Netlify matches the text and can generate the right URL to redirect the user to.

Whilst I hope to not have to be changing my URLs on a regular basis having the ability to do so with Netlify is fantastic.

The future of JS Playground

Moving to a platform that gives more control will enable much more on this site, and along with some of the upcoming video and written content, I'm hopeful that it will be a great year for this blog.