Getting started with CloudCannon

Learn how to get your website set up on the CloudCannon CMS.

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.

You're currently viewing the universal guide, but a more specific guide exists for .
Check out the for a tailored onboarding experience.

What is CloudCannon?#

CloudCannon is a Git-based Content Management System that works with Static Site Generators (SSGs). With CloudCannon, you can easily build and maintain your site using familiar Git workflows. Plus, your content team can effortlessly update and manage the content without knowing anything about Git, Markdown, or HTML.

Setting up your site#

Syncing to CloudCannon#

If you haven’t already, sign up for CloudCannon and create a new site using the Build with your own files option.

An app pop-up with two options for creating a new site in CloudCannon, Edit with a template or Build with your own files.

Enter a site name and select the Git platform your site lives on. CloudCannon supports GitHub, Bitbucket, GitLab, and self-hosted GitLab. If this is your first time using CloudCannon, you must give CloudCannon permission to access the Git platform.

A screenshot of the CloudCannon app shows a field for your new site's name and a dropdown menu to select your git platform.

After confirming your Git platform, the repository field will list all the available repositories on your account. Select your site repository.

A screenshot of the CloudCannon app shows a field to select your new site's git repository.

Select an existing branch or create a new one. Most likely, you will want to select Use existing. However, if you want to try CloudCannon without impacting your main branch, select Create new.

A screenshot of the CloudCannon app shows a new or existing branch selector and a dropdown menu to select an existing branch.

Click Sync Files at the bottom right.

Building your site#

CloudCannon only supports building and hosting for fully static websites. Where server-side rendering is not supported, static content in your git repository can still be edited in the CMS.

CloudCannon will try to auto-detect which static site generator your repository is using. If you are using a custom SSG, or one that CloudCannon does not support, the dropdown menu will display Custom.

Enter the necessary build options so your site matches your local build environment. If you have a custom source directory or require environment variables for parts of your build, enter them here.

A screenshot of the CloudCannon app shows drop-down menus for confirming your SSG and build settings.

Some important things to consider include:

  • Any required environment variables.
  • Install Command: Configure the command to install dependencies before the build. By default, this runs npm install. This is run as a line of bash and can be anything you want. A common change here is to use yarn install instead, or the install command for your custom SSG's toolchain.
  • Build Command: Configure the command to build your site. By default, this runs npm run build.
  • Output Path: Configure the path to the output folder you are building into. CloudCannon needs to know which folder to treat as the static output of your site. By default, CloudCannon will look for a public directory.

Once you have finished, click Build Site.

A screenshot of the CloudCannon app shows a green tick to indicate that your build was successful.

If your site builds successfully, you are ready to go on CloudCannon! As a bonus, CloudCannon also provides hosting. You can now access the live preview version of your site (not indexed by search engines) by clicking on the Live site preview button in the top left of the app. This will take you to your unique .cloudvent.net address.

Your new adjective-noun.cloudvent.net site will give you a preview after every change. Share this URL to show off your new site before your changes go live!

If your site fails to build, you will have some debugging work to do. Read the build output or check the Status page to see the suggested fixes for your site. Double-check your build settings and try again.

If the site returned a 404 on the index, you might have set the wrong output path. This can indicate that no files were present in the configured folder.

You may need to run extra commands before or after your build to get your site in the right state. For example, you may need to install npm packages for your site.

On CloudCannon, you can run extra commands at different points of the build using a build hook. For more information, see the build hook documentation.

If you can’t figure out why your site failed to build, don’t hesitate to get in touch with our support team. We’re always here to help.

CloudCannon Reader#

If you're reading your build logs in CloudCannon, you'll see a build step that runs @cloudcannon/reader after your SSG.

CloudCannon Reader is the tool that scans your global configuration file and processes your collections. This tool runs automatically, so there isn't anything you need to do.

If you want to look under the hood or customize your config further, Reader is open-source on GitHub at CloudCannon/reader.

Open in a new tab