Working with a specific static site generator? Customize CloudCannon's documentation to suit your SSG.
Select your preferred SSG
Showing docs
{
selected_name = 'Astro';
selected_icon = '/documentation/static/ssgs/astro.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-astro" aria-label="Astro" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Astro', 'icon': '/documentation/static/ssgs/astro.svg'})" x-show="selected_name !== 'Astro'">
Astro
{
selected_name = 'Bridgetown';
selected_icon = '/documentation/static/ssgs/bridgetown.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-bridgetown" aria-label="Bridgetown" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Bridgetown', 'icon': '/documentation/static/ssgs/bridgetown.svg'})" x-show="selected_name !== 'Bridgetown'">
Bridgetown
{
selected_name = 'Docusaurus';
selected_icon = '/documentation/static/ssgs/docusaurus.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-docusaurus" aria-label="Docusaurus" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Docusaurus', 'icon': '/documentation/static/ssgs/docusaurus.svg'})" x-show="selected_name !== 'Docusaurus'">
Docusaurus
{
selected_name = 'Eleventy';
selected_icon = '/documentation/static/ssgs/eleventy.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-eleventy" aria-label="Eleventy" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Eleventy', 'icon': '/documentation/static/ssgs/eleventy.svg'})" x-show="selected_name !== 'Eleventy'">
Eleventy
{
selected_name = 'Gatsby';
selected_icon = '/documentation/static/ssgs/gatsby.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-gatsby" aria-label="Gatsby" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Gatsby', 'icon': '/documentation/static/ssgs/gatsby.svg'})" x-show="selected_name !== 'Gatsby'">
Gatsby
{
selected_name = 'Hugo';
selected_icon = '/documentation/static/ssgs/hugo.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-hugo" aria-label="Hugo" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Hugo', 'icon': '/documentation/static/ssgs/hugo.svg'})" x-show="selected_name !== 'Hugo'">
Hugo
{
selected_name = 'Jekyll';
selected_icon = '/documentation/static/ssgs/jekyll.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-jekyll" aria-label="Jekyll" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Jekyll', 'icon': '/documentation/static/ssgs/jekyll.svg'})" x-show="selected_name !== 'Jekyll'">
Jekyll
{
selected_name = 'Lume';
selected_icon = '/documentation/static/ssgs/lume.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-lume" aria-label="Lume" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Lume', 'icon': '/documentation/static/ssgs/lume.svg'})" x-show="selected_name !== 'Lume'">
Lume
{
selected_name = 'MkDocs';
selected_icon = '/documentation/static/ssgs/mkdocs.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-mkdocs" aria-label="MkDocs" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'MkDocs', 'icon': '/documentation/static/ssgs/mkdocs.svg'})" x-show="selected_name !== 'MkDocs'">
MkDocs
{
selected_name = 'Next.js';
selected_icon = '/documentation/static/ssgs/nextjs.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-nextjs" aria-label="Next.js" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Next.js', 'icon': '/documentation/static/ssgs/nextjs.svg'})" x-show="selected_name !== 'Next.js'">
Next.js
{
selected_name = 'Nuxt';
selected_icon = '/documentation/static/ssgs/nuxtjs.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-nuxt" aria-label="Nuxt" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Nuxt', 'icon': '/documentation/static/ssgs/nuxtjs.svg'})" x-show="selected_name !== 'Nuxt'">
Nuxt
{
selected_name = 'Static';
selected_icon = '/documentation/static/ssgs/statik.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-static" aria-label="Static" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Static', 'icon': '/documentation/static/ssgs/statik.svg'})" x-show="selected_name !== 'Static'">
Static
{
selected_name = 'SvelteKit';
selected_icon = '/documentation/static/ssgs/sveltekit.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-sveltekit" aria-label="SvelteKit" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'SvelteKit', 'icon': '/documentation/static/ssgs/sveltekit.svg'})" x-show="selected_name !== 'SvelteKit'">
SvelteKit
{
selected_name = 'Custom';
selected_icon = '/documentation/static/ssgs/custom.svg';
$store.conditionals.select('ssg-name', selected_name);
$store.conditionals.select('ssg-icon', selected_icon);
open = false;
$dispatch('ssgchange');
}" aria-controls="docs-ssg-selector-other" aria-label="Custom" aria-selected="false" class="c-docs-ssg-selector__item" role="tab" x-init="$store.conditionals.registerValue('ssg', {'name': 'Custom', 'icon': '/documentation/static/ssgs/custom.svg'})" x-show="selected_name !== 'Custom'">
Custom
Great! We'll show you documentation relevant to . You can change this any time using the dropdown in the navigation bar.
VIDEO
Global configuration files contain your global CloudCannon configuration and top-level values for the configuration cascade .
Configuration is set in one of the following supported file types. CloudCannon will search the root directory for the first matching file from this list.
cloudcannon.config.json
cloudcannon.config.yaml
cloudcannon.config.yml
cloudcannon.config.json
cloudcannon.config.yaml
cloudcannon.config.yml
cloudcannon.config.js
cloudcannon.config.cjs
cloudcannon.config.json
cloudcannon.config.yaml
cloudcannon.config.yml
cloudcannon.config.js
cloudcannon.config.cjs
cloudcannon.config.json
cloudcannon.config.yaml
cloudcannon.config.yml
cloudcannon.config.js
cloudcannon.config.cjs
This file is stored in the root directory of your repository (i.e. /cloudcannon.config.*
). Alternatively, use a specific config file in a custom location using the CLOUDCANNON_CONFIG_PATH
environment variable:
CLOUDCANNON_CONFIG_PATH = src/cloudcannon.config.yaml
The global configuration file is the heart of your integration with CloudCannon. You can create your configuration file locally or using the CloudCannon configuration GUI.
Once you have created your site, CloudCannon will automatically detect if you do not have a configuration file. In your sidebar, you will see the Get started button, which will prompt you to Generate your global configuration file .
The CloudCannon configuration GUI will guide you through creating a configuration file for your website.
Here's an example file:
YAML JSON JavaScript
_inputs :
title :
type : text
comment : The title of your page.
_select_data :
colors :
- Red
- Green
- Blue
source : src
base_url : /documentation
collections_config :
people :
path : content/people
output : true
name : Personnel
_enabled_editors :
- data
posts :
path : _posts
output : true
pages :
name : Main pages
data_config :
authors : true
offices : true
paths :
uploads : assets/uploads
collections : items
data : _data
layouts : _layouts
includes : _partials
{
"_inputs" : {
"title" : {
"type" : "text" ,
"comment" : "The title of your page."
}
} ,
"_select_data" : {
"colors" : [
"Red" ,
"Green" ,
"Blue"
]
} ,
"source" : "src" ,
"base_url" : "/documentation" ,
"collections_config" : {
"people" : {
"path" : "content/people" ,
"output" : true ,
"name" : "Personnel" ,
"_enabled_editors" : [
"data"
]
} ,
"posts" : {
"path" : "_posts" ,
"output" : true
} ,
"pages" : {
"name" : "Main pages"
}
} ,
"data_config" : {
"authors" : true ,
"offices" : true
} ,
"paths" : {
"uploads" : "assets/uploads" ,
"collections" : "items" ,
"data" : "_data" ,
"layouts" : "_layouts" ,
"includes" : "_partials"
}
}
module. exports = {
_inputs : {
title : {
type : "text" ,
comment : "The title of your page."
}
} ,
_select_data : {
colors : [
"Red" ,
"Green" ,
"Blue"
]
} ,
source : "src" ,
base_url : "/documentation" ,
collections_config : {
people : {
path : "content/people" ,
output : true ,
name : "Personnel" ,
_enabled_editors : [
"data"
]
} ,
posts : {
path : "_posts" ,
output : true
} ,
pages : {
name : "Main pages"
}
} ,
data_config : {
authors : true ,
offices : true
} ,
paths : {
uploads : "assets/uploads" ,
collections : "items" ,
data : "_data" ,
layouts : "_layouts" ,
includes : "_partials"
}
} ;
The following is automatically read from Jekyll if not set in the global configuration file:
collections_config
from collections
in _config.yml
paths.collections
from collections_dir
in _config.yml
paths.layouts
from layouts_dir
in _config.yml
paths.data
from data_dir
in _config.yml
paths.includes
from includes_dir
in _config.yml
base_url
from baseurl
in _config.yml
source
from the --source
CLI option or source
in _config.yml
YAML JSON JavaScript
_inputs :
title :
type : text
comment : The title of your page.
_select_data :
colors :
- Red
- Green
- Blue
source : src
base_url : /documentation
collections_config :
people :
path : content/people
output : true
name : Personnel
_enabled_editors :
- data
posts :
path : _posts
output : true
pages :
name : Main pages
data_config :
authors : true
offices : true
paths :
uploads : assets/uploads
data : _data
layouts : _layouts
{
"_inputs" : {
"title" : {
"type" : "text" ,
"comment" : "The title of your page."
}
} ,
"_select_data" : {
"colors" : [
"Red" ,
"Green" ,
"Blue"
]
} ,
"source" : "src" ,
"base_url" : "/documentation" ,
"collections_config" : {
"people" : {
"path" : "content/people" ,
"output" : true ,
"name" : "Personnel" ,
"_enabled_editors" : [
"data"
]
} ,
"posts" : {
"path" : "_posts" ,
"output" : true
} ,
"pages" : {
"name" : "Main pages"
}
} ,
"data_config" : {
"authors" : true ,
"offices" : true
} ,
"paths" : {
"uploads" : "assets/uploads" ,
"data" : "_data" ,
"layouts" : "_layouts"
}
}
module. exports = {
_inputs : {
title : {
type : "text" ,
comment : "The title of your page."
}
} ,
_select_data : {
colors : [
"Red" ,
"Green" ,
"Blue"
]
} ,
source : "src" ,
base_url : "/documentation" ,
collections_config : {
people : {
path : "content/people" ,
output : true ,
name : "Personnel" ,
_enabled_editors : [
"data"
]
} ,
posts : {
path : "_posts" ,
output : true
} ,
pages : {
name : "Main pages"
}
} ,
data_config : {
authors : true ,
offices : true
} ,
paths : {
uploads : "assets/uploads" ,
data : "_data" ,
layouts : "_layouts"
}
} ;
The following is automatically read from Hugo if not set in the global configuration file:
collections_config
from your folder structure inside contentDir
in Hugo config
paths.layouts
from layoutsDir
in Hugo config
paths.data
from dataDir
in Hugo config
paths.static
from staticDir
in Hugo config
base_url
from the --baseURL
CLI option or baseURL
in Hugo config
source
from source
in Hugo config
module. exports = {
_inputs : {
title : {
type : 'text' ,
comment : 'The title of your page.'
}
} ,
_select_data : {
colors : [ 'Red' , 'Green' , 'Blue' ]
} ,
source : 'src' ,
base_url : '/documentation' ,
collections_config : {
people : {
path : 'content/people' ,
output : true ,
name : 'Personnel' ,
_enabled_editors : [ 'data' ]
} ,
posts : {
path : '_posts' ,
output : true
} ,
pages : {
name : 'Main pages'
}
} ,
data_config : {
authors : true ,
offices : true
} ,
paths : {
uploads : 'assets/uploads' ,
data : 'data' ,
layouts : '_layouts' ,
includes : '_partials'
}
} ;
The following is automatically read from Eleventy if not set in the global configuration file:
paths
from dir
in .eleventy.js
options
base_url
from pathPrefix
in .eleventy.js
options
source
from the --input
CLI option or dir.input
in .eleventy.js
options
These options match Eleventy's configuration format and are set as follows:
Automatic install Manual install
Automatically installed is the recommended default with Manage eleventy-plugin-cloudcannon manually disabled in your build configuration .
module. exports = function ( eleventyConfig ) {
return {
pathPrefix : '/' ,
dir : {
input : '.' ,
data : '_settings' ,
layouts : '_layouts' ,
includes : '_partials'
}
} ;
} ;
Applicable if you have Manage eleventy-plugin-cloudcannon manually enabled in your build configuration .
const pluginCloudCannon = require ( 'eleventy-plugin-cloudcannon' ) ;
module. exports = function ( eleventyConfig ) {
const config = {
pathPrefix : '/' ,
dir : {
input : '.' ,
data : '_settings' ,
layouts : '_layouts' ,
includes : '_partials'
}
} ;
eleventyConfig. addPlugin ( pluginCloudCannon, config) ;
return config;
} ;
module. exports = {
_inputs : {
title : {
type : 'text' ,
comment : 'The title of your page.'
}
} ,
_select_data : {
colors : [ 'Red' , 'Green' , 'Blue' ]
} ,
source : 'src' ,
output : 'output' ,
collections_config : {
people : {
path : 'content/people' ,
url : '/people/{department|slugify}/[slug]/' ,
output : true
name : 'Personnel' ,
_enabled_editors : [ 'data' ]
} ,
posts : {
path : '_posts' ,
parser : 'front-matter' ,
url : ( filePath, parsed, { filters } ) => {
const year = new Date ( parsed. date) . getFullYear ( ) ;
const slug = filters. slugify ( parsed. title || '' ) ;
return ` /posts/ ${ year} / ${ slug} / ` ;
} ,
output : true
} ,
pages : {
path : '' ,
glob : [ '**/*.md' , './src/pages/*.html' ] ,
filter : 'strict' ,
output : true
} ,
data : {
path : 'data' ,
parser : ( filePath, raw, { parsers, filters } ) => {
const parsed = parsers[ 'front-matter' ] . parse ( raw) ;
const slug = filters. slugify ( parsed. title || '' ) ;
return { ... data, slug } ;
}
}
} ,
data_config : {
authors : {
path : 'data/authors.csv'
} ,
offices : {
path : 'data/offices' ,
parser : 'json'
}
}
} ;
Global configuration files have the following options available:
The subpath your output files are mounted at.
Contains definitions for your collections, the related sets of content files for your site grouped by folder. Entries are keyed by your collection key, and contain configuration specific to that collection. Read more about defining your collections and the available configuration.
Prevents CloudCannon from automatically discovering collections for supported SSGs if true
. Defaults to false
.
Controls which collections are displayed in the site navigation and how those collections are grouped. Defaults to splitting all available collections between Pages , Blogging and Data groups. Read more about configuring your navigation section .
Controls what data sets are available to populate select and multiselect inputs .
If set as a boolean and true
, all auto-discoverable data sets are added. This is only applicable to Jekyll and Hugo sites.
If set as an object, only those data sets are added.
Global paths to common folders. These are often automatically populated from your SSG, and not all paths are relevant to all SSGs. Each path is relative to source
. The available keys are:
uploads
for the default location of newly uploaded site files.
dam_uploads
for the default location of newly uploaded DAM files.
static
for the location of statically copied assets.
dam_static
for the location of statically copied assets for DAM files.
collections
for the parent folder of all collections.
data
for the location of site data files.
layouts
for the top-most folder of site layout files.
includes
for the top-most folder of includes/partials/shortcode files.
uploads
and dam_uploads
have a number of dynamic placeholders available .
Base path to your site source files, relative to the root folder of your site.
Contains settings for the behavior and appearance of the Source Editor .
Generates the integration file in another folder. Not available for Jekyll, Hugo and Eleventy. Defaults to the root folder of your site.
Global configuration files are the base level for defining options in the configuration cascade , allowing you to define these options here at a global scope.