Keystone Static Blog Template on GitHub

Design system boilerplate

Progressive Rendering — The Key to Faster Web

Top 10 features in React Dev Tools in 10 tweets

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.

 is a starter template to build statically generated blog-like websites with 

. The template is built with and styled using 

 which makes it easy to extend and customise it.

This blog you're reading is built using the template — 

The template comes bundled with lots of goodies

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.

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.

 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's document editor stands out in a handful of ways over MDX based content —

I hope you enjoy your content authoring experience with 

. Share this and say hi to me on Twitter — 

This is a starter template to build statically generated blog-like websites with Keystone and Next.js. Built by Dinesh Pandiyan.

Banner image with graphics describing that static blogs could be built with Keystone and Next.js

Build Static Blogs with Keystone

Heyo! Keystone comes built-in with a powerful Rich Text Editor and it makes it easy to draft your thoughts visually and publish it with a pizazz.

Plenty of built-in formatting options. You can 

. Don't forget about inline code, you got that too. 

Every line is a paragraph. Paragraphs can be single or multi-line.

You can have any percentage-based grid layout you want.  Keystone lets you customise the available column layouts in your editor. 

This is a 2-equally-split-columns layout —

This is a 3-equally-split-columns layout —

/* 
  You can write default codeblocks that aren't syntax highlighted. 
  Scroll down for a custom code block example with syntax highlighting.
*/

function Greet() {
  return <div>Hello world!</div>
}

You can build your own custom components for the Keystone's document field and use them in the Rich Text Editor while authoring content. You have complete control over how your custom components are authored in the editor and how you render them on your website. 

When it comes to what you can do with custom components, your imagination is your only limit. Here are a few example custom components I've created —

Another component to embed YouTube videos —


And of course, a Hero image for your blog post —

That's all folks. Hope you enjoy your content authoring experience with 

Blogs

GitHub

Twitter

Medium