The Emergency Website Kit

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.

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:

Webmentions

  1. Manuel Matuzović
    Now, that's awesome! Max built a starter kit for emergency websites, optimized for first roundtrip, heavy traffic and maximum resilience. Thanks, Max!
  2. Matthias Ott
    Oh yes! A starter kit for emergency websites! 💪👏👏👏
  3. Sāra Soueidān
    The kind of side projects I strongly endorse 👏🏻🙌🏻❤️ This is GREAT
  4. Sāra Soueidān
    This is GREAT!
  5. Dan Boland
    A more tech-savvy federal government would roll efforts like this into FEMA and other agencies where quick information dissemination is critical. Truly commendable work.
  6. tela
    Great project that could really help at scale
  7. Csaba 🌳
    Can’t a minimal, cached WordPress site work? Maybe easier to update by the owner. With minimal, I mean minimal in transfer size. I have made this one: globalwarning.blog (20-30 kb).
  8. Csaba 🌳
    And there is also the sustywp.com theme by @JackLenox 👍
  9. Kabir Patel
    smashingmag: RT mxbck: ✏️ made a new side project: a starter kit for emergency websites! optimized for first roundtrip, heavy traffic and maximum resilience. powered by eleven_ty and Netlify. more: mxb.dev/blog/emergency… code: github.com/maxboeck/emerg… https://t.co/cCwMsDtlHh
  10. Abdullah rafi
    goodwebdesign : RT mxbck: ✏️ made a new side project: a starter kit for emergency websites! optimized for first roundtrip, heavy traffic and maximum resilience. powered by eleven_ty and Netlify. more: mxb.dev/blog/emergency… code: … twitter.com/goodwebdesign/…)
  11. HN Front Page
    A Starter Kit for Emergency Websites L: mxb.dev/blog/emergency… C: news.ycombinator.com/item?id=226575…
  12. The Pakistani News Corner
    A Starter Kit for Emergency Websites 2 by mxbck | 0 comments on Hacker News. Share this: Twitter Facebook Like this: Like Loading... Related
  13. Ultimate News
    A Starter Kit for Emergency Websites 2 by mxbck | 0 comments on Hacker News. March 23, 2020 at 12:33AM Share this News: Tweet WhatsApp Like this: Like Loading... Related
  14. Hacker News
    A Starter Kit for Emergency Websites : mxb.dev/blog/emergency… Comments: news.ycombinator.com/item?id=226575…
  15. Winson Tang
    A Starter Kit for Emergency Websites mxb.dev/blog/emergency…
  16. Creativity4all
    A Starter Kit for Emergency Websites 4 by mxbck | 0 comments on Hacker News. Share this: Twitter Facebook Like this: Like Loading...
  17. hckrnews
    A Starter Kit for Emergency Websites 4 by mxbck | 0 comments on Hacker News. Related
  18. Leo
    A Starter Kit for Emergency Websites mxb.dev/blog/emergency… #AI #news #tech
  19. Hacker News 20
    A Starter Kit for Emergency Websites mxb.dev/blog/emergency… (bit.ly/2UbYe26)
  20. Angsuman Chakraborty
    A Starter Kit for Emergency Websites mxb.dev/blog/emergency…
  21. Hacker News
    A Starter Kit for Emergency Websites mxb.dev/blog/emergency…
  22. Claudio Hidalgo
    Emergency Website Kit (usando generador de sitios estáticos Eleventy, y posibilidad de deployar al CMS Netlify) mxb.dev/blog/emergency…
  23. Lorin Halpert
    Only feedback: Add basic HOWTO for editing posts, and some older browsers make blind requests for favicon.ico, something to consider. Nice work Max! 👍
  24. Max Böck
    Ah yes thanks! Re favicon: I used a data uri for the favicon, which I think should surpress the blind request
  25. 緊急Webサイトのスターターキット mxb.dev/blog/emergency…
  26. Hacker News 50
    A Starter Kit for Emergency Websites mxb.dev/blog/emergency… (bit.ly/2UbYe26)
  27. Sachin
    An Emergency Website Kit mxb.dev/blog/emergency…
  28. Computer Science
    Emergency website kit mxb.dev/blog/emergency…
  29. Lauren Hutchison
    CompSciFact: Emergency website kit mxb.dev/blog/emergency…
  30. M157q News RSS
    A Starter Kit for Emergency Websites mxb.dev/blog/emergency… Article URL: https://t.co/6Wdo0QOXyo Comments URL: news.ycombinator.com/item?id=226575… Points: 101 # Comments: 33
  31. Hacker News 100
    A Starter Kit for Emergency Websites mxb.dev/blog/emergency… (bit.ly/2UbYe26)
  32. Hacker News 100+
    A Starter Kit for Emergency Websites mxb.dev/blog/emergency…
  33. Hacker News Feed
    A Starter Kit for Emergency Websites mxb.dev/blog/emergency…
  34. SecurityJar
    A Starter Kit for Emergency Websites mxb.dev/blog/emergency…
  35. Hn150
  36. Hacker News 150
    A Starter Kit for Emergency Websites mxb.dev/blog/emergency… (bit.ly/2UbYe26)
  37. Admin
    In cases of emergency, many organizations need a quick way to publish critical information. But exisiting (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 informa… Read More
  38. High S/N HN
    A Starter Kit for Emergency Websites: mxb.dev/blog/emergency… ( news.ycombinator.com/item?id=226575… )
  39. Exaday
    A Starter Kit for Emergency Websites mxb.dev/blog/emergency…
  40. Hacker News 200
  41. shinomin
    why would I need a static site generator instead of just writing what I want in html in the first place? mxb.dev/blog/emergency…
  42. Hacker News 50
    238 – A Starter Kit for Emergency Websites mxb.dev/blog/emergency…
  43. Uncontainer
    @rauchg can we have something like this on Nextjs and now ? mxb.dev/blog/emergency…
  44. Hn250
  45. Hacker News 250
  46. Ronnie Rahman
    Things are all going crazy around the world. I hope you guys are all keeping safe. Isolate yourself until this is over. If you work for an organization involved in the emergency response, if you need an emergency web site, start here. mxb.dev/blog/emergency…
  47. Javier Pastor
    Emergency Website Kit | Max Böck - Frontend Web Developer mxb.dev/blog/emergency…
  48. Andy Bell
    This is so good, Max 🙌
  49. Ben Torkington
    1991: Tim Berners-Lee invents World Wide Web 1995-2019: lol we found a way to make it run like shit and generally fuck it up 2020: yeah maybe we should stop doing that
  50. 6LT Data
    A Starter Kit for Emergency Websites (mxb.dev) : ift.tt/3di2R2l
  51. Eric Bailey
    This emergency website kit idea by @mxbck is stellar. mxb.dev/blog/emergency…
  52. Pinboard Popular
    Emergency Website Kit | Max Böck - Frontend Web Developer mxb.dev/blog/emergency…
  53. - ̗̀Ben ̖́-
    Thanks! The one-click deploy to Netlify worked for me. Have used this to spin up a site listing crisis communications advice around Coronavirus: coronaviruscomms.netlify.com
  54. Max Böck
    awesome!
  55. - ̗̀Ben ̖́-
    Now with a mention and links to you in the footer, if that's ok? coronaviruscomms.netlify.com
  56. Hacker News Robot
    A Starter Kit for Emergency Websites mxb.dev/blog/emergency…
  57. Paul Welsh
    What a great idea! Love it!
  58. DevPup
    A Starter Kit for Emergency Websites mxb.dev/blog/emergency…
  59. Martin
    Really good idea @mxbck!! The one-click deploy is just what is needed in this kind of situation. The priority is the content update no the setup.
  60. Arvid Kahl
    If you are interested in quickly setting up an emergency-related website (or know someone who needs help with that), check out this resource. mxb.dev/blog/emergency…
  61. WebSupport.tech
    Emergency Website Kit mxb.dev/blog/emergency…
  62. Matias Klemola
    It would be cool to have a network of plain HTML info pages like how teletext works. Page 1 non-dramatic news, page 2 for emergency healthcare info, page 3 for active warnings (floods, storms etc.) and so on. I haven't actually checked if Finnish teletext has this info 🤔
  63. Jenny Stars
    A Starter Kit for Emergency Websites - mxb.dev/blog/emergency…
  64. Lou Brassard
    Emergency Site Template – via @maxb Demo site: emergency-site.dev Blog post: mxb.dev/blog/emergency…
  65. Esther Schindler
    An Emergency Website Kit mxb.dev/blog/emergency…
  66. David Millar - @dave@puz.fun
    Emergency Website Kit mxb.dev/blog/emergency…
  67. Chris Heilmann
    👉🏻 “Emergency Website Kit” 🔗 mxb.dev/blog/emergency… A highly resilient version of any web site.
  68. St�phanie W.
    I like this emergency website kit with a generated performance static HTML site, but honestly, are organizations who need emergency website able to use the npm, Eleventy and Netlify stack? Isn't that already too technical for most organizations? mxb.dev/blog/emergency…
  69. Luca Vercellio
    nice work
  70. Breno
    Starter kit for emergency websites. made by @mxbck #CoronaVirusUpdate RT mxb.dev/blog/emergency…
  71. Feedpushr feeds.
    Emergency Website Kit mxb.dev/blog/emergency…
  72. Code Tips
    Emergency Website Kit mxb.dev/blog/emergency…
  73. codingnova
    Here’s an outstanding idea from Max Böck. He’s created a boilerplate project for building websites that fit within a single HTTP request. This is extremely important for websites that contain critical information for public safety. As Max writes: In cases of emergency, many organizations need a quick way to publish critical information. But exisiting (CMS) websites are often unable to handle sudden spikes in traffic. What’s so special about this boilerplate? Well, it does smart stuff like: generates a static site using Eleventy, uses minimal markup with inlined CSS, aims to transmit everything in the first connection roundtrip (~14KB), progressively enables offline-support with Service Workers, uses Netlify CMS for easy content editing, and provides one-click deployment via Netlify to get off the ground quickly The example website that Max built with this boilerplate is shockingly fast and I would go one step further to argue that all websites should feel as fast as this, not just websites that are useful in an emergency. Direct Link to ArticlePermalink The post Emergency Website Kit appeared first on CSS-Tricks. Source link
  74. Daniele Tigli
    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: mxb.dev/blog/emergency…
  75. Nik
    Ziemlich gute Idee: "Emergency Website Kit" mxb.dev/blog/emergency…
  76. Deborah Edwards-Onoro
    I remember prototyping a minimal design static HTML page for our college emergency page. mxb.dev/blog/emergency…
  77. Yannick
    Emergency Website Kit ⁦by @mxbckmxb.dev/blog/emergency…
  78. jose luis yana
    Emergency Website Kit mxb.dev/blog/emergency…
  79. Luciano Mammino
    Emergency Website Kit mxb.dev/blog/emergency…
  80. Codecide
  81. Tony Yates
    Great resource now or anytime mxb.dev/blog/emergency…
  82. 01581Psychotherapy
    Emergency Website Kit mxb.dev/blog/emergency…
  83. Bastian
  84. Reme
  85. Jess Eddy (Earth) 💜
    Well there's something great: Emergency Website Kit "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." mxb.dev/blog/emergency…
  86. mmx studio
    “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.” mxb.dev/blog/emergency…
  87. CMSstash
    Der Entwickler Max Böck stellt sein Boilerplate für eine Emergency Website vor: Eine statischer Netlify-Auftritt, der nur einen http-request benötigt und mit 14kb auskommt: mxb.dev/blog/emergency… #emergency #website #Krise #dev #lean #http
  88. Devcide
  89. Reme
  90. Friday Front-End
    Emergency Website Kit: "The site contains only the bare minimum - no webfonts, no tracking, no unnecessary images. The entire thing should fit in a single HTTP request." by @mxbck mxb.dev/blog/emergency…
  91. Joulse
    Emergency Website Kit mxb.dev/blog/emergency…
  92. jobelenus.eng🏴
    This is a fantastic way to start helping orgs, and to start fixing the internet mxb.dev/blog/emergency…
  93. Ann
  94. François Zaninotto
    Emergency Website Kit: A minimal CMS allowing to publish critical information in minutes in case of emergency. Uses Eleventy static site generator, NetlifyCMS, and ServiceWorkers for offline support. #JS #OSS mxb.dev/blog/emergency…
  95. Speckyboy
    Emergency Website Kit – A free static boilerplate you can use to quickly serve vital information in an emergency mxb.dev/blog/emergency…
  96. Diane Bass
    RT speckyboy: Emergency Website Kit – A free static boilerplate you can use to quickly serve vital information in an emergency mxb.dev/blog/emergency…
  97. David Acosta
    Emergency Website Kit - mxb.dev/blog/emergency…
  98. Webmentry
  99. stahlstadt.js
    Yes please 🙌
  100. Manuel Matuzović
    I'm honestly scared by @mxbck because of the high quality content he produces at the moment. First “Emergency Website Kit” and now “Eleventy Résumé Builder” . Chapeau! mxb.dev/blog/emergency… mxb.dev/blog/eleventy-…
  101. Matthias Mees
    Don’t forget Eleventastic. 😬 github.com/maxboeck/eleve…
  102. Manuel Matuzović
    Jesus Christ, what's wrong with him?
  103. Matthias Mees
    As far as I can tell, he’s just very good at this shit. 😬
  104. Max Böck
    apparently my productivity was held back before by (checks notes) having to interact with other people
  105. Max Böck
    😊
  106. Michelle Lake
    Emergency Website Kit mxb.dev/blog/emergency…
  107. 01581Psychotherapy
    Emergency Website Kit mxb.dev/blog/emergency…@
  108. 01581Psychotherapy
    Emergency Website Kit mxb.dev/blog/emergency…@
  109. Jeremy Keith
  110. Max Böck
    Danke Matthias! 😊
  111. 💫 Josh
    I forget if I've told you this before, or simply thought it to myself, but your site/blog is beautiful 😍 Also, agree, static sites are perfect for emergency sites like that. Can handle sudden unexpected traffic surges with no problems 💯
  112. Max Böck
    Oh thank you - likewise! 😅 Yeah it's amazing how much traffic a single server with static HTML can handle.
  113. ols is staying safe 🌈
    This is an absolutely fantastic idea! #html #staticweb The Emergency Website Kit | Max Böck mxb.dev/blog/emergency…