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.
The configuration cascade is a set of sources containing customizable options for the editor. Each source has a different scope and priority. This allows you to set global defaults and override those for specific collections or files.
When CloudCannon needs an option you have set in the configuration cascade, it looks at each scope in order. In most cases, the cascade stops looking when an option is found. This means the most specific value is used in place of any less specific values.
Input configuration (i.e. _inputs
) has a different cascading default, where CloudCannon continues looking over less specific sources to merge into a single option.
The configuration cascade sources are as follows, from lowest priority to highest:
Global configuration
Collection configuration
Schema configuration
Front matter
Containing structure
For configuring everywhere on your site. For example:
YAML JSON JavaScript
_inputs :
image_path :
type : image
comment : Helpful message here
options :
width : 90
height : 120
_select_data :
colors :
- Red
- Blue
{
"_inputs" : {
"image_path" : {
"type" : "image" ,
"comment" : "Helpful message here" ,
"options" : {
"width" : 90 ,
"height" : 120
}
}
} ,
"_select_data" : {
"colors" : [
"Red" ,
"Blue"
]
}
}
module. exports = {
_inputs : {
image_path : {
type : "image" ,
comment : "Helpful message here" ,
options : {
width : 90 ,
height : 120
}
}
} ,
_select_data : {
colors : [
"Red" ,
"Blue"
]
}
} ;
For configuring all files within a collection. For example:
YAML JSON JavaScript
collections_config :
pages :
_inputs :
image_path :
type : image
comment : Helpful message here
options :
width : 90
height : 120
_select_data :
colors :
- Red
- Blue
{
"collections_config" : {
"pages" : {
"_inputs" : {
"image_path" : {
"type" : "image" ,
"comment" : "Helpful message here" ,
"options" : {
"width" : 90 ,
"height" : 120
}
}
} ,
"_select_data" : {
"colors" : [
"Red" ,
"Blue"
]
}
}
}
}
module. exports = {
collections_config : {
pages : {
_inputs : {
image_path : {
type : "image" ,
comment : "Helpful message here" ,
options : {
width : 90 ,
height : 120
}
}
} ,
_select_data : {
colors : [
"Red" ,
"Blue"
]
}
}
}
} ;
For configuring all files within one of a collection's schemas. For example:
YAML JSON JavaScript
collections_config :
pages :
schemas :
default :
path : schemas/page.md
_inputs :
image_path :
type : image
comment : Helpful message here
options :
width : 90
height : 120
landing_page :
path : schemas/landing- page.md
_select_data :
colors :
- Red
- Blue
{
"collections_config" : {
"pages" : {
"schemas" : {
"default" : {
"path" : "schemas/page.md" ,
"_inputs" : {
"image_path" : {
"type" : "image" ,
"comment" : "Helpful message here" ,
"options" : {
"width" : 90 ,
"height" : 120
}
}
}
} ,
"landing_page" : {
"path" : "schemas/landing-page.md" ,
"_select_data" : {
"colors" : [
"Red" ,
"Blue"
]
}
}
}
}
}
}
module. exports = {
collections_config : {
pages : {
schemas : {
default : {
path : "schemas/page.md" ,
_inputs : {
image_path : {
type : "image" ,
comment : "Helpful message here" ,
options : {
width : 90 ,
height : 120
}
}
}
} ,
landing_page : {
path : "schemas/landing-page.md" ,
_select_data : {
colors : [
"Red" ,
"Blue"
]
}
}
}
}
}
} ;
For configuring a single file. For example:
YAML JSON TOML
image_path : /uploads/me.png
_inputs :
image_path :
type : image
comment : Helpful message here
options :
width : 90
height : 120
_select_data :
colors :
- Red
- Blue
{
"image_path" : "/uploads/me.png" ,
"_inputs" : {
"image_path" : {
"type" : "image" ,
"comment" : "Helpful message here" ,
"options" : {
"width" : 90 ,
"height" : 120
}
}
} ,
"_select_data" : {
"colors" : [
"Red" ,
"Blue"
]
}
}
image_path = "/uploads/me.png"
[ _inputs.image_path ]
type = "image"
comment = "Helpful message here"
[ _inputs.image_path.options ]
width = 90
height = 120
[ _select_data ]
colors = [ "Red" , "Blue" ]
For configuring inputs inside inside a structure. For example:
YAML JSON TOML
_structures :
gallery :
values :
- label : Image
icon : image
_inputs :
image :
type : image
options :
width : 50
height : 50
caption :
comment : Applies inside this structure
_select_data :
colors :
- Red
- Blue
value :
image : /uploads/placeholder.png
caption :
color :
{
"_structures" : {
"gallery" : {
"values" : [
{
"label" : "Image" ,
"icon" : "image" ,
"_inputs" : {
"image" : {
"type" : "image" ,
"options" : {
"width" : 50 ,
"height" : 50
}
} ,
"caption" : {
"comment" : "Applies inside this structure"
}
} ,
"_select_data" : {
"colors" : [
"Red" ,
"Blue"
]
} ,
"value" : {
"image" : "/uploads/placeholder.png" ,
"caption" : null ,
"color" : null
}
}
]
}
}
}
[ [ _structures.gallery.values ] ]
label = "Image"
icon = "image"
[ _structures.gallery.values._inputs.image ]
type = "image"
[ _structures.gallery.values._inputs.image.options ]
width = 50
height = 50
[ _structures.gallery.values._inputs.caption ]
comment = "Applies inside this structure"
[ _structures.gallery.values._select_data ]
colors = [ "Red" , "Blue" ]
[ _structures.gallery.values.value ]
image = "/uploads/placeholder.png"
For nested structured data, you can nest _structures
alongside the other configuration groups inside a structure definition.
Since configuration cascade options can be defined alongside your data, they always begin with an underscore in an effort to avoid clashing with a key you would use.
The following configuration cascade options are available:
Controls how your team edits specific files, use this to set a preferred editor and/or disable the others. The first value sets which editor opens from the collection list, the other values specify which editors are accessible. Available values are:
The Source Editor is always available for those with permission.
Contains configuration for controlling the behavior and appearance of your inputs in the Data Editor. Read more about how inputs work .