Topics:

You don't need an application to deploy a static site on Clever Cloud anymore. Let's see how :)

For years the only way to deploy a static website on Clever Cloud was to create an application. While the type of this application says static, it's in fact a PHP application in disguise. The good thing about this is it allows you to play with Apache's configuration to manage custom redirection and the likes. But sometimes you don't need any flexibility. And you don't want to pay for an application running when you don't need one.

Enter Cellar, our S3 compatible object storage. You can use it to serve static assets. By default it uses the Cellar cluster URL, but with the right CNAME redirection and naming convention, it will serve your website behind your own custom domain. Cellar prices are available in our documentation.

Here's how it works.

Domain Redirection

To redirect your domain name to Clever Cloud's server, go to your domain name registrar dashboard and select the domain you want to redirect. In my case it's ldoguin.name on OVHCloud.

Domain CNAME redirection

You need to add a CNAME redirection to our Cellar's CNAME: cellar-c2.services.clever-cloud.com. CNAME redirection are not available for root domains. If you want to redirect a root domain you will need all the public IPs of our cluster. You can easily get them by typing dig cellar-c2.services.clever-cloud.com in a terminal.

Create the Bucket

Once you have redirected your domain name to the Cellar cluster, create the Cellar add-on and add a new bucket named after your domain name, in my case blog.ldoguin.name.

An auto-renewed Let's Encrypt certificate will be setup automatically shortly after the bucket creation.

Everything you will upload to this bucket will be served as a static file.

Upload your Site

If you already have your files ready, my favorite solution to upload them is to use rclone. It's great to sync your files to many different cloud storage from Cellar to S3, Google drive, Swift, Dropbox and more.

Assuming all the files are in a folder called public and that you have a configured connection to Cellar called mys3, this is what you need to type:

rclone sync ./public mys3:blog.ldoguin.name --progress --s3-acl=public-read

This is pretty much rsync but for cloud storage :) To configure my connection I had the following environment variables:

export RCLONE_CONFIG_MYS3_ACCESS_KEY_ID=$CELLAR_ADDON_KEY_ID
export RCLONE_CONFIG_MYS3_SECRET_ACCESS_KEY=$CELLAR_ADDON_KEY_SECRET
export RCLONE_CONFIG_MYS3_ENDPOINT=$CELLAR_ADDON_HOST
export RCLONE_CONFIG_MYS3_TYPE="s3"

I copied them from the my Cellar add-on dashboard. We could stop here. You have a static website hosted on Clever Cloud without a running application. Let's take this a bit further by using an application to build the website.

Build and Upload your Static Site

I wrote about Hugo in a previous post. This is going to be almost similar so I'll be quick.

The plan is to create a Clever Cloud application. Each time you will push new content to this application, it will start, generate the Hugo website, upload it to Cellar then stop itself.

Assuming you have installed Hugo and clever-tools, this is everything you need to do to have a generated website:

mkdir hugo-cellar-static # Create the site root folder
cd hugo-cellar-static/
hugo new site . # Generate a new Hugo site
git init # initialize the git repository
git submodule add https://github.com/jakewies/hugo-theme-codex themes/codex # add a theme
cp themes/codex/exampleSite/config.toml config.toml # copy the default configuration
cp -r themes/codex/exampleSite/content/ . # copy default content for the exemple
gedit config.toml  # edit the configuration, like the theme or the baseUrl
clever create --type static-apache myapp # Create a new clever cloud application
clever service link-addon MyCellar # link the app to the Cellar add-on 
cat ~/.config/clever-cloud  # Get the clever-tools token

At that point you should have created a website structure and a Clever Cloud application. These are the environment variables needed to configure it:

CC_PHP_VERSION="7"
CC_PRE_RUN_HOOK="./hugo.sh" # A prerun hook to execute the build and sync it to Cellar
CC_RUN_SUCCEEDED_HOOK="clever stop" # use clever-tools to turn off the app when finished 
CLEVER_SECRET="xxxx" # Tokens for clever-tools
CLEVER_TOKEN="xxxxx" # Tokens for clever-tools
DL_RCLONE_VERSION="1.52.1" # which version of rclone to use
HUGO_VERSION="0.62.0" # which version of hugo to use
MY_DOMAIN="blog.ldoguin.name/" # The name of the bucket to sync
PORT="8080"
HUGO_ENV="production"

The clever stop trick is likely to be replaced by something cleaner in the coming weeks, with something like a task or job. The build and sync of the site is done when the pre run hook executes hugo.sh, which has the following content:

# Configure rclone Cellar connection
export RCLONE_CONFIG_MYS3_ACCESS_KEY_ID=$CELLAR_ADDON_KEY_ID
export RCLONE_CONFIG_MYS3_SECRET_ACCESS_KEY=$CELLAR_ADDON_KEY_SECRET
export RCLONE_CONFIG_MYS3_ENDPOINT=$CELLAR_ADDON_HOST
export RCLONE_CONFIG_MYS3_TYPE="s3"

# Download and unpack rclone and hugo
wget https://downloads.rclone.org/v$DL_RCLONE_VERSION/rclone-v$DL_RCLONE_VERSION-linux-amd64.zip
wget https://github.com/gohugoio/hugo/releases/download/v$HUGO_VERSION/hugo_extended_"$HUGO_VERSION"_Linux-64bit.tar.gz
unzip rclone-v$DL_RCLONE_VERSION-linux-amd64.zip
tar xvf hugo_extended_"$HUGO_VERSION"_Linux-64bit.tar.gz

# Execute the site generation with Hugo
chmod +x ./hugo
./hugo --gc --minify

# Sync the site to Cellar
./rclone-v$DL_RCLONE_VERSION-linux-amd64/rclone sync ./public mys3:$MY_DOMAIN --progress --s3-acl=public-read

Now what's left to do is add and commit all the files and deploy.

git add .  # add the current folder to git
git commit -m"init" # commit
clever deploy # Deploy your website

The application will start, generate the website and sync it to Cellar then stop itself. So there it is you will still have your website running, but without running an application.

Please let us know what you think and what kind of features you would like to see supported for static sites :)


Profile picture of Laurent Doguin
By Laurent Doguin

Head of Developer Relation @clever_cloud. Devoxx Champion. I am also a nerdy metal head living in Paris.