A real writing editor for your Markdown site

---
title: Getting started with Kobun
slug: getting-started
publishedAt: 2026-07-25
cover: /images/blog/getting-started.png
author: authors/mari
draft: false
---

Kobun stores every entry as plain Markdown in your
repo. Edit it in the browser, or open it in your own
editor — it's just a file.

## Why Git-based?

Your content gets the same review, history, and
rollback story as your code.

---
import { getCollection } from 'astro:content'

const posts = (await getCollection('posts'))
  .filter((post) => !post.data.draft)
  .sort(
    (a, b) =>
      b.data.publishedAt.valueOf() -
      a.data.publishedAt.valueOf(),
  )
---

<ul>
  {posts.map((post) => (
    <li>
      <a href={`/blog/${post.data.slug}`}>{post.data.title}</a>
    </li>
  ))}
</ul>

import fs from 'node:fs/promises'
import path from 'node:path'
import matter from 'gray-matter'

const dir = path.join(process.cwd(), 'content/posts')

export default async function BlogIndex() {
	const files = await fs.readdir(dir)
	const posts = (
		await Promise.all(
			files.map(async (file) => {
				const raw = await fs.readFile(path.join(dir, file), 'utf8')
				return matter(raw).data
			}),
		)
	)
		.filter((post) => !post.draft)
		.sort((a, b) => +new Date(b.publishedAt) - +new Date(a.publishedAt))

	return (
		<ul>
			{posts.map((post) => (
				<li key={post.slug}>
					<a href={`/blog/${post.slug}`}>{post.title}</a>
				</li>
			))}
		</ul>
	)
}

import matter from 'gray-matter'
import type { Route } from './+types/blog'

const files = import.meta.glob('../content/posts/*.md', {
	eager: true,
	query: '?raw',
	import: 'default',
}) as Record<string, string>

export function loader() {
	return Object.values(files)
		.map((raw) => matter(raw).data)
		.filter((post) => !post.draft)
		.sort((a, b) => +new Date(b.publishedAt) - +new Date(a.publishedAt))
}

export default function Blog({ loaderData }: Route.ComponentProps) {
	return (
		<ul>
			{loaderData.map((post) => (
				<li key={post.slug}>
					<a href={`/blog/${post.slug}`}>{post.title}</a>
				</li>
			))}
		</ul>
	)
}

import matter from 'gray-matter'
import { For } from 'solid-js'
import { A } from '@solidjs/router'

const files = import.meta.glob('~/content/posts/*.md', {
	eager: true,
	query: '?raw',
	import: 'default',
}) as Record<string, string>

const posts = Object.values(files)
	.map((raw) => matter(raw).data)
	.filter((post) => !post.draft)
	.sort((a, b) => +new Date(b.publishedAt) - +new Date(a.publishedAt))

export default function Blog() {
	return (
		<ul>
			<For each={posts}>
				{(post) => (
					<li>
						<A href={`/blog/${post.slug}`}>{post.title}</A>
					</li>
				)}
			</For>
		</ul>
	)
}

<script lang="ts">
  import matter from 'gray-matter'

  const files = import.meta.glob('$lib/content/posts/*.md', {
    eager: true,
    query: '?raw',
    import: 'default',
  }) as Record<string, string>

  const posts = Object.values(files)
    .map((raw) => matter(raw).data)
    .filter((post) => !post.draft)
    .sort(
      (a, b) =>
        +new Date(b.publishedAt) - +new Date(a.publishedAt),
    )
</script>

<ul>
  {#each posts as post (post.slug)}
    <li>
      <a href="/blog/{post.slug}">{post.title}</a>
    </li>
  {/each}
</ul>