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 Source Editor is an in-browser code editor, used to make edits within CloudCannon on any text-based file. It is available to the owner and developers of the site.
The Source Editor is used to edit the raw content of text-based files. Client Sharing users and editor-level team members do not have access to it.
Syntax highlighting is automatically detected from the extension of the file you are opening.
To change the appearance and behavior of the Source Editor , use the source_editor
option in your global configuration:
YAML JSON JavaScript
source_editor :
tab_size : 2
show_gutter : false
theme : dawn
{
"source_editor" : {
"tab_size" : 2 ,
"show_gutter" : false ,
"theme" : "dawn"
}
}
module. exports = {
source_editor : {
tab_size : 2 ,
show_gutter : false ,
theme : "dawn"
}
} ;
The Source Editor has the following options available:
Defines how many spaces lines are auto indented by, and how many spaces tabs are shown as. Optional, defaults to 2
.
Changes the colors scheme for syntax highlighting in the editor. Optional, defaults to monokai
. Must be one of:
ambiance
chaos
chrome
clouds
clouds_midnight
cobalt
crimson_editor
dawn
dracula
dreamweaver
eclipse
github
gob
gruvbox
idle_fingers
iplastic
katzenmilch
kr_theme
kuroir
merbivore
merbivore_soft
mono_industrial
monokai
nord_dark
pastel_on_dark
solarized_dark
solarized_light
sqlserver
terminal
textmate
tomorrow
tomorrow_night
tomorrow_night_blue
tomorrow_night_bright
tomorrow_night_eighties
twilight
vibrant_ink
xcode
Toggles displaying line numbers and code folding controls in the editor. Optional, defaults to true
.