Update version to 1.0.0 across package.json and changelog. Configure netlify.toml with Convex deployment URL (agreeable-trout-200.convex.site). Verify TypeScript type-safety for src and convex directories. Confirm Netlify build passes with SPA 404 fallback configured. Update TASK.md with deployment steps and files.md with complete file structure.
2.6 KiB
title, description, date, slug, published, tags, readTime
| title | description | date | slug | published | tags | readTime | ||||
|---|---|---|---|---|---|---|---|---|---|---|
| About This Markdown Site | How this open source site works with Convex for real-time sync and Netlify for deployment. | 2025-01-16 | about-this-blog | true |
|
4 min read |
About This Markdown Site
This is an open source markdown site built with React, TypeScript, and Convex. Write posts and pages in markdown, sync them to a real-time database, and deploy on 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 with git
- 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 - Deploy to Netlify
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