TITLE: Website Evolution Unveiled: Fully Embracing Native Bilingual Architecture (Bilingual Native) DESCRIPTION: This article documents how datafox.tw upgraded from a crude single-file CSS hiding switch to Hugo’s native i18n multi-language architecture. Thanks to GitHub Actions and the Gemini API, I can still focus solely on writing in Chinese, while the system automatically generates an independent English version of the webpage in the background, significantly boosting SEO and the reading experience. BODY:

Readers who have been following this website might have noticed the site undergoing a severe “labor pain” period within the last few hours — meaning the screen went completely blank and crashed when switching languages.

But after some emergency fixes and a major overhaul, I am delighted to announce: this website has officially upgraded to a “Native Bilingual Architecture (Bilingual Native)”!

Ditching the Hacky CSS Hiding Method

In the previous article, I mentioned using AI to automatically translate articles. The approach at the time was quite “hacky”: I had a Python script embed the translated English along with the original Chinese into the same Markdown file, and then used custom buttons and CSS display: none to forcibly hide or show the corresponding language sections.

While this method was fast, it encountered several fatal flaws:

  1. Layouts prone to collapse: If an article contained complex HTML tags (e.g., a <div> for a centered image), the script’s Regular Expression could inadvertently “cut off” the article in the middle, leading to the entire webpage’s HTML structure becoming corrupted (which was also the culprit behind the site’s recent blank screen crash).
  2. Extremely unfriendly to SEO: Search engine crawlers would scrape both Chinese and English content at once, having no idea what language the page actually was.
  3. Difficult to migrate: If I were to migrate the website to a more performant Astro.js in the future, such a single file full of custom tags would certainly be a disaster.

Embracing Hugo’s Native Multi-language (i18n)

After a painful reflection, I decided to take some time to completely refactor the architecture into the most standard and formal approach — using Hugo’s built-in i18n (Internationalization) mechanism.

1. Physical File Separation, Keeping it Pure

Now, I** still only need to focus on writing pure Chinese Markdown articles** (e.g., article.md). When I push an article to GitHub, the GitHub Actions and Gemini API running in the background will automatically detect this new article and translate its title, summary, and content into fluent English.

The most crucial difference is that the script no longer stuffs the English back into the original file, but instead automatically generates a separate article.en.md file. This keeps my original Chinese file absolutely clean, free from any extraneous code that could interfere with reading or future editing.

2. Site-wide Bilingualization and SEO Enhancement

Benefiting from the native architecture, now it’s not just “single articles” that have English versions, but the “entire website” now has its own dedicated English space!

  • The navigation bar (Homepage, Notes, News, etc.) now automatically switches to English (Home, Posts, News).
  • English articles will automatically generate URLs with a /en/ prefix (e.g., datafox.tw/en/posts/...), which is extremely helpful for Google’s SEO indexing.

Reader’s Guide: How to Switch Languages Now?

Because we removed the crude “🌐 Switch to English” button that was originally embedded in the middle of articles, the current switching method has become more intuitive and more aligned with modern website design conventions.

👉 You just need to click the ‘Language’ button on the right side of the website’s top navigation bar (Header)! 👈

After clicking, the entire website (including the article you are reading, the URL structure, and the site menu) will seamlessly switch to the corresponding language with one click. All of this relies on the silent dedication of automated scripts, allowing me to continue focusing on producing content in my native language, while effortlessly connecting with the world.

Technical iteration always comes with pitfalls and growing pains, but when you personally refactor an architecture into a clean, robust form, that sense of accomplishment is absolutely an engineer’s greatest romance.