Build Static Blogs with Keystone

TLDR: A local Keystone server to author content combined with Next.js static HTML export gives you a powerful tool to generate static blogs.

Keystone Static Blog is an open source template to build static blogs with Keystone and Next.js.

The template comes bundled with lots of goodies —

• Beautiful, performant and fully responsive blog template.
• Built with Tailwind and it comes with a nice dark/light mode that's easily customisable.
• SEO optimised and accessible from the start. Lighthouse score is 100 for both SEO and Accessibility.

GitHub: keystone-static-blog
Preview: staticblogswithkeystone.netlify.app

Here's how it works

1. Content is authored in your local environment using Keystone's powerful rich text editor.
2. Content is fetched from Keystone's auto-generated GraphQL API during build-time.
3. The blog is prerendered as a static website using Next.js's static HTML export.

Content authoring with Keystone

Keystone is a powerful backend framework to build content driven websites. Keystone operates on schema driven development mental model where you describe the schema you want in JavaScript and Keystone automatically generates a fully functional GraphQL API for you in seconds. And to top it off, Keystone comes built-in with a feature-rich Admin UI to manage your content visually.

Keystone's document field is powered by an incredible rich text editor. All the default components (headings, paragraphs, bold, italics, code blocks, etc) that you usually use to write a blog post are supported by the editor out of the box. The editor exposes an intuitive API to build your own custom components and that's what makes this blog template stand out. This template includes a few custom components in the editor that would be useful in a blog post. Eg. Hero image, Tweet embed, YouTube embed, callout, custom blockquote and custom code blocks with syntax highlighting using prism.

Keystone gives us a GraphQL API right from the get go to work with our data, meaning, applications built with Keystone are Jamstack ready right from the start.

On top of that, Keystone supports SQLite database. SQLite is a super compact and convenient file system based database. This means that in an SQLite based Keystone server, you don't have to host your server anywhere and instead use it only in your local environments, all your data can live alongside your code as a simple, small file and changes to your content can be committed to your repo just like any other file. 🤯 This is what makes this whole template a super powerful alternative to MDX based blogs where the workflow is exactly the same — make changes in your local and commit your content to your repo.

Next.js static export

The template is just a simple prerendered static blog built with Next.js static HTML export. When you run the build, content data is fetched from the local keystone GraphQL API and the entire blog is exported as a bunch of HTML, CSS and JavaScript files that can be statically hosted anywhere for free.

Tailwind makes wire-framing redundant

The blog template is built using Tailwind and comes with dark/light mode. The greatest thing about Tailwind is not the tool itself but its opinionated design tokens and the preset based approach (popularly known as utility based approach) to building and styling interfaces. Even if you don't know how your interfaces are exactly going to look, you can play around with the presets and somehow end up with a beautiful looking website. That's how good the default Tailwind design tokens are. Every time I work with Tailwind I feel like a magician pulling user interfaces out of thin air.

Comparison with MDX based static blogs

Authoring content using MDX is great. I love it. I use MDX to author content in a lot of projects. You write something in a file and commit to your repo, it's as simple as that. But simplicity also means that it's limited. Customisation is a pain. If you want to build your own custom components (Embedded videos, tweets, a deeply nested component, etc) to use in your content you gotta jump through hoops and hope someone has made a plugin that suits your requirements. And forget about visually looking at your content while authoring. And that's why I prefer to author my content with a visual editor like Keystone's document editor that also supports MDX syntax to author content.

At the end of the day, MDX and local Keystone based static blogs are more of less the same in terms of how you ship content —

• You author content in your local environment.
• You prerender your blog.
• You commit your content along with your code to your repo.
• You host your prerendered website as static files.

That's all folks

I built this template as an experiment to see if Keystone could be a good alternative for MDX and had a ton of fun building it. I'm gonna add a handful of themes soon to spice things up.

There are endless possibilities to what we could build with well structured schema driven content.

Fork the template and make it yours. That's what I did for my website as well. Say hi to me on Twitter. Happy Blogging! 👋