Multilingual (ko/en/it) Astro blog with dynamic OG image generation, structured data (JSON-LD), and SPA-like view transitions.
Live: sunghogigio.com
A fork of merox-erudite (itself built on astro-erudite). The base themes provide Astro Islands, shadcn/ui components, Tailwind styling, MDX authoring, Expressive Code blocks, view transitions, multi-author support, tag system, RSS/sitemap, newsletter (Brevo), Disqus comments, analytics (GA4/Umami), and AdSense integration.
Everything listed below is what was built on top of that foundation.
- Three languages: Korean (default), English, Italian
- Per-language routes (
/blog/ko/,/blog/en/,/blog/it/) with dedicated page files - Translation linking via
translationOffrontmatter field - Language switcher component on every post
hreflangalternate tags withx-defaultfallback- Dynamic
<html lang>attribute matching each page's actual language - English-first RSS feed with fallback to base post data
- Build-time generation with satori + @resvg/resvg-js
- Nebula-style gradient background with paw watermark
- Multilingual font stack: Geist (Latin) + Pretendard (Korean)
- Adaptive title size based on character count
- One image generated per language variant per post
- Client-side search powered by FlexSearch
- Prerendered JSON index covering title, description, tags, and full content
- Fuzzy matching with relevance scoring (exact > prefix > contains)
- Keyboard navigation, search history (last 10), contextual snippet extraction
- localStorage caching for instant subsequent loads
BlogPostingon every post (headline, author, publisher, dates, keywords)BreadcrumbListwith positional items on all navigable pagesWebSiteandPersonschemas on homepage and about page- Reusable
FAQPageandHowToschema components for rich snippet eligibility
- Parent-child post relationships via folder nesting (
post/index.md+post/sub.md) - Sidebar + header navigation showing all posts in a series
- Combined reading time aggregated across parent and children
- Merged table of contents spanning subposts
- Custom ordering via
orderfrontmatter field
- Deduplicated meta tags:
head.astroskips OG/Twitter/canonical whenpost-head.astroprovides article-specific versions (skipMetaprop) og:typecorrectly set to"article"on posts,"website"on other pages (no conflicts)article:published_time,article:modified_time,article:tagmeta tags- Language-specific
og:localeandog:locale:alternate og:imagedimensions andtwitter:urlon article pages
- Mermaid diagrams via custom remark plugin + client-side CDN rendering (theme-aware, dark/light)
- KaTeX math rendering with on-demand CSS loading (only when
.katexelements detected) - Both re-initialize correctly on view transition navigations via
astro:page-load
| Layer | Technology |
|---|---|
| Framework | Astro |
| UI | shadcn/ui + React |
| Styling | Tailwind CSS v4 |
| Content | MDX + Astro Content Collections |
| OG Images | satori + resvg |
| Code Blocks | Expressive Code + Shiki |
| Search | FlexSearch |
| Hosting | Cloudflare Pages |
git clone https://github.com/gigio1023/astro-blog.git
cd astro-blog
npm install
npm run dev # localhost:1234PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
PUBLIC_UMAMI_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
PUBLIC_DISQUS_SHORTNAME=your-shortname
BREVO_API_KEY=xkeysib-...
BREVO_LIST_ID=3
BREVO_TEMPLATE_ID=5Edit src/consts.ts for site metadata, navigation, and social links.
src/
content/blog/ # Posts (index.md + index.en.md + index.it.md per slug)
pages/blog/{ko,en,it}/ # Language-specific post routes
pages/og/ # satori OG image generation
pages/api/ # Search index endpoint
components/ # Astro + React components
plugins/ # Custom remark plugins (Mermaid)
lib/ # Data utilities, helpers
functions/ # Cloudflare Pages Functions (newsletter)
This project builds on excellent open-source work:
- astro-erudite by @jktrn — the original theme that established the design system, component architecture, and content collection patterns
- merox-erudite by @meroxdotdev (Robert Melcher) — added newsletter, Disqus, analytics, AdSense, and accessibility improvements
- Astro Micro by trevortylerlee — the original inspiration for the erudite lineage
The foundation these contributors built made everything above possible.