If you’ve been looking for an alternative to Netlify CMS for your Hugo, Eleventy, Jekyll, Gatsby, Next.js, NuxtJS, Astro, SvelteKit, or MkDocs static sites, CloudCannon is here to help. CloudCannon is a Git-based CMS which powers thousands of websites for Fortune 500 companies, digital agencies, freelance developers, and global businesses.
Like Netlify CMS, CloudCannon is Git-based, so your site files are always securely stored in your GitHub, GitLab, or Bitbucket repositories. CloudCannon also offers a wide range of content editing options, from our intuitive Visual Editor to the Markdown-centric Content Editor, as well as the Data Editor and Source Editor for quick access to all of your site files.
CloudCannon shares many similarities with Netlify CMS, making for an easy migration for both developers and content editors alike. This post details how key Netlify CMS features and concepts translate to CloudCannon, and guides developers through the steps they will need to take to make the transition.
Our team of developers is available now to help with migrating your static sites over to CloudCannon. We’d love to chat about your use case, and show you more about what CloudCannon has to offer — feel free to get in touch with any questions, or book a no-obligation demo call.
CMSs exist to help non-technical editing or content teams manage a website’s contents. And the more simple editing experience a CMS can provide, the more your editing teams will be empowered to make their content updates without the help of a developer. CloudCannon puts the editor’s experience first and foremost, with a fully-featured Visual Editor that developers can configure for optimal editing.
With CloudCannon, content writers can write and update content directly on their websites — what could be more intuitive than that?
Markdown is fantastic, but it can be restrictive when it comes to complex marketing content, especially if content editors or clients prefer a visual approach. That’s where using components — which can be pieced together to build a page — are a great help. On CloudCannon, components are called array structures. You start by defining a label and the data fields in your component, and you’re free to use the full range of field types available on CloudCannon; you can even nest array structures! Once configured, editors can use these components to easily build pages by assembling their content in intuitive blocks.
Just like Netlify CMS, CloudCannon is a Git-based CMS, with support for GitHub, GitLab, and Bitbucket. All changes in your repository automatically sync to CloudCannon, and all changes editors make will commit back to the repository. We give all editors the full power of Git when it comes to drafting, reviewing, and publishing — all without needing to know exactly how Git works. Editors on CloudCannon can create copies of sites by branching to make large-scale changes, then review their content on staging sites, and publish by a branch merge or pull request at a later date.
All sites on CloudCannon have access to reliable, high-performance hosting through our partner Cloudflare. But if you’re already using Netlify to host your production site, you don’t need to change your build and deploy settings — just connect CloudCannon to the same repository that Netlify uses. If you’d like to set up a staging environment for a pre-publication review process, our built-in hosting can be used before you pushing approved changes to your production site — but ultimately the choice is yours.
You can start testing CloudCannon and transferring your sites from Netlify CMS in a few minutes:
Like Netlify CMS, CloudCannon is a Git-based CMS. To start, sign up to CloudCannon, click “Add new site”, and select “Connect your own files.”
Create a name for your site.
Select a source for your website files. CloudCannon supports two-way Git syncing with GitHub, GitLab, and Bitbucket. Once you’ve selected your Git provider, you’ll need to authenticate it to CloudCannon.
From here, select the repository and branch that is connected to your site on Netlify CMS. If you want to test CloudCannon out without impacting the live Netlify CMS site, select “Create New” in your branch setup to create a new branch. You can always merge it to your production branch at a later date.
CloudCannon will automatically connect to your SSG and set configuration details based on your file structure. Review this configuration and make any tweaks for your project.
When your build succeeds, you’re ready to start configuring the editing. Otherwise, tweak your build options until you get it working. You can always reach out to our helpful support team if you need help with any steps along the way.
When you configured your site on Netlify CMS, you will have set up and customized your CMS sidebar, media paths, and your content model. These settings will be stored in your Netlify CMS
config.yml file — usually stored in
/admin/. CloudCannon stores these settings in a
cloudcannon.config.\* file (JSON, YML, JS, and CJS are all supported), in your root directory.
Here’s how the major steps work on CloudCannon:
Set up content sections for the site sidebar
CloudCannon will automatically detect the pages, collections, and data files for most Hugo, 11ty, and Jekyll sites. In addition to this, you can customize the icon each content section displays with, the sort order, whether new items can be added, and other options to fine-tune the sidebar.
You can also define custom collections, choose which collections are shown in the sidebar, and override the automatic CloudCannon detection, if you’d prefer.
Other SSGs don’t have strong conventions around folder structure, so while CloudCannon can’t automatically detect site content, the configuration is straightforward, at a minimum defining the path to the content folder and name.
Set up correct paths for media and DAM files
By default on CloudCannon, files are uploaded to a folder called
/uploads/ in your source directory; when a DAM is selected, files will be uploaded to
/dam\_uploads/ by default. You can override this with configuration to your own paths and even add your own variables like
:categories to keep things organized.
CloudCannon configuration works as a cascade. You can set global defaults and override them for specific collections or files, which gives you complete control over how each file is edited.
Configure your content model
Your content model dictates how content editors manage all the structured content across the site. In Netlify CMS, you will have built out your collections setting, which determines how content types and editor fields generate files and content.
CloudCannon has similar functionality with different terminology. There are three ingredients for creating flexible content models:
Conveniently, all default Netlify CMS Widgets except Map have a corresponding Input type or option on CloudCannon:
|Netlify CMS Widgets||CloudCannon Inputs|
|List||Array (plain) and Structures (configurable)|
|Map||No default equivalent (yet — it’s on our roadmap!)|
|Relation||Select and Collections|
A sample CloudCannon config file might contain the following:
# Global CloudCannon configuration
comment: The title of your page.
# Base path to your site source files
# The subpath your built output files are mounted at
# Populates collections for navigation and metadata in the editor
# Base path for files in this collection, relative to source
# Whether this collection produces output files or not
# Collection-level configuration
name: Main pages
# Generates the data for select and multiselect inputs matching these names
# Populates data with authors from an data file with the matching name
# The default location for newly uploaded files, relative to source
# The path to site data files, relative to source
# The path to site layout files, relative to source
See our documentation for video overviews of Inputs and global configuration, and a full list of all the options available to you.
Once your global config file is complete, you’re all set! Now let’s move on to making this site really sing, for everyone on your team.
CloudCannon provides a basic level of editing by default. To fine-tune intuitive editing options for your content editors or client sites, depending on your use case and users’ technical abilities, you can look at the following configurable options:
Oh, and one more thing…
We’ve created an open-source framework called Bookshop to speed up development and reduce maintenance for component-based websites. It natively supports the templating engines of Jekyll, Hugo, and Eleventy, so it’s a small learning curve if you’re already using these SSGs. The real magic comes with its tight integration with CloudCannon, which enables visual editing of content populated from front matter. If you’re getting started with CloudCannon, we’d highly recommend adding Bookshop to your workflow.
Why use a CMS without a team to share it with? You can now invite everyone who needs access to the site, including clients, content editors, marketers, and developers. Guide them through the editing interfaces and they’ll be up to speed in no time.
When a developer pushes a change to the repository or a content editor updates content on CloudCannon, CloudCannon automatically starts a build. When the build completes, it’s pushed to CloudCannon’s production-grade global hosting which ranks among the fastest and most stable in the world. All sites on CloudCannon come with their own generated domain name which you can use as a testing or staging environment, or you can point your own domain at CloudCannon’s servers for your production website.
CloudCannon · 1 Jun 2023
Jaimie McMahon · 16 May 2023
David Large · 5 May 2023