Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 25 additions & 4 deletions src/content/docs/en/guides/cms/cloudcannon.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
[CloudCannon](https://cloudcannon.com) is a Git-based headless content management system that provides a visual editor for your content and UI components, providing a rich, live editing experience.

:::tip
If you're starting a project from scratch, you can use the [CloudCannon Astro Sendit Template](https://cloudcannon.com/templates/sendit/?ssg=astro) with commonly used CloudCannon features to cut down on setup time.
If you're starting a project from scratch, you can use the [CloudCannon Astro Component Starter Template](https://astro-component-starter.cc) with 40+ prebuilt components set up for CloudCannon visual editing to cut down on setup time.
:::

## Integrating with Astro
Expand All @@ -28,16 +28,16 @@ This guide will describe the process of configuring CloudCannon as a CMS for Ast

The Site Dashboard provides you with an organized view of your Astro files and the ability to edit them using:

- A [Data Editor](https://cloudcannon.com/documentation/articles/the-data-editor/) for managing structured data files and markup.
- A [Content Editor](https://cloudcannon.com/documentation/articles/the-content-editor/) for WYSIWYG rich text editing in a minimal view.
- A [Visual Editor](https://cloudcannon.com/documentation/articles/the-visual-editor/) for an interactive preview of your site, allowing you to edit directly on the page.
- A [Content Editor](https://cloudcannon.com/documentation/articles/the-content-editor/) for WYSIWYG rich text editing in a minimal view.
- A [Data Editor](https://cloudcannon.com/documentation/articles/the-data-editor/) for managing structured data files and markup.

You can also configure role-based access to a minimal [Source Editor](https://cloudcannon.com/documentation/articles/the-source-editor/), an in-browser code editor for making minor changes to the source code of your files.

## Prerequisites

1. A CloudCannon account. If you don’t have an account, you can [sign up with CloudCannon](https://app.cloudcannon.com/register).
2. An existing Astro project stored locally, or on one of CloudCannon's supported Git providers: GitHub, GitLab, or Bitbucket. If you do not have an existing project, you can start with CloudCannon's [Astro Starter Template](https://cloudcannon.com/templates/astro-starter/).
2. An existing Astro project stored locally, or on one of CloudCannon's supported Git providers: GitHub, GitLab, or Bitbucket. If you do not have an existing project, you can start with CloudCannon's [Astro Component Starter](https://astro-component-starter.cc).

## Configure a new CloudCannon Site

Expand Down Expand Up @@ -260,10 +260,31 @@ CloudCannon allows you to [define Component Editable Regions](https://cloudcanno
```
</Steps>

## Agent Skills for CloudCannon

CloudCannon has published an [open-source set of skills for AI coding agents](https://github.com/CloudCannon/agent-skills). They handle new Astro site migrations for you: auditing your content, writing the config, adding visual editing with editable regions, and verifying the build. The skills are composable, so you can choose to run a full migration or pull in just one piece, like adding visual editing to an Astro site that's already on CloudCannon.

<Steps>

1. Run `npx skills add CloudCannon/agent-skills --all` in the root of your project

2. Open your project in your AI coding agent

3. Ask the agent to migrate your site to CloudCannon:

```
Migrate this site to CloudCannon using the migrating-to-cloudcannon skill. If the skill is not found, look in .agents/, otherwise do not continue.
```

</Steps>

## Official Resources

- [CloudCannon: The Astro CMS](https://cloudcannon.com/astro-cms/)
- [Astro Component Starter](https://astro-component-starter.cc/)
- [Astro Jetstream Template](https://cloudcannon.com/templates/jetstream/?ssg=astro)
- [Astro Sendit Template](https://cloudcannon.com/templates/sendit/?ssg=astro)
- [Agent Skills for Astro and CloudCannon](https://github.com/CloudCannon/agent-skills)
- Video: [Getting started with Astro and CloudCannon CMS: WYSIWYG blogging](https://www.youtube.com/watch?v=VCbZV-SCr20)
- Video: [Using CloudCannon's configuration mode](https://www.youtube.com/watch?v=3OOyYcPD46Y)
- Video: [Visually edit your Astro site](https://www.youtube.com/watch?v=RMbPsyJ5Gms)
Loading