In cases of emergency, many organizations need a quick way to publish critical information. But existing (CMS) websites are often unable to handle sudden spikes in traffic.
Just received a shelter-in-place emergency alert with a web address for more information. Clicked the link. The site is down. All emergency sites should be static.
— Nicholas C. Zakas (@slicknet) March 17, 2020
To make things worse, natural disasters can also damage local network infrastructure, sometimes leaving people with very poor mobile connections.
I’ve written about the practice of publishing minimal “text-only” versions of critical news websites before and I think it makes a lot of sense to rely on the rule of least power for these things. When it comes to resilience, you just can’t beat static HTML.
# An Emergency Website Kit
Like so many others, I’m currently in voluntary quarantine at home - and I used some time this weekend to put a small boilerplate together for this exact usecase.
Here’s the main idea:
- generate a static site with Eleventy
- minimal markup, inlined CSS
- aim to transmit everything in the first connection roundtrip (~14KB)
- progressively enable offline-support w/ Service Worker
- set up Netlify CMS for easy content editing
- one-click deployment via Netlify
The site contains only the bare minimum - no webfonts, no tracking, no unnecessary images. The entire thing should fit in a single HTTP request. It’s basically just a small, ultra-lean blog focused on maximum resilience and accessibility. The Service Worker takes it a step further from there so if you’ve visited the site once, the information is still accessible even if you lose network coverage.
The end result is just a set of static files that can be easily hosted on cloud infrastructure and put on a CDN. Netlify does this out of the box, but other providers or privately owned servers are possible as well.
You can find the full project source on Github as well as a demo site here.
# Not Everyone is a Developer
I’m aware that not everyone, especially the people in charge of setting up websites like this, is familiar with things like Node or the command line. I want to keep the barrier to entry as low as possible.
Taking a hint from the excellent servicerelief.us project, it is possible to configure the template in such a way that all configuration can be done via environment variables.
These are set in the Netlify UI when the site is first deployed, meaning a user would only need a free Github and Netlify account to get started - without ever touching a line of code or having to mess around with npm or Eleventy itself. The content editing can all be done through Netlify CMS, which offers a much more useable graphical interface.
In the meantime, if you want to set up an emergency website and need help to get started, let me know!
# Update 25.04.
I recently did a short talk about this project at an online meetup. You can watch it here:
