Localize your Netlify site in 5 minutes

A little while ago I created GitSheet https://gitsheet.wtf – a dead simple reference of git commands. In its core GitSheet is a JAMstack site. In case you were wondering, the jam stands for Javascript, APIs and Markup. The site is re-generated and updated automatically on every push to master and deployed to CDN edge nodes (or in layman’s terms, physically as close to the user loading up the site) made very simple through the brilliant pipeline offered by Netlify. When a fellow on twitter offered to translate the site to Japanese I knew I wanted a dead simple way to provide localized versions of the site so that a visitor from Japan would see the Japanese version living at https://ja.gitsheet.wtf while everyone else would be served the English variant.

Redirects to the rescue!

With Netlify you can handle these requests with GeoIP- and language-based redirects directly from their CDN nodes.

In GitSheet the Japanese version of the site lies in a ja/ folder.

Adding a redirect to /ja from people visiting from Japan is as simple as defining a following redirect in netlify.toml file in the project.

[[redirects]]
  from = "/"
  to = "/ja"
  status = 302
  conditions = {Country = ["JP"]}

I’m using a 302 status code which in HTTP-land means a temporary redirect. That tells the client that the current address change is temporary. The URL in the browser address bar will display the new address.

The Country attribute accepts ISO 3166 country codes so you can set up rules for any country you wish. They also support language based redirects based on what language is the visitor’s browser in.

You can use a tool like https://www.webpagetest.org to test how the site looks like when visited from different parts of the world.

Happy hacking!

πŸ‡―πŸ‡΅ πŸ‡¬πŸ‡§


If you enjoyed what you read, please stick around. Let me know on twitter or write me on Telegram β˜•οΈ.