Developing a static library website using Jekyll, Netlify and Zapier
I migrated the Suffolk Libraries website from a WordPress backend using a theme built on the Foundation framework. We moved to a static website built on Jekyll and hosted by Netlify. The site is faster, more stable and more secure, yet it still handles dynamic features such as events and forms.
Benefits (the why)
Running a WordPress site had become difficult for a small team. We had to buy, maintain and manage plugins to make the site secure from hackers and fast enough for our users.
Process (the how)
I exported content from WordPress into Markdown files using a Jekyll plugin. With our content in an open, convertible format, the work could begin.
HTML and CSS
Jekyll has a SASS workflow built in, which I use to write
scss partials. I use Bundler to keep all our Ruby dependencies in shape.
I also moved from the overly-opinionated Foundation framework to a more modular library called Tachyons. Tachyons just does CSS, and avoids building complex modules such as cards and call-outs. Instead, it takes a low level, ‘atomic’ approach: classes mostly map to single CSS properties, so the
db class is
- Using presentational classes makes web design easier
- Why we’ll be using a CSS framework like Tachyons to rebuild our website
Most library content doesn’t change over time, and edits are relatively simple. A library might change its opening hours, which we could reflect by editing a Markdown file and pushing it to Github.
However, some content is more dynamic. For example, our libraries run dozens of events every week, but we don’t want them appearing on the website once they’ve passed. Implementing dynamic features requires some lateral thinking, and some automation on your server.
Read Coding one off and recurrent events in Jekyll to see how I got the site to display events based on time.
The automation is handled by our host, Netlify, which specialises in static sites. Netlify has a smart API which works with Zapier to do all sorts of clever things, including firing site build requests early in the morning to update all our dynamic content.
The Netlify Zapier connection also offers other features you’d normally only expect from a dynamically hosted site. For example, we can send form submissions to Google Sheets, and automate email replies, without hosting SMTP scripts or databases.
A sane workflow
The other great benefit of running a static site on Netlify’s servers is its tight integration with Github. This means we can roll back commits and manage the site from a local, Github command line.
This makes it easy (and reliable) to share, stage and publish changes, something that can be difficult in a WordPress workflow. There’s something very satisfying about typing
git push and seeing your live site update.
Because the site is on Github it’s also automatically backed up and easy to roll back if there are problems. We can also share it with the public, and deploy it locally on any PC within minutes.
Running a static, Netlify hosted website brings many benefits:
- A fast user experience
- A stable, secure hosting environment
- Zapier powered dynamic features
- Github versioning and back-ups
I’d recommend it for sites that don’t require a huge amount of dynamic content; local and central government organisations, for example. If you’re interested in building a fast, secure static website with dynamic features, contact me: