1.9 KiB
1.9 KiB
Markdown blog
Posts live as .md files in src/content/blog/. Each file has frontmatter (title, date, description, tags) and a markdown body. Vite's import.meta.glob loads them at build time — no backend, fully static, fast.
Writing a post
Create src/content/blog/my-post.md:
---
title: My first post
date: 2026-05-19
description: A short summary shown on the index and in meta tags.
tags: [self-hosting, linux]
---
# Heading
Body in **markdown**. Code blocks, lists, links, images all work.
The filename (minus .md) becomes the URL slug: /blog/my-post.
What I'll build
- Add deps:
gray-matter(frontmatter parsing),react-markdown+remark-gfm(rendering),rehype-highlight(code syntax highlighting). src/lib/blog.ts— loads all posts viaimport.meta.glob, parses frontmatter, sorts by date, exposesgetAllPosts()andgetPostBySlug().src/pages/Blog.tsx—/blogindex page styled to match the site (glass cards, orange accents, mouse glow). Lists posts with title, date, description, tags.src/pages/BlogPost.tsx—/blog/:slugpage rendering the markdown with themed typography (prose styles using existing design tokens).- Wire routes in
src/App.tsx. - Update the hub card on
/so "Blog" links to/bloginternally (instead of the external damaj.tech link). - Add one starter post
src/content/blog/hello-world.mdso the index isn't empty.
Authoring workflow
- Connect the project to GitHub (Plus menu → GitHub) for easiest editing.
- Add/edit
.mdfiles insrc/content/blog/from any editor or directly on GitHub — changes sync back to Lovable automatically and appear on the site on next build. - Or just ask me to add a new post and paste the content here.
Notes
- Fully static, no database, no auth needed.
- Draft support: posts with
draft: truein frontmatter can be hidden from the index. - SEO: per-post
<title>and meta description set from frontmatter.