In this article, we'll explore how I built a localised website for a client of mine using 11ty, Sanity, and Netlify. Recently, I had the task of converting the SLR website from a single global site to one with seven variations tailored to different regions (Europe, APAC, USA, etc.). This required a custom setup, so I wanted to share a bit about the process and the stack I settled on!
1. Understanding the Stack
Before diving into the implementation, let's understand the tools at our disposal:
- 11ty: A simple yet powerful static site generator that allows for flexible configuration and easy integration with various data sources.
- Sanity: A headless CMS that provides structured content management capabilities, essential for managing multilingual content.
- Netlify: A cloud platform that offers hosting, continuous deployment, and serverless backend services, including routing and proxying.
2. Leveraging Sanity for Multilingual Content Management
Sanity provides a robust framework for managing multilingual content through its internationalisation features. By structuring content models to support multiple languages and locales, we can easily manage translations and localisations for different regions.
Utilising the document-internationalization plugin, we can define language-specific documents within Sanity's schema, allowing content authors to input translated pages directly within the CMS interface.
3. Dynamic Data Retrieval with Environment Variables
To pull data dynamically based on the user's region, we can utilise environment variables within our project. By defining variables such as REGION=x-default in a .env file, we can configure our site to fetch content specific to the default region or dynamically switch between regions based on user preferences.
4. Setting Up Netlify Proxy for Regionalised Subfolders
To create regionalised subfolders such as /eur/ for Eurozone content, we can utilise Netlify's proxying capabilities. By adding a _redirects file with rules like:
/eur/* https://yoursite-eur.netlify.app/:splat 200
/apac/* https://yoursite-apac.netlify.app/:splat 200
/usa/* https://yoursite-usa.netlify.app/:splat 200We can seamlessly direct users to the appropriate content based on their region.
5. Implementation with 11ty
With our setup in place, we can now proceed to build our localised site using 11ty. By integrating Sanity as a data source and utilising Netlify's proxying and environment variable features, we can create a seamless experience for users across different regions.
Benefits of the setup
By using this approach, we get quite a few benefits, including:
- Smaller size sites
- Quicker builds
- Parallel builds
- Clean seperation of content
- More control over the language at build time rather than runtime
Conclusion
Building a localised website requires careful planning and the right set of tools. By combining 11ty's flexibility, Sanity's content management capabilities, and Netlify's powerful hosting and routing features, developers can create dynamic and personalised experiences for users around the world.
Through effective use of Netlify Proxy for regionalised subfolders, Sanity for multilingual content management, and environment variables for dynamic data retrieval, we created a perfect setup that works perfectly for SLR.
If you're looking for a Jamstack developer, then I'd love to help! Or if you're looking to find out more about our work with SLR, view the SLR case study.