Tour CloudCannon

A brief tour of the pages and features on CloudCannon.

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.

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.

A screenshot of the Dashboard view in the CloudCannon app shows a preview of your home page, live URL, and recent 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.

A screenshot of the Usage tab in the CloudCannon app shows a bandwidth utilization graph for each day this month.

Collections#

Your collections are listed in the sidebar. Collections are groups of related content.

A screenshot of the Collections view in the CloudCannon app shows a preview of all the pages tagged as blog posts on the example website.

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.

For sites built with Eleventy, CloudCannon automatically finds likely collections and adds them to your sidebar. This could include a folder of blog posts. CloudCannon will also configure two collections called Pages and Data.

The Pages view lists the pages on your site. Clicking on a page will open it in one of the editing interfaces based on the file extension.

A screenshot of the Pages view in the CloudCannon app shows a preview of all the pages on the example website.

The Data tab shows all your data files. Clicking on a page will open it in one of the editing interfaces based on the file extension.

A screenshot of the Data view in the CloudCannon app shows a list of data files for the example website.

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.

A screenshot of the Visual Editor in the CloudCannon app shows a pop-up for editing content in a live preview of the home page.

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.

A screenshot of the Visual Editor in the CloudCannon app shows a sidebar for editing front matter content for the home page.

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.

A screenshot of the Content Editor in the CloudCannon app shows the copy for a blog post and a sidebar for editing front matter content.

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.

A screenshot of the Data Editor in the CloudCannon app shows editable fields for a data file.

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.

A screenshot of the Source Editor in the CloudCannon app shows the content of a markdown file opened in a code editor.

Open in a new tab