Source code from timomeh.de. It's built with Next.js, Keystatic as CMS, and Redis for caching and querying content.
I wrote posts about how I'd like my blog to work and how I implemented it – although this implementation post is outdated and has changed a lot. This README reflects the most up-to-date implementation.
See also:
- "Take Care of Your Blog" by Robin Rendle
All content, including images, is stored in a private GitHub repository. I use Keystatic as a CMS to manage this content. I enjoy the editing experience in a WYSIWYG editor in my browser, with support for drag-and-drop file uploads. Keeping the content repository private allows me to work on drafts in private.
Keystatic only supports fetching content by its slug. Getting content based on other attributes (like tags) means you have to fetch all posts and filter them yourself. That's why I store the content in a Redis cache with Redisearch, specifically using Dragonfly, which is much nicer to deploy. It allows me to query, filter, sort and paginate posts. Everything you need.
Whenever content in the private repository changes, GitHub triggers a webhook that updates the corresponding cache.
Redis is only used as an ephemeral cache, so there is no potential of data loss.
Images are also stored in the private GitHub repository. To make them publicly accessible, I proxy and cache those images in a Next.js route handler.
Videos are simply uploaded to YouTube, and YouTube links in posts are automatically converted to embeds.
- Next.js
- self-hosted on a Hetzner VPS with Coolify
- Cloudflare Proxy
- Keystatic
- Redis with Dragonfly
- Umami
- Shiki
- next-mdx-remote
- Tailwind CSS
- Playwright & Argos CI