<link rel="stylesheet" href="/css/editor.css"> Getting Started with This Boilerplate | Multilingual Astro Boilerplate
A laptop with code on the screen in a modern workspace

Getting Started with This Boilerplate

Boilerplate Team

January 15, 2025

188 words

1 minute

Welcome to your new multilingual Astro boilerplate! This guide will help you get up and running quickly.

What’s Included

This boilerplate combines several powerful tools to give you the best development experience:

  • Astro: Lightning-fast static site generator with partial hydration
  • Bookshop: Component-driven development with visual editing
  • Rosey: Automatic translation file generation and multilingual site building
  • CloudCannon: Visual CMS with git-backed content management
  • Tailwind CSS: Utility-first CSS framework for rapid styling

Quick Setup

  1. Clone this repository to your local machine
  2. Run npm install to install dependencies
  3. Run npm run dev to start the development server
  4. Open your browser to http://localhost:4321

Creating Components

All components live in the src/components directory. Each component should have:

  • An .astro file with your component code
  • A .bookshop.yml file defining the component schema
  • Rosey translation tags on all user-facing text

Check out the existing components for examples of proper structure and best practices.

Deploying to CloudCannon

When you’re ready to deploy:

  1. Push your code to GitHub
  2. Connect your repository to CloudCannon
  3. Set the SYNC_PATHS environment variable to /rosey/
  4. Build your site and start editing!

CloudCannon will automatically generate translation files on each build, making it easy to manage multilingual content.

Recent Posts