3.8 KiB
title, description, date, slug, published, tags, readTime, featured, featuredOrder, excerpt, authorName, authorImage
| title | description | date | slug | published | tags | readTime | featured | featuredOrder | excerpt | authorName | authorImage | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| About This Markdown Framework | How this open source framework works with Convex for real-time sync and Netlify for deployment. | 2025-12-14 | about-this-blog | false |
|
4 min read | false | 3 | Learn how this open source framework works with real-time sync and instant updates. | Markdown Framework | /images/authors/markdown.png |
About This Markdown Framework
An open-source publishing framework built for AI agents and developers to ship websites, docs, or blogs. Write markdown, sync from the terminal. Your content is instantly available to browsers, LLMs, and AI agents. Built on Convex and Netlify.
How It Works
The architecture is straightforward:
- Markdown files live in
content/blog/ - Convex stores posts in a real-time database
- React renders the frontend
- Netlify handles deployment and edge functions
When you add a new markdown file and run the sync script, your post appears instantly. No rebuild required.
The Stack
| Layer | Technology |
|---|---|
| Frontend | React + TypeScript |
| Backend | Convex |
| Styling | CSS (no framework) |
| Hosting | Netlify |
| Content | Markdown with frontmatter |
Why Convex?
Convex provides real-time sync out of the box. When you update a post, every connected browser sees the change immediately.
// Fetching posts is one line
const posts = useQuery(api.posts.getAllPosts);
No REST endpoints. No cache invalidation. No WebSocket setup. The data stays in sync automatically.
Why Markdown?
Markdown files in your repo are simpler than a CMS:
- Version controlled in git (commit, diff, roll back)
- Edit with any text editor
- AI agents can create and modify posts
- No separate login or admin panel
Features
This site includes:
- Real-time updates via Convex subscriptions
- Static pages for About, Projects, Contact (optional)
- RSS feeds at
/rss.xmland/rss-full.xml - Sitemap at
/sitemap.xml - JSON API at
/api/postsand/api/post?slug=xxx - Theme switching between dark, light, tan, and cloud
- SEO optimization with meta tags and structured data
- AI discovery via
llms.txt
Fork and Deploy
The setup takes about 10 minutes:
- Fork the repo
- Run
npx convex devto set up your backend - Run
npm run syncto upload posts (development) ornpm run sync:prod(production) - Deploy to Netlify
Development vs Production: Use npm run sync when testing locally against your dev Convex deployment. Use npm run sync:prod when deploying content to your live production site.
Sync commands:
Development:
npm run sync- Sync markdown contentnpm run sync:discovery- Update discovery files (AGENTS.md, llms.txt)npm run sync:all- Sync content + discovery files together
Production:
npm run sync:prod- Sync markdown contentnpm run sync:discovery:prod- Update discovery filesnpm run sync:all:prod- Sync content + discovery files together
Import external content: Run npm run import <url> to scrape and create local markdown drafts. Then sync to dev or prod. There is no separate import command for production because import creates local files only.
Read the setup guide for detailed steps.
Customization
Edit src/pages/Home.tsx to change:
- Site name and description
- Featured posts
- Footer links
Edit src/styles/global.css to change:
- Colors and typography
- Theme variables
- Layout spacing