Editing terminology

Some SSGs, like Jekyll, Hugo, Astro, and Eleventy, have strong opinions about how to organize the content in your repository. CloudCannon can run automatic processes on these SSGs and provide basic editing out-of-the-box. SvelteKit takes a less opinionated approach and allows you to decide where and how content is stored. This means that for SvelteKit, CloudCannon’s out-of-the-box options only include the source editor.

CloudCannon has a few concepts that make organizing data easier:

Data — These are standalone data files. This is ideal for site configuration or files that don’t need to be repeated. Data is edited by altering a single file.
Collections — A collection is a single folder of files with a repeated format. For example, a collection might include pages, blogs, staff members, or recipes that share a format. Collections are edited by altering any file or adding more files.

CloudCannon supports a set of file formats for files in Data or Collections:

Structured data files: JSON, YAML, TOML, CSV, TSV
Markup files: HTML, Markdown, MDX
Combination files: HTML with front matter, Markdown with front matter, MDX with front matter

Front matter refers to a section at the top of a markup file that contains structured data. CloudCannon supports JSON, YAML, and TOML front matter. Markdown comes in many flavors, so be sure to check out configuring your Markdown engine.

If you need another supported format, get in touch with our support team, and we would be happy to look into it.

Turn SvelteKit into an SSG#

To get the most out of CloudCannon, you will need to run SvelteKit as a Static Site Generator. You can do this by using SvelteKit's adapter-static adapter.

First, install the adapter by running npm install -D @sveltejs/adapter-static in your terminal.

Then, in your svelte.config.js, import the static adapter and set it as the adapter in the kit config object like so:

copied

import adapter from '@sveltejs/adapter-static';

const config = {
  kit: {
    adapter: adapter(),
    // additional 'kit' config
  },
  // additional svelte config
}

You may need to convert your +page.js and/or +layout.js files to +page.server.js and +layout.server.js files, respectively.

Updating SvelteKit to use file data#

It’s time to organize our content.

To get the most out of CloudCannon, it's best to make sure your content is separate from your templating and routing logic. We recommend storing your page content in files using one of the file formats listed above. Markdown with front matter is a great choice for storing content because the front matter can be easily edited in the Data Editor and the Markdown content Content Editor.

We recommend one content file per page, organized within a content/ folder.

With your content nicely organized, you'll then need to fetch this data into your page components. CloudCannon has an open-source package called Filer, which lets you easily pull data from your content files and collections.

For example, in a +page.server.js (or equivalent) you could fetch your content/about.md file data like so:

copied

import Filer from '@cloudcannon/filer';

export async function load() {
  const filer = new Filer({
    path: 'content'
  });

  const data = await filer.getItem('about.md', {});
  return data;
}

If your load function loads variable pages (e.g. using the slug param) it's a good idea to wrap the getItem call within a try...catch block.