From Netlify to CloudCannon

5 min read / June 14, 2023

In this post, I’ll share my experience of moving my Hugo-based static website from Netlify to CloudCannon. As a developer, I’m always interested in exploring new tools and technologies to see how they can improve my workflow. When I came across CloudCannon, its intuitive interface and robust set of features immediately caught my attention. I was intrigued and decided to see if it could offer a better hosting solution for my static site than the one I was using.

I’ll guide you through the transition process, highlighting the steps I took and discussing some of the questions and challenges that emerged along the way. My hope is that this post will give you an insight into what it’s like to work with CloudCannon and help you decide whether it could be the right fit for your own projects.

Personal site for free

The default plan on CloudCannon is the “Standard” plan, which costs $45 per month. However, if you’re using CloudCannon for personal projects or just getting started, you might not need all the features that the “Standard” plan offers.

Fortunately, CloudCannon offers a “Personal” plan that is free of charge and can be a great way to start hosting your site.

To switch to the “Personal” plan, navigate to your “org settings > subscription > review your billing plan > change plan”. From there, you can select the “Personal” plan.

Setting up the site

To get started with CloudCannon, I created a new site and selected “Build with your own files”, as I already have a repository on GitHub. This option allows me to sync the site on CloudCannon with my repository.

After the sync was over, the CloudCannon user interface suggested adding a cloudcannon-config.yml file to my project root. This file is used to configure various settings for my site on CloudCannon. Since I’m not using any specific features yet, my config is literally the default one. I just stripped it down to the absolute minimum and changed the timezone:

# allows you to define your content collections
  # "pages" is the name of a collection and represents
  # the default content under "content"
    # the pages in this collection will be rendered to your site's output
    output: true

# lets you define the locations of different types of files in your site
  data: data
  # "collections" are located in the "content" directory
  collections: content
  includes: layouts
  layouts: layouts
  static: static
  uploads: static/uploads

# Timezone of your site in IANA format. This is used by date and datetime inputs
# within the CloudCannon Data Editor.
timezone: Europe/Berlin

Then I was able to configure some “Build Options” (--minify and --gc) and then the site was built.

Reset the baseURL in the UI

I have the baseURL configured in my config.yaml, but in the UI of CloudCannon it was set to /, which lead to some problems with my absolute URLs.

Solution: I removed the / in the UI and then my config was corretly loaded.

Running Workbox Build

Next, I wanted to ensure that Workbox would still build my PWA correctly after the transition. To accomplish this, I added a postbuild script in the .cloudcannon directory to run my Workbox build, because this runs after the static files are built and public is populated.

Here’s the content of my .cloudcannon/postbuild script:

npm run build

This script is run after the site build process is complete, but before the files are uploaded to CloudCannon servers.

Setting Up a Custom Domain

After setting up my site and build process, I moved on to configuring my custom domain: I added my custom domain in CloudCannon and then updated the nameservers for my domain on my domain provider, Gandi. This took around 1 hour and then my site was accessible.

It was not possible to use an External DNS Server to configure the custom domain, because SSL certificate can only be issued, when you use the build-in DNS Server from CloudCannon.

Possible developer experience improvements

Some things that could be improved in the future to make it easier for devs to switch over to CloudCannon:


Transitioning my Hugo-based static website from Netlify to CloudCannon turned out to be a relatively straightforward process. The platform offers a personal plan that allows me to host my site for free, and the setup process was simple. Additionally, I was able to set up a custom domain and run Workbox in CloudCannon without much difficulty.

However, there are some areas where CloudCannon can improve to provide an even smoother developer experience. For instance, it would be helpful if the personal plan was more visible and if an external DNS could be used in combination with an SSL certificate. Furthermore, enhancing the documentation and adding an AI assistant to help during the setup process could be beneficial.

Overall, CloudCannon provides a solid solution for hosting static websites, with a few potential enhancements that could take the platform to the next level. As I continue to use CloudCannon, I look forward to seeing how it evolves and improves over time.

 since 1985
CC BY 4.0 | Legal