This guide will walk you through the steps required to get your Hugo site built, editable and live on CloudCannon.
Hugo is lightning fast, powered by golang, and is one of the most popular and dependable SSGs available. CloudCannon makes it easy to store your content in your Git Repository and have non-developers update it. There’s no need to teach people about front matter, markdown or Git.
The first step for connecting any site is to get your file system linked to CloudCannon. CloudCannon will need to clone your files to disk before anything else — this is the same process as if you were working locally in your development environment.
CloudCannon offers multiple ways of connecting your files:
It is highly recommended that you use the Git syncing option. This allows your updates on CloudCannon to push back to your repository. Your editors can then contribute to the Software Development Life Cycle (SDLC). This step is configured through an OAuth connection with the relevant partner. Check out the Connecting Your First Site guide for more information on this step.
The second step for any new site is to get a successful build. This also mirrors your local development environment. On CloudCannon, select Hugo as your SSG — this may already be set if we can detect a Hugo looking folder structure.
The important things to configure here are:
publicis usually fine. If you output to a different folder locally, it is nice to match it on CloudCannon so that any scripts reading from the output can work the same way.
Ideally your build will work the first time. If this is the case, you can move to the next step. If your build did not work the first time, be sure to read the build output — this will let you know what didn’t work.
You may find you need extra commands to complete your build. A common example is using postcss; for this you can use build hooks, adding specially named bash scripts that run at different steps in the build. For more information, see the build hook documentation.
Once your site is built, you will see a big green tick on the screen. At this point, your site’s files are synced and a successful build has been run. This means you have unlocked a newly generated preview URL. In the top left corner of the screen under your site name, there is a blue link, styled adjective-noun.cloudvent.net. Clicking this link will open a new tab to the hosted site on CloudCannon. It is a helpful step at this point to check that the site looks correct. If it does, you can move on to editor configuration. If you need to update your build, this can be done in your settings.
Your new adjective-noun.cloudvent.net site will give you a preview after every change. Use this to show off your new site.
Hugo and CloudCannon are like long-time best friends. Hugo has its collections and data organized in a strong and rigid pattern. CloudCannon knows Hugo so well that editing of these are automatic straight away.
CloudCannon has a few concepts that line up with Hugo concepts:
CloudCannon supports a set of file formats for files in Data or Collections:
With your collections all in CloudCannon already, we can focus on polishing the experience for your editors. A good place to start is expanding on your collection configuration. This allows you to add things like:
The global configuration file is one of many places that configuration can exist. Some options can exist only in the global config. Others options can be configured in a number of places; these options always start with an
_ character. These options cascade like CSS: the more specific the options are, the more they take precedence. From least important to most important, the order is:
A common option to be configured in the cascade is
_inputs. This option allows you to change what input is used for which keys. This can be anything from a text input, color pickers, select fields, date pickers and more. By default, CloudCannon uses the format of your data and keys to decide on the input to use. It is best to review each collection and adjust these as needed.
Another great cascade option is
_structureswhich allows you to control how new array and object items are added. Arrays are a great way to create page builders or a configurable navigation. The next section will discuss a system for generating structures automatically.
Visual editing on CloudCannon can be broken down into two separate parts:
The final result is something intuitive and easy to teach.
Hugo is a Go-based static site generator which means that all the work of building the page happens on a server. To solve this issue we have created a system for organizing and building components called Bookshop. Bookshop uses a stripped-down version of Hugo that can run in the browser, which means there is no new templating language to learn.
CloudCannon works with Hugo like it does with Bookshop — simply and intuitively. You will be able to build pages out of components and see these changes instantly on the page.
That’s it for Hugo! Once you have worked through all of this, you will be an expert at creating and configuring CloudCannon sites. Be sure to share your new site with your team or clients.
If you experience any issues with your Hugo build, don’t hesitate to contact our support team.