Static websites: tools and processes to manage content

Note taker: Clayton

Most websites are now built using a content management system (CMS), which includes a codebase that provides the website's functionality and a database which stores content such as blog posts and user accounts.

While a CMS makes it easy for editors to edit and post content to a website without knowing HTML or CSS, it also adds complexity to the site which can make it difficult to install, customize maintain or style. Also, having a database makes websites a target for hacking, requiring diligence around security updates.

A static site generator creates flat files, making the site simpler to customize and theme. There is no database involved, making it more secure and requiring much less maintenance. There are, however, limitation to what a static site generator can do compared to a CMS.

Static Site Generators

Gatsby

A ReactJS-based tool that can be used for a "hybrid" approach in which a CMS such as Drupal or Wordpress is used for content entry, but a static site is still being generated.

Pros There was a lot of attention given to this project at the recent Bay Area Drupal Camp. They have good documentation and is being actively developed. It loads fast and already has a lot of plugins.

Cons

• Images aren't responsive out of the box.
• Needs cache busting added

Hugo

Written in Go, Hugo was one of the first and thus one of the most mature static site generators.

Pros

• Easy to install
• Renders quickly
• Includes built-in search

Cons

• Maintains a Go paradigm in templates that feels unnecessary
• Editors need to know Markdown and Git

Jekyll

Another mature static site generator.

Pros

• More intuitive to use than Hugo

Cons

• Editors need to know Markdown and Git

Grav

A "Flat File CMS" it has a bit more of the functionality one would find in a CMS (an administrative interface for example), but still does note rely on a database.

Pros

• WYSIWYG Editor makes it easier for less technical editors to use
• Includes an administrative interface and helpful analytics

Cons

• Has more requirements than other static site generators (eg: requires PHP)

Kalastatic

It was developed by Kalamuna, who had members attend the NP Dev Summit, to bridge the gap between a prototyping tool and a CMS. It uses Twig for its templating.

Like Gatsby, it can be hooked up to a CMS to give people a nice authoring experience, but still have a website of static files.

Additional Notes

• Docker can be used to manage lots of sites
• Netflify - routing tool, can also do A/B testing
• Prismic - a central content repo, which you can then specify different content to be published on different sites
• Cloud image

Final Thoughts

EFF has used static sites for campaign websites that have a certain shelf-life. They've really enjoyed this approach and this seems to be the best use case for now.

If a website will ever need more of the dynamic functionality provided by a CMS it's probably best to start by using a CMS rather than try to port it from a static site to a CMS.

Many groups don't need a CMS and if they only update their site a few times a year, it would be better to have a static site that they email changes to a developer who can update it. It feels very early 90s but there are times where this workflow is worth it. :)

ReactJS is a framework that can add really nice interactive experiences. However, once ReactJS has been introduced to a project,the learning curve increases.

Another approach to building simpler websites that EFF took is to build a Rails app that programatically snapshots every page every time a new edit is made.