A bilingual blog template built with Astro. Markdown/MDX content, light and dark themes, RSS, sitemap, and structured data.
Live example: gimmy.blog
- Markdown and MDX content with category-based routing
- Light and dark themes with system preference detection
- Optional per-post bilingual toggle (EN / 中文)
- RSS feed, sitemap, Open Graph tags, JSON-LD structured data
- Static HTML output, no client-side framework runtime
- TypeScript content collections with a typed frontmatter schema
Click Use this template at the top of the repository to create your own copy, then:
git clone https://github.com/<you>/<your-blog>.git
cd <your-blog>
npm install
npm run devThe development server runs at http://localhost:4321.
Site-level settings are centralized in src/config.ts:
SITE.url,SITE.title,SITE.descriptionSITE.langandSITE.ogLocaleSITE.author— name, role, emailSITE.social— Twitter, GitHub, Substack, MastodonCATEGORIES— section keys, display names, and descriptions
The about-page bio is in src/pages/about.astro.
Replace the following files in public/:
| File | Purpose |
|---|---|
avatar.png |
About-page portrait |
og-default.png |
Default social-share image (1200×630) |
favicon.ico, favicon-*.png, apple-touch-icon.png |
Favicons |
site.webmanifest |
Web app manifest |
fonts/*.woff2 |
Web fonts referenced in src/styles/global.css |
Posts live in src/content/<category>/ as .md or .mdx files. The folder name maps to the category; the filename becomes the URL slug (override with urlSlug in frontmatter).
src/content/
├── article/
├── thought/
└── reading/
To add or rename a category, edit CATEGORIES in src/config.ts and rename the matching folder.
The frontmatter schema is defined in src/content.config.ts. Reference posts:
| File | Demonstrates |
|---|---|
welcome.mdx |
Minimal post |
example-article.mdx |
Full frontmatter reference |
bilingual-example.mdx |
Bilingual toggle |
example-reading.mdx |
Short reading note |
Set draft: true to exclude a post from listings and routes.
- Colors — CSS custom properties at the top of
src/styles/global.css. Light theme on:root, dark theme on:root.dark. - Typography — the
body { font-family: ... }rule in the same file. - Layouts — home in
src/pages/index.astro, single post insrc/layouts/BlogPost.astro.
npm run build
npm run previewThe static output deploys to Vercel, Netlify, Cloudflare Pages, GitHub Pages, or any static host.
The design draws from:
- guiltygyoza — home page
- Vitalik Buterin — single-post layout
- Arnaud — about page
- Effie by 李自然 — typography and color palette