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.
To store and edit Markdown content in CloudCannon, we need to process it into HTML to make it editable. You can use any Markdown engine you want when building your site, this only covers the Markdown content you edit inside CloudCannon.
CloudCannon supports the CommonMark and Kramdown specifications. The implementations for these are markdown-it
(JavaScript) and kramdown
(Ruby).
CloudCannon automatically reads your settings from _config.yml
to match editing and builds.
To use Kramdown:
Remove or set the markdown
field to kramdown
in _config.yml
Set your options in the kramdown
field in _config.yml
kramdown :
input : GFM
auto_ids : true
To use CommonMark:
Add the jekyll-commonmark
gem to your Gemfile
Set the markdown
field to CommonMark
in _config.yml
Set your options in the commonmark
field in _config.yml
source 'https://rubygems.org'
gem 'jekyll' , '3.8.5'
group :jekyll_plugins do
gem 'jekyll-commonmark' , '1.3.1'
end
markdown : CommonMark
commonmark :
options : [ "SMART" , "UNSAFE" ]
extensions : [ "strikethrough" , "table" ]
The UNSAFE
option is required for HTML content inside your Markdown files to render correctly.
CloudCannon automatically reads your Goldmark settings from Hugo to match editing and builds. The settings you set for Goldmark are automatically mapped across to markdown-it
.
See the Hugo Documentation for information on how to configure Goldmark. Other engines set with defaultMarkdownHandler
are not officially supported.
The UNSAFE
option is required for HTML content inside your Markdown files to render correctly.
CloudCannon uses the Eleventy default settings for markdown-it
to match editing and builds.
The default configuration is { html: true }
to match the Eleventy default, but you can update this to match your site by setting the generator.metadata
in your global configuration file:
JSON YAML JavaScript
{
"generator" : {
"metadata" : {
"markdown" : "markdown-it" ,
"markdown-it" : {
"html" : true ,
"linkify" : true
}
}
}
}
generator :
metadata :
markdown : markdown- it
markdown-it :
html : true
linkify : true
module. exports = {
generator : {
metadata : {
markdown : "markdown-it" ,
"markdown-it" : {
html : true ,
linkify : true
}
}
}
} ;
markdown-it
is the default Markdown processor in CloudCannon.
The default configuration is { html: true }
to allow the images with width and height attributes the Rich Text editors create, but you can update this to match your site by setting the generator.metadata
in your global configuration file:
JSON YAML JavaScript
{
"generator" : {
"metadata" : {
"markdown" : "markdown-it" ,
"markdown-it" : {
"html" : true ,
"linkify" : true
}
}
}
}
generator :
metadata :
markdown : markdown- it
markdown-it :
html : true
linkify : true
module. exports = {
generator : {
metadata : {
markdown : "markdown-it" ,
"markdown-it" : {
html : true ,
linkify : true
}
}
}
} ;
CommonMark does not support a syntax to define attributes on elements. In order to preserve attributes, that content saves as HTML within your Markdown files.