Connecting your first site

Learn how to connect your existing site to CloudCannon.

Now that you have seen what CloudCannon can do in a demo or template, it’s time to connect your own files. Your site will be processed in a Continuous Integration / Continuous Deployment (CI/CD) workflow with each save. Connecting your site is about defining two things: setting a source for your files, and configuring your chosen SSG for your auto-build process.

To open the build process:

  1. Navigate to Sites in the sidebar, and click Add new site
  2. From the dropdown, select Connect your own files
Screenshot of CloudCannon Sites view with new site options active

You’ll see the page split into two columns with a familiar terminal on the right. This terminal is your window into CloudCannon. You’ll get feedback from the system on what’s going on behind the scenes. Across the top of the page you’ll find the progress bar as well as the confirmation button in the top right.

The first step in the process is to give your site a name. With your chosen name added to the field click Create Site in the top right corner of the browser window to move onto the Sync Files step.

Syncing your files#

Setting the source of your files is a key step in CloudCannon’s build process. You have two major options to add files from: a Git provider or direct upload.

Syncing files with your Git provider gives you a range of extra workflow options including branching and version control, and allows you to push from your Git to CloudCannon. It also puts the power of Git in the hands of your editors — without them needing to understand the technical side of Git.

Sync with your Git Repository:

  1. Select your Git provider from the File source dropdown.
  2. If you have not yet connected your chosen Git provider to your CloudCannon account, click the button labelled Authenticate. Read the following guides on connecting:
  3. Once authenticated, select your repository from the Repository dropdown. You can choose an existing branch, or create a new branch from an existing branch.
  4. Once you have file details added, click Sync Files in the top right of the browser.
Screenshot of CloudCannon site creation with a git source

Direct upload your files

If you prefer, you can also add your files directly to CloudCannon.

  1. Choose your upload option, either to Upload a folder or Upload a zip file.
  2. Select your file location by clicking the Local folder button that appears.
  3. You will be prompted to select a folder/zip file from your local device.
  4. CloudCannon will ask you to confirm. Click Upload to confirm.
  5. Once uploaded and confirmed, click Sync Files in the top right of the browser.

CloudCannon will keep your site files in sync with your repo.

Building your site#

The final step is to choose and configure your chosen Static Site Generator (SSG). Your files will be coded with one in mind and CloudCannon should be able to automatically detect it.

  1. Confirm the SSG detected is the one you want to use, if not use the drop down to select your preferred one.
  2. You can then configure your build using the fields down the left half of the screen. You can make changes to these later.
  3. A preview of your build command will show in the terminal on the right.
  4. Once you have configured your build, click Build Site in the top right of your browser.
Screenshot of build configuration settings in new site in CloudCannon

Once your site has been built, you will be navigated to your site’s dashboard. Your site is now ready to be used in CloudCannon!

Open in a new tab