Build Static Blogs with Keystone
Tags: react, nextjs, javascript, webdev
Published: 2022-09-08 23:04:53

> **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](https://github.com/flexdinesh/keystone-static-blog) is an open source template to build static blogs with [Keystone](https://keystonejs.com/) and [Next.js](https://nextjs.org/docs/advanced-features/static-html-export).

The template comes bundled with lots of goodies —

- **Beautiful**, **performant** and **fully responsive** blog template.
- Built with [Tailwind](https://tailwindcss.com/) 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](https://github.com/flexdinesh/keystone-static-blog)
**Preview:** [staticblogswithkeystone.netlify.app
](https://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](https://keystonejs.com/) 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 Admin UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x36svipkigda4cytwo45.png)


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](https://prismjs.com/).


![Content authoring using Keystone's Rich Text Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3xzcwsxkb3iwcedj8vy.png)


![Custom components in Keystone's Rich Text Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwxpzwqiyokmh3dov780.png)


Keystone gives us a GraphQL API right from the get go to work with our data, meaning, applications built with Keystone are [Jamstack](https://jamstack.org/) ready right from the start. 

On top of that, Keystone supports [SQLite](https://www.sqlite.org/index.html) 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](https://nextjs.org/docs/advanced-features/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](https://tailwindcss.com/) 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.**_

![Dark mode and light mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxpc4fvdpqnt73k6zczd.png)


## Comparison with MDX based static blogs

[Authoring content using MDX](https://nextjs.org/docs/advanced-features/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](https://staticblogswithkeystone.netlify.app/) 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](https://github.com/flexdinesh/keystone-static-blog) and make it yours. That's what I did for [my website](https://dineshpandiyan.com/) as well. Say hi to me on [Twitter](https://twitter.com/flexdinesh). Happy Blogging! 👋