Sites can be configured to build using Jekyll, Hugo, Eleventy, Next.js, Nuxt.js, Gatsby, SvelteKit, Astro, MkDocs, Static, or Custom.
When connecting your site, you will be asked to select your SSG to build with. You can change this at any time by:
- Navigating to your site's settings
- Navigating to Builds / Build
- Selecting your SSG from the dropdown, then clicking Update Configuration at the bottom of the page
Here you can find what commands CloudCannon uses to build your sites. Learn more about extending your build process with hooks.
Jekyll is one of the first popular SSGs. Learn how you can customize Jekyll and the build environment to your needs.
Sites without a
Gemfile are built with:
Sites with a
Gemfile are built with:
These commands are run in the root folder of your site.
Gemfile isn’t in the root folder, set the
BUNDLE_GEMFILE environment variable to tell the Bundler where to find it. Setting this requires that your gems are specified in the
Hugo is a popular SSG built using Golang.
Hugo sites are built with:
Eleventy (or 11ty) is a popular static site generator built with Node.js.
Eleventy sites are built with:
Static is the most basic SSG option available on CloudCannon.
Files are copied to the live site as-is. CloudCannon performs optimizations and processes static-specific hosting features on the files.
CloudCannon provides a build command for each known SSG, and this can be changed to suit your build. The build command is set in the build configuration when you select an SSG.
Setting your SSG version#
It's good practice to specify which version of your static site generator you use to avoid errors and unexpected behavior. CloudCannon offers different methods to manage this based on which generator you use.
CloudCannon supports Jekyll versions after 2.4.0. New sites without the version set use a default version. The version is displayed in the Status section after each build.
Set the version to avoid future breaking changes and version clashes across environments.
To set the version:
- Add a
Gemfileto the root folder
- Add the
jekylldependency to your
- Set the version as required
By default, CloudCannon uses
/Gemfile as the gem source. To change this you can set the
BUNDLE_GEMFILE environment variable (e.g.
BUNDLE_GEMFILE environment variable requires that your gems are specified in the
By default CloudCannon builds using Hugo version 0.96.0_extended. You can change which version of Hugo your build uses by running the
install-hugo command in a preinstall hook.
CloudCannon builds with any version of Eleventy, although is focused from version v0.12.1 onward.
Since we build Eleventy sites with
npx, the latest version is run unless specified otherwise in
CloudCannon uses the version you specify for your SSG with
npm or another package manager.
Changing your CLI options#
Most static site generators offer a number of configuration options for use on the command line. Configure these and other CloudCannon-specific build options per site.
To change a command line build option:
- Go to the Site Settings / Build section
- Change details for one or more options
- Click Update Configuration
See in-depth details for configuring Environments and Optimizations
Using Environment Variables#
Environments allow you to use different values in your website depending on where it is deployed. For example, you could use a different CDN for your development, staging and production sites.
To change the environment variables for your site:
- Go to the Site Settings / Configuration section
- Create/edit your environment key and value under Environment Variables
- Click Update Build Details
CloudCannon defaults to production. Running Jekyll locally defaults to development.
Jekyll exposes the environment with
jekyll.environment. You can use this to create separate configurations.
Here’s a short example using variables from
CloudCannon defaults to production. Running
hugo locally defaults to production. Running
hugo server locally defaults to development.
To change the environment locally, set it before running Hugo:
You can set the Hugo environment using the
—-environment flag in the command line. Learn more about build configuration.
Hugo exposes the environment with
Using a configuration directory allows you to create separate configurations for each environment. See the example in the Hugo documentation.
CloudCannon has no default. You should set your environment variables everywhere you need them before building. The Eleventy documentation mentions
ELEVENTY_ENV as a convention.
To change the environment locally, set it before running Eleventy:
CloudCannon does not set default environment variables for custom SSGs.
To change an environment variable locally, set it before running your build command: