Now that you can build your translated site with Rosey locally, we want to get the same build process working on CloudCannon. We'll add a postbuild step using build hooks.
Recall that using Rosey in our postbuild can cause issues for the Visual Editor. To get around this, we'll only run Rosey on our production site. This works because we don't want to directly edit the production site anyway, and we may not need to see all the translated content on the staging site where we're editing. If you do need to preview translations on your site before they go live, you can create another site connected to the staging branch which also runs the postbuild!
Add a .cloudcannon/postbuild script to run Rosey after every build on CloudCannon. We'll use an environment variable to tell our script whether to run Rosey or not.
if [[ $TRANSLATE == "true" ]];
then
echo "Installing Rosey"
npm install
echo "Translating site with Rosey"
# There's a little bit of shuffling around here to ensure the translated site ends up where CloudCannon picks up your site
mv ./_site ./_untranslated_site
npx rosey@latest build --source _untranslated_site --dest _site
fi
It's best to explicitly specify which version of Rosey you want to run, to ensure your CloudCannon build matches your local development environment. Consider adding rosey as a dependency in your package.json.
On our production site, we'll add an environment variable TRANSLATE with the value true. You can do this in the Command Line Options menu in the Configuration section of your site settings.
Your site should be now translated on CloudCannon! 🎉 If you were previously using CloudCannon i18n, you can switch it off in your build settings.