Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.
Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.
Let's take a look at a site hosted through CloudCannon: Sendit!
Our Sendit template is an open-source site for multiple SSGs, available through GitHub. You can see a list of our available templates by selecting 'Edit with a template' when you launch a new site. For now, we'll use Sendit to show you around the CloudCannon app, but feel free to explore the site as we go.
Site navigation#
Dashboard#
The CloudCannon dashboard gives you an overview of your site. Here, you can preview your home page, your live URL, and view recent activity site-wide with a list of git commits.
The Activity tab shows more paginated site activity in reverse chronological order.
The Usage tab shows your current bandwidth and build time utilization. If your plan has limited build time, you can use this tab to monitor your usage allowance.
Collections#
Your collections are listed in the sidebar. Collections are groups of related content.
Each collection corresponds to a folder in your site files. Navigating to a collection shows a preview of each file and lets your team members see all the content at a glance.
Developer Tools#
All your team members can access the Dashboard and Collections views. Developer tools are only visible to team members with specific permissions.
- Status — Shows the current status of your Git sync, previous syncs, and build output.
- Files — Opens a browser containing all the source files on the site.
- Settings — Allows you to configure your build settings, hosting, sharing, and other site settings.
We will discuss permission levels more in the Collaboration section of this guide.
Editing interfaces#
We’ll go deeper into how to configure the CloudCannon editors later in this guide. For now, here’s an overview of each one.
Visual Editor#
The Visual Editor is the most intuitive way to edit content on CloudCannon, with editable elements indicated on a preview of your site. Your content team can click on any editable element to change its content and see those changes as they would appear live.
The Visual Editor also features a sidebar for managing front matter content. You can customize these inputs to give your editing team a more intuitive interface. For example, add a date picker for a date field, including a small comment to indicate how a field should be used, or use a select box to reference other pages on the site or data in a data file.
Content Editor#
The Content Editor is a rich text editor for Markdown files. This editor is useful if you want a distraction-free, clean writing interface, particularly for blog posts and other content with a simple layout. The Content Editor view also shows the Data Editor in the left-hand panel, as pictured below.
The Content Editor supports managing structured data via Snippets.
Data Editor#
We have already seen the Data Editor — the sidebar for managing front matter in the Visual and Content Editor. The Data Editor also manages content in YAML, TOML, JSON, CSV, and TSV files.
Source Editor#
The Source Editor is an in-browser code editor, great for making small, quick changes. As with all the Editors, any changes sync back to your Git repository.
