Introducing Markwell

A New Blog

I've been meaning to start a blog forever, but each time I tried I came away unsatisfied with the tools to do it. Things like Jekyll and Hugo were both sort of in the right direction, but they each had issues which stopped me from really enjoying the experience of using them.

I don't have any experience with Ruby and I wanted to use tools that I know rather than learning something completely new for this project. Hugo was close, but I found the templating system to be messy and the documentation to be difficult to find a foothold with. Just getting a simple project setup felt like a chore.

The closest I got was generating a static site with Next.js and serving it with github pages, but it felt clunky and I much prefer using Svelte/Sveltekit over React.

I've been reading all kinds of interesting posts about creatively shoehorning SQLite into different situations recently and felt inspired to see if it tie in well for storing blog posts in memory.

Enter Markwell

A framework agnostic sqlite based tool for blogging with markdown

This post is meant to showcase Markwell, a tool for statically generating markdown and piping it straight into a sqlite database while providing full text search and flexibility to display it however you want.

Since markwell exposes an in memory sqlite database, you can extend it however you want inside the config file. Markwell is fast enough to support hot reloading blog posts while you work, and takes less than 10 lines of configuration for a basic setup on the server side.

Simply make a folder to hold your blog posts, tell Markwell where it is and you're off to the races. To enable hot reload, simply add Markwell's built in HMR plugin into your vite.config.js, and it'll rebuild your blog database so fast you won't even notice.

import Markwell from 'markwell';

const config = {
	plugins: [
        sveltekit(),
        // All Markwell paths use globs for flexibility
        Markwell.hmrPlugin(${path}),
    ],
};

Markwell uses YAML front-matter with a handful of predefined fields to specify some standard blog post metadata which can be be dropped directly into <svelte:head> to improve SEO.

Style

This site uses one of my favourite libraries, the excellent Picocss for styling.

Piping the generated Markdown directly into Picocss requires almost no extra styling, runs fast, and looks awesome.

It even has built in support for code snippets.

Pico is easy to add extend with custom style, and svelte's scoped style tags make it even easier.

The entirety of the code to make this page is only 6 lines!

<script>
	export let data;
</script>

<h1>{data.title}</h1>
{@html data.html}

Flexible

While I had SvelteKit in mind when I was putting this together, I realized pretty quickly that there's nothing specifically making SvelteKit a requirement. It's just as easy to set up a Markwell instance on the server side in Next.js or Nuxt.js.

I haven't tested it yet, but I suspect it would be quite easy use it with Express and any of the built in template engines as well (pug, handlebars, etc...) since all of the html for each page is pre-generated.

In the next few weeks I'll be making test examples with each of these frameworks to see if there are any gotchas or obvious problems that can be resolved.

If you make something with Markwell, please let me know!