How to Deploy a Static Site on Cellar
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.
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.
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
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"
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 🙂