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.
These inputs allow editors to upload new files, select existing images, and add external links. Enterprise customers can even configure an external digital asset manager for their team.
File select input with controls to enter external links and upload new files. Does not filter by file type when choosing files.
File inputs are shown for inputs configured with the type file
, or for input keys matching:
YAML JSON TOML
extra_styles_path : /styles/screen.css
{
"extra_styles_path" : "/styles/screen.css"
}
extra_styles_path = "/styles/screen.css"
YAML JSON TOML
path_to_css : /styles/screen.css
_inputs :
path_to_css :
type : file
{
"path_to_css" : "/styles/screen.css" ,
"_inputs" : {
"path_to_css" : {
"type" : "file"
}
}
}
path_to_css = "/styles/screen.css"
[ _inputs.path_to_css ]
type = "file"
Image select inputs with controls to enter external links and upload new image files. Filters files available to choose to files with image extensions.
Image inputs are shown for inputs configured with the type image
, or for input keys matching:
image
*_image
image_path
*_image_path
YAML JSON TOML
background_image_path : /images/background.png
{
"background_image_path" : "/images/background.png"
}
background_image_path = "/images/background.png"
YAML JSON TOML
image_file : /images/background.png
_inputs :
image_file :
type : image
{
"image_file" : "/images/background.png" ,
"_inputs" : {
"image_file" : {
"type" : "image"
}
}
}
image_file = "/images/background.png"
[ _inputs.image_file ]
type = "image"
Document select inputs with controls to enter external links and upload new document files. Filters files available to choose to files with document extensions.
Document inputs are shown for inputs configured with the type document
, or for input keys matching:
document
*_document
document_path
*_document_path
YAML JSON TOML
newsletter_document_path : /documents/2016/newsletter.pdf
{
"newsletter_document_path" : "/documents/2016/newsletter.pdf"
}
newsletter_document_path = "/documents/2016/newsletter.pdf"
YAML JSON TOML
path_to_newsletter : /documents/2016/newsletter.pdf
_inputs :
path_to_newsletter :
type : document
{
"path_to_newsletter" : "/documents/2016/newsletter.pdf" ,
"_inputs" : {
"path_to_newsletter" : {
"type" : "document"
}
}
}
path_to_newsletter = "/documents/2016/newsletter.pdf"
[ _inputs.path_to_newsletter ]
type = "document"
File path inputs are configured with options
inside an _inputs
entry.
YAML JSON TOML
image_file : /uploads/image.png
_retina_image_file : /uploads/image- 2x.png
_inputs :
image_file :
type : image
options :
paths :
uploads : uploads
accepts_mime_types :
- image/png
- image/svg+xml
- image/jpeg
width : 400
height : 300
resize_style : crop
mime_type : image/jpeg
expandable : true
prevent_resize_existing_files : false
sizes :
- size : 2x
target : _retina_image_file
{
"image_file" : "/uploads/image.png" ,
"_retina_image_file" : "/uploads/image-2x.png" ,
"_inputs" : {
"image_file" : {
"type" : "image" ,
"options" : {
"paths" : {
"uploads" : "uploads"
} ,
"accepts_mime_types" : [
"image/png" ,
"image/svg+xml" ,
"image/jpeg"
] ,
"width" : 400 ,
"height" : 300 ,
"resize_style" : "crop" ,
"mime_type" : "image/jpeg" ,
"expandable" : true ,
"prevent_resize_existing_files" : false ,
"sizes" : [
{
"size" : "2x" ,
"target" : "_retina_image_file"
}
]
}
}
}
}
image_file = "/uploads/image.png"
_retina_image_file = "/uploads/image-2x.png"
[ _inputs.image_file ]
type = "image"
[ _inputs.image_file.options ]
accepts_mime_types = [ "image/png" , "image/svg+xml" , "image/jpeg" ]
width = 400
height = 300
resize_style = "crop"
mime_type = "image/jpeg"
expandable = true
prevent_resize_existing_files = false
[ _inputs.image_file.options.paths ]
uploads = "uploads"
[ [ _inputs.image_file.options.sizes ] ]
size = "2x"
target = "_retina_image_file"
File path inputs have the following options available:
Paths to common folders. Each path is relative to global site 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.
dam_static
for the location of statically copied assets for DAM files.
uploads
and dam_uploads
have a number of dynamic placeholders available .
Restricts which file types are available to select or upload to this input. Optional, each file path input has a different default:
File: *
Image: image/x-icon,image/gif,image/jpeg,image/jpeg,image/png,image/webp,image/bmp,image/svg+xml
Document: application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation
If set as a string, the value should be a comma-separated (no spaces) list of the mime types you want to filter by. The string *
by itself allows any type.
If set as an array, each item should be a string of a single mime type you want to filter by.
Set how an ‘empty’ value will be saved. Does not apply to existing empty values. Can be one of the following:
string
- an empty value for this input will be stored as ""
.
null
- an empty value for this input will be stored as a null value (default). This does not apply to TOML files.
If you have one or more DAMs connected to your site, you can use this key to list which asset sources can be uploaded to and selected from.
You can refer to a DAM with the Reference Key field from the site-level DAM configuration.
You can refer to your site files with site-files
. If this is omitted from the array, site files will not be available as an asset source for this input.
If the input allows for images, the following options are also available:
Defines the width of the bounding box used in the resizing process defined with resize_style
.
Defines the height of the bounding box used in the resizing process defined with resize_style
.
Sets how uploaded image files are resized with a bounding box defined by width
and height
prior to upload. Defaults to contain
. Must be crop
, contain
, cover
or stretch
:
crop
prompts the user to choose a region of the image that matches the bounding box
cover
keeps aspect ratio and ensures the image covers the bounding box
contain
keeps aspect ratio and ensures the image fits inside the bounding box
stretch
ignores aspect ratio and resizes the image to the bounding box
If width
and height
are not set, contain
, cover
and stretch
have no effect. For crop
, width
and height
are both optional, controlling the minimum size of the crop region and resulting image. The aspect ratio of the crop region is also matched to these values.
Sets what format the image is converted to prior to upload. The extension of the file is updated to match. Defaults to keeping the mime type of the uploaded file. Must be one of:
image/jpeg
image/png
image/webp
expandable
- Boolean
Controls whether or not images can be upscaled to fit the bounding box during resize prior to upload. Defaults to false
. Has no effect if files are not resized.
Enable to skip the image resizing process configured for this input when selecting existing images. Defaults to false.
Definitions for creating additional images of different sizes when uploading or selecting existing files. Has no default. Each entry contains the following fields:
size
is a number suffixed with "x" (relative size) or "w" (fixed width) for setting the dimensions of the image (e.g. 2x, 3x, 100w, 360w)
target
is a reference to another input that is given the path to this additional image file
If the additional image cannot be created (i.e. the uploaded image is too small and would need to be upscaled), the target
input's value is unset so references to previous files aren't mixed with new ones.
Documented below are the valid formats for file , image , and document inputs.
The lists of examples are non-exhaustive.
YAML TOML JSON
Empty/null value:
Any valid string (quoted or unquoted):
file: ""
file: ''
file: path/to
file: "path/to"
file: 'path/to'
Any valid string:
file = ""
file = ''
file = "path/to"
file = 'path/to'
Null value:
Any valid string:
"file": ""
"file": "path/to"