Building a Multilingual Blog with Astro
10727
Building a Multilingual Blog with Astro
Supporting multiple languages in a blog opens it up to a global audience. Here's how to build one using Astro with bilingual content stored in Cloudflare D1.
Content Strategy
Rather than separate routes per language, we store both languages in the same article record:
CREATE TABLE articles (
id TEXT PRIMARY KEY,
slug TEXT NOT NULL,
title_en TEXT NOT NULL,
content_en TEXT NOT NULL,
title_id TEXT NOT NULL,
content_id TEXT NOT NULL,
...
);Language Switching
A simple toggle switches between language versions client-side:
---
const { lang } = Astro.params;
const article = await getArticle(slug);
const title = lang === 'id' ? article.titleId : article.titleEn;
const content = lang === 'id' ? article.contentId : article.contentEn;
---
<h1>{title}</h1>
<div set:html={renderMarkdown(content)} />
<a href={lang === 'en' ? `/id/${slug}` : `/en/${slug}`}>
{lang === 'en' ? 'Bahasa Indonesia' : 'English'}
</a>SEO Considerations
- Use
hreflangtags for proper SEO - Generate sitemaps with all language variants
- Set appropriate
langattribute on<html>
Benefits of This Approach
- Single source of truth — both languages stay in sync
- Easy maintenance — edit one record, both languages update
- Atomic updates — publish both languages simultaneously
Comments
commenter 11mo ago
hey ini komentar