Build Static Blogs with Keystone

Keystone is a backend framework to build content-driven websites. It automatically generates a GraphQL API for you based on schema definitions that you give for your content. When you combine it with Next.js's static site generation, you get an amazing tool to generate static blogs.

Keystone static blog is a starter template to build statically generated blog-like websites with Keystone and Next.js. The template is built with and styled using Tailwind's configuration based theme which makes it easy to extend and customise it.

This blog you're reading is built using the template — keystone-static-blog.

The template comes bundled with lots of goodies

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

How does it work?

The short version is that the blog is entirely generated during build-time using Next.js static site generation and the content for the blog is made available during build-time using Keystone's powerful content platform along with the magic of zero configuration file-system based SQLite database.

• The blog is generated statically using Next.js static HTML export.
• The content for the blog is fetched from a local Keystone server. Keystone is a fantastic content platform that auto-magically generates GraphQL API based on schema definitions.
• Usually content platforms need to be connected to a database and hosted somewhere which often comes with hosting, configuration and maintenance cost. Keystone supports SQLite database and we make use of that to avoid having to configure, host or maintain anything. You can get started with zero configuration and commit your database along with your code like any other file. 🤯 This is what makes this whole generate blogs locally without having to host a server anywhere possible.
• Author your content visually in your local environment using Keystone's powerful document editor and admin dashboard. Once your content is ready, just run a local build and your blog will be exported as a static website. Now you can easily host this static website anywhere. I created my blog using this template and hosted it in Netlify. Every time I make a change to my content, all I gotta do is push my changes to the repo and Netlify automatically deploys it in less than a minute.
• The generated blog and content is styled using Tailwind and could be easily customised.

How is this different from MDX based blogs?

The idea is same - you statically generate your blog using content made available during build-time. The difference however, is that, MDX authored content is passed through a plugin system during the build and the content is made available in your pages to be built. This is easy as long as you only need the default out-of-the-box markdown syntax content. The moment you want to customise your content with fancier components (Eg. carousel, YouTube video, Twitter embed, syntax highlighted code, Hero image, etc) you will either have to find a plugin that supports that or build them yourself which sometimes can get quite cumbersome.

This is where Keystone's all powerful document field comes into play. You can author content using a visual editor and see how your content is going to look while authoring it. And most importantly Keystone's document field makes it easy to add custom components (Eg. carousel, YouTube video, Twitter embed, syntax highlighted code, Hero image, etc). All you need to know to add a custom component is to know how to code in React and voila. 🥳 This template is setup with a few custom components (hero image, custom blockquote, embed tweet, embed youtube videos, callouts and syntax highlighted code blocks). You can see the custom components in action here — Keystone Content Authoring Experience is Just Fantastic!.

Keystone's document editor stands out in a handful of ways over MDX based content —

• Ability to visually see your content while authoring it.
• Keystone's admin dashboard makes it easy to publish/unpublish content, go through all your content visually for editing, author SEO information along with your post, etc.
• You have complete control over how you render and style your content. Default out-of-the-box elements and your custom elements can be styled however you want. Check this post to see all available formatting options - Keystone Content Authoring Experience is Just Fantastic!.
• Multi-column layouts for your content.
• And more. Keystone's document editor is friggin' fantastic.

That's all folks.

I hope you enjoy your content authoring experience with Keystone. Share this and say hi to me on Twitter — @flexdinesh. Happy Blogging! 👋