How the Automated Translation System Works on an Astro Site

Introduction

This article explains the mechanism for automatically translating and publishing content written in Japanese into English on a site built using the static site generator “Astro”. While manual multi-language support involves significant costs, implementing this system aims to reduce the operational burden and support global expansion.

System Configuration

This system is built by coordinating several key technical elements:

• Site Building Tool: Astro is used to generate static HTML.
• CI/CD: GitHub Actions automates the pipeline from code updates to deployment.
• Translation API: The DeepL API is used to translate Japanese content into English.
• Hosting: Services like Cloudflare Pages are utilized to publish the generated site.
• Execution Environment: Scripts using the Node.js environment are used for the translation process.

Each element is independent, with GitHub Actions serving as the central coordinator to achieve a consistent operational flow.

Translation and Publishing Flow

The process until content is published is fully automated:

1. Content Update: The author creates a Japanese article and pushes it to the main branch.
2. Workflow Trigger: The push triggers a GitHub Actions workflow.
3. Translation Process: A translation script runs within the workflow, sending requests to the DeepL API only for modified files.
4. File Generation: English content files are automatically generated based on the translation results returned from the API.
5. Build and Deployment: The entire site, including both Japanese and English versions, is built and deployed to the hosting service for publication.

Through this series of processes, the multi-language version is published within minutes of the article update.

Site Structure and Language Switching

Content management and URL design within the site are clearly separated for each language:

• Directory Structure: Japanese and English articles are managed in separate directories. English files are placed in an area automatically generated by the translation script.
• URL Scheme: The Japanese version is accessible via standard paths (e.g., /blog/), while the English version is accessible via URLs with a language path (e.g., /en/blog/).
• Language Switching: A language switching component is implemented on each page, allowing users to switch languages with a single click if a version in another language corresponding to the current page exists.

Operational Considerations

Even with an automated system, there are several points to keep in mind during operation:

• Translation Accuracy: Since machine translation is used, contextual misunderstandings or mistranslations of technical terms may occur. It is recommended to manually review important announcements after publication.
• API Usage Limits: The free plan of the translation API has monthly character limits. When updating a large amount of content at once, planning is necessary to avoid reaching these limits.
• Build Time: Including the translation process makes the build take longer than usual. Depending on network conditions and content volume, it may take several minutes for deployment to complete.

Summary

By introducing an automated translation system to an Astro site, it becomes possible to provide multi-language support while maintaining consistency in update history and reducing the effort of manual translation. This approach of using a CI/CD pipeline to automate everything from content updates to publication is an effective operational model for those aiming for efficient global expansion.