A tiny case study about migrating to Netlify when disaster strikes at GitHub, featuring Cloudflare
Last Monday (22 October 2018) GitHub was going đ„, and scheduled content on Code with Hugo wasnât going live.
For context, the blogâs setup is documented in âSwitching the lights on: Hugo vs Hugo config filesâ.
tl;dr (as is relevant to this post)
- Cloudflare DNS + CDN + proxying + HTTPS
- GitHub Pages
- Hugo as a static site generator
- CircleCI to deploy the site daily + on push (đ€·ââïžwasnât in the post but thatâs how I do it)
Contents of this post:
Table of Contents
On hosting with a business which isnât specialised in static hosting đ€
Back to the story: codewithhugo.com was not building or publishing on GitHub PageâŠ
which means my post âSimple but not too simple: how micro
improves your Node applicationsâ, scheduled for publication at 7AM UTC (Iâll write up how I do this one day subscribe to get it in your inbox)⊠Didnât go live.
As it turns out, the GitHub team itself struggled to get a post out during this period: âWe use GitHub Pages internally and all builds had been paused several hours earlier, so publishing this took additional effort.â
Whatâs worse, GitHubâs web-hooks and other core APIs were either unavailable or really flakey/disrupted. Which means that migrating to Netlify wasnât as simple as usual: âdeploy from gitâ wouldnât work due to disruptions on GitHubâs end.
Speedy migration to Netlify â©
A great Netlify feature is âmanual deploysâ, where you just upload a zip and it deploys it as a static site. Thankfully the latest version on my GitHub Pages repository had the post I wanted (it just couldnât deploy it).
Getting the site up on Netlify was simple enough:
- download the repositoryâs zip archive from GitHub (thankfully this wasnât on fire đ like the rest of GitHub)
- upload it to Netlify using the dashboard
At this point the site is live on a *.netlify.com
domain.
Getting the codewithhugo.com domain pointing to Netlify:
- Update the
A
records on Cloudflareâs DNS to Netlifyâs load balancer104.198.14.52
What surprised me is how fast the update happened. A DNS update should take time to propagate. Except this wasnât strictly a DNS update since Iâm using Cloudflareâs proxied DNS. That means if you dig codewithhugo.com
you get the following answer section:
;; ANSWER SECTION:
codewithhugo.com. 299 IN A 104.27.140.8
codewithhugo.com. 299 IN A 104.27.141.8
Suprise! đ those records donât point to Netlify (or GitHub Pages), they point to Cloudflare (see https://www.abuseipdb.com/whois/104.27.140.8 and https://www.abuseipdb.com/whois/104.27.141.8). Cloudflare then proxies to Netlifyâs load balancer. Super đ neat đ .
Why use Cloudflare then?
Well since @github Pages stopped building with all the issues, thanks to @Netlify’s
zip upload
functionality and @Cloudflare’s proxied DNS service I’ve been able to get the blog post I scheduled for today live.đđ
â Hugo Di Francesco (@hugo__df) 22 October 2018
When I first published âSwitching the lights on: Hugo vs Hugo config filesâ, one of the reactions I received was: âYou don’t seem to explain any reason for using CloudFlare on top of GitHub pages. Care to elaborate?â.
To which I replied (see the comment here):
- HTTPS (pretty sure it didn’t use to be a thing with custom domains on GitHub pages)
- CDN
- DNS
Which even I didnât find that compelling, now I guess I do have a compelling reason to use Cloudflare: youâre able to change hosting provider within minutes if you leverage Cloudflareâs proxied DNS + CDN service.
I think due to Cloudflareâs proxying and Netlifyâs manual deploy saving my bacon in this instance (Monday is newsletter day and I wanted to get the micro
post in there), itâs brought value enough to justify my stack choice.
The path forward
Since I host my static sites on Netlify now ([see âDeployment options: Netlify + Dokku on DigitalOcean vs now.sh, GitHub Pages, Heroku and AWSâ](http://Deployment options: Netlify + Dokku on DigitalOcean vs now.sh, GitHub Pages, Heroku and AWS)), Iâve decided that maybe sticking codewithhugo.com on there permanently is a good idea. Sorry GitHub Pages.
If you want to migrate a HTML @github Pages site to @Netlify here’s an example config (tl;dr: use Publish Directory “.”) pic.twitter.com/pDvlMXnCoc
â Hugo Di Francesco (@hugo__df) 23 October 2018
Hereâs an example config for deploying a site hosted on GitHub (that would work as a GitHub Pages site) to Netlify:
Pretty simple, publish the root directory using Publish Directory: .
and don’t set a build command.
GitHub Pages is awesome, my demos are likely to still live there. Disruptions happen to everyone but as is clear in their post-mortem, GitHub isnât a static hosting service đ. Netlifyâs core business proposition is static site hosting and deployment, thatâs why Code with Hugo is going to live there from now on đ.
Interested in Alpine.js?
Power up your debugging with the Alpine.js Devtools Extension for Chrome and Firefox. Trusted by over 15,000 developers (rated 4.5 âïž).
orJoin 1000s of developers learning about Enterprise-grade Node.js & JavaScript