Starter templates

Astro Multilingual Starter

A starting point for developers looking to build a multilingual website with Astro and the open-source Rosey translation workflow, using Bookshop components in CloudCannon.

Astro Multilingual Starter
Astro +

What you'll get

Framework: Astro, Rosey
Use case: Boilerplate, Business, Documentation, Education, Multilingual
CSS: Tailwind CSS
CMS: CloudCannon

Bonus features

Video tutorial

Bookshop

Translatable snippets

View on Github

This repository extends the CloudCannon Astro Starter, by coming fully set up to use the rosey-cloudcannon-connector npm package with Rosey, to manage multilingual content in CloudCannon.

Getting Started

  1. Click Use this template to create your own copy of the repository.
  2. Change the placeholder values in the rosey/rcc.yaml to what you need, and your changes to the repo.
  3. Create a site on CloudCannon from the repo.
  4. Edit translations - via the WYSIWYG editor for the blog post translations, and the translations data collection for the rest of the site.
  5. Save and rebuild, and see translations on the live site.
  6. Start adding/changing components and layouts to suit your needs, tagging elements for translation along the way.

Local Development

To run dev server locally:

npm i
npm start

Commands

All commands are run from the root of the project, from a terminal:

CommandAction
npm installInstalls dependencies
npm run devStarts local dev server at localhost:4321
npm run buildBuild your production site to ./dist/
npm run astro ...Run CLI commands like astro add, astro check
npm run astro -- --helpGet help using the Astro CLI