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.
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.
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
collections_config:
# "pages" is the name of a collection and represents
# the default content under "content"
pages:
# 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
paths:
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.
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.
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:
#!/bin/bash
npm run build
This script is run after the site build process is complete, but before the files are uploaded to CloudCannon servers.
After setting up my site and build process, I moved on to configuring my custom domain: nerddis.co. 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.
Some things that could be improved in the future to make it easier for devs to switch over to CloudCannon:
cloudcannon-config.yml, I used the link that came with the default config. That points to an URL that has the URL parameter ssg=Hugo. For me, this had no effect, as I was expecting that this is actually changing the selected static site generator. Would be nice to either fix this or update the URL in the default configbaseURL is already configured in the Hugo config. And only if there is no config, set a default value of / or suggest a better value based on the data that the user provided.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.