Emergency Website Kit

Max Böck — Mon, 06 Apr 2020 15:00:24 +0000

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 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, so I'm currently working on two ideas:

1. No-Code Setup

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.

2. Volunteer Devs

Another great idea came from Stephanie Walter on Twitter:

True, but at some point there will always be single points of failures. I still like the idea of providing something simple to organizations, I just wonder how technical most people in those are. I wonder if there's some places to put in touch organizations with devs to help
— Stephanie W. (@WalterStephanie) March 27, 2020

Since even dealing with the unfamiliar landscapes of Github and Netlify might be a big ask for many non-technical organizations, it might be worth considering the help of volunteer developers.

The initial setup is a 10-minute job for devs who understand the stack. Organizations could get in touch with a volunteer to help them get the site online, then take over and update the content.

Get in Touch!

In the meantime, if you want to set up an emergency website and need help to get started, let me know!

DEV Community: Max Böck