Tour CloudCannon

Let's take a tour of CloudCannon!

Your Site Navigation is the gray sidebar on the left of the app, next to your App Navigation. The Site Navigation sidebar contains information and tools you will use often.

Your Site Navigation contains:

• Projects dropdown — If your Site is part of a Project, the Projects dropdown shows you which Project your Site belongs to and which Sites (if any) it publishes to.
• Site icon, Site name, and branch name — These are your basic Site details, so you know which Site you are editing.
• Avatars — The avatars for any team members active on your Site. Clicking on an avatar will show a list of files they have open, with an eye icon for file they are Viewing and a pencil for Editing.
• The Save button — Opens the Review your changes modal and allows you to commit changes to your Git repository.
• The Publish button — If your Site has a publish branch, this button allows you to create a Pull Request or immediately merge your changes from this Site to any Sites it publishes to.
• Site Dashboard — Your Site home page, showing recent activity on your Site.
• Collections — Groups of related content, such as a folder of blog articles, Staff Member profiles, or product pages.
• Developer Tools — Tools for managing your Site, including the Status page, file browser, and Site Settings.

The Dashboard is the first item below the Site Navigation header. You Dashboard is the first place you arrive when you open a Site in CloudCannon and gives you and overview of your Site.

There are two tabs on your Dashboard: Summary, and Activity.

On the Summary tab you'll find buttons to open the Publishing page and recently opened files, and a list of recent activity on your Site.

On the Activity tab you'll find more paginated activity in reverse chronological order for every change to your content or settings.

All your Collections are the are listed in your Site Navigation. We encountered Collections in the configuration file section of this guide, but if you need a reminder, a Collection is a group of related content (e.g., a folder of blog article or product descriptions).

Clicking a Collection in your Site Navigation will open the Collection browser. Every file in that collection is represented here by a file card, with a name and metadata for that file. Clicking on a file will open it in one of CloudCannon's editing interfaces.

In Headless Mode, CloudCannon cannot generate preview images of your files (this normally happens at build time). If you don't want to see the "No preview available" placeholder on your files, you can configure your file cards for each Collection.

We'll cover how to configure your Collections further later in this guide.

Under the Developer Tools heading you will find links to the Status page, the file browser, and Site Settings.

You're already familiar with the Status page — it's been your home for onboarding so far! There are two tabs on the Status page: Summary and Syncs.

The Summary tab has a Needs Attention notice if CloudCannon detects an issue with your Site configuration, a Suggestions section for how to configure your Site, and a link to Support. Your most recent Sync and Build are on the right of the page. The Syncs tab shows more logs in reverse chronological order.

The Files item in your Site Navigation will open your file browser. This browser shows all the source files for your Site, using the same file structure as your Git repository.

The Site Settings page is where you will find all your CloudCannon settings. These include your settings for your files, builds, hosting, sharing, and more.

Developer tools are important for managing your Site beyond just it's content. These pages are only available to team members with specific permissions. We'll cover permissions and Permission Groups in the Collaboration section of this guide.

The Visual Editor is the most intuitive way to edit content in CloudCannon, using an interactive preview of your site. You can navigate your pages as you would on your live site and edit directly onto the page.

CloudCannon generates the preview of your Site during build time. As builds are disabled in Headless Mode, this editing interface is unavailable.

The Content Editor is a rich text editor for markup 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. You can configure the WYSIWYG toolbar for your Content Editor to ensure you have all the tools you need and edit structured data in the front matter of your markup files using the sidebar.

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. The Data Editor uses inputs to provide an editing interface for structure data in your files.

The Source Editor is an in-browser code editor, great for making small, quick changes. As with all the editing interfaces, any changes sync back to your Git repository.