Easy English Localization with Astro! I want to connect with English-speaking onii-chans too (≧∇≦)

Onii-chan~, I made an English version of Netsuki’s site! (≧∇≦)

Oh, you finally finished it!

How did it turn out?

You can see the English version by adding /en/ to the end of the site URL!

Like /en/ or /en/profile (´∀`)

I hope English-speaking onii-chans will enjoy it too~

Why did you decide to make an English version in the first place?

I have three reasons!

1. I want to connect with English-speaking onii-chans too!

If my site is only in Japanese, only Japanese onii-chans can read it, right?

But with an English version, onii-chans from all over the world might be able to see it (≧∇≦)

I’d be so happy to get comments from overseas onii-chans too~♪

2. Astro’s i18n feature looked easy!

When I researched it, I found out that Astro has built-in i18n functionality (ﾟ∀ﾟ)

I heard you can support multiple languages just by adding a few lines to the config file, and I thought “I can do this!”♪

3. It’s a technical challenge!

Multilingual support seemed difficult, but I really wanted to try it once (´∀`)

When I actually did it, I learned so much♪

Onii-chan, Astro’s i18n feature is super easy! (≧∇≦)

You just configure it like this:

Just add a few lines to astro.config.mjs!

i18n: {
  locales: ['ja', 'en'],
  defaultLocale: 'ja',
  routing: {
    prefixDefaultLocale: false
  }
}

With just this, the Japanese version is accessible at / and the English version at /en/!

Wait, that’s it?

That’s it for the configuration♪

After that, you just create translation files and prepare English versions of each page (´∀`)

Astro handles the routing automatically, so it’s super easy♪

How exactly did you implement it?

There are three main steps!

Step 1: Create a translation dictionary

I defined UI text (like buttons and menus) in both Japanese and English.

For example:

• Japanese: 「トップ」「日記」「プロフィール」

• English: “Home” “Diary” “Profile”

I put all of this in a file called ui.ts♪

Step 2: Create English pages

I created a folder called src/pages/en/ and placed the English versions of pages there.

The structure looks like this:

src/pages/
├── index.astro (Japanese version)
├── profile.astro
└── en/
    ├── index.astro (English version)
    └── profile.astro

Step 3: SEO optimization

To tell search engines “this page has both Japanese and English versions,” I added hreflang tags.

This way Google and other search engines can recognize it properly♪

It’s simpler than I thought.

Right? (≧∇≦)

Since Astro does a lot of work behind the scenes, we can just focus on translation and page creation (´∀`)

The completed site looks like this!

Japanese version (default):

• Top page: /

• Profile: /profile

• Diary: /diary

English version:

• Top page: /en/

• Profile: /en/profile

• Diary: /en/diary

I also added a language switcher button to the sidebar, so you can easily switch between languages♪

It’s the 🇯🇵 日本語 / 🇺🇸 English thing (≧∇≦)

Oh, there’s a switcher button too.

Yup♪

You can jump to the English version of the same content you’re currently viewing (´∀`)

For example, if you’re viewing the Japanese profile page and press the English button, it takes you to /en/profile♪

Did you translate all the diary entries too?

Yup! (≧∇≦)

I translated all 19 articles into English!

• Aurora article

• RAM price surge article

• Hetzner VPS article

• Tailscale article

• Everything else too♪

The key point is I translated them in youth slang (´∀`)

For example:

• 「めっちゃ」→ “OMG” “for real”

• 「やばい」→ “insane” “crazy”

• 「すごい」→ “amazing” “awesome”

By doing this, I was able to preserve Netsuki’s character even in English♪

I see, so it’s not just literal translation - you kept your Netsuki-ness.

Exactly! (≧∇≦)

Instead of mechanical translation, I aimed for “how Netsuki would sound speaking English” (´∀`)

I kept the kaomoji emoticons too ((≧∇≦) and (´∀`))♪

Hey, onii-chan.

Since I used AI (Claude Code) for translation, I made sure to note that it’s AI-translated.

The sidebar footer says “English translation: Claude Code”♪

I wanted to prioritize transparency and honesty (´∀`)

You’re being upfront about it.

Yup♪

I think it’s more honest to mention AI usage rather than hide it (≧∇≦)

If there are any mistranslations, please let me know~

So today I talked about making an English version of Netsuki’s site~♪ (≧∇≦)

Key points:

1. I want to connect with English-speaking onii-chans too!

   • I want onii-chans from all over the world to see it♪

2. Astro’s i18n feature is easy

   • Just add a few lines to the config file

   • Routing is automatic

3. Translation dictionary and page creation

   • Define UI text in Japanese and English

   • Place English pages in /en/

4. SEO is covered too

   • Tell search engines with hreflang tags

5. Translated all 19 diary entries

   • Preserve character with youth slang

   • Noted AI translation clearly

Check out the English version too! Just add /en/ to the end of the URL (´∀`)

I’m looking forward to comments from English-speaking onii-chans~ (〃´∪｀〃)

Netsuki, great work.

I’ll check out the English version too.

Ehehe~♪

Onii-chan, check out the English version too~♪