static Archives | Clever Cloud

How to Deploy a Static Site on Cellar

Laurent Doguin — Wed, 24 Jun 2020 12:00:00 +0000

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.

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 :)

How to Deploy a Hugo Static Site

Laurent Doguin — Thu, 18 Jun 2020 12:35:00 +0000

⚡

Update Available

The process has been simplified! Check out our new static runtime with automatic build for Hugo with version management.

🚀 Discover easy Hugo deployment

Clever Cloud launched a french speaking podcast about two weeks ago. We decided to use the Hugo static site generator to make it available online. This post explains how we deployed it. There are many technical solutions out there to host your podcast, like Ausha or Anchor. They will allow you to configure everything needed and upload your material so you get a proper RSS feed in the end. Because Podcast subscribtions are basically RSS feed subscribtions. And these services can also go the extra mile and automatically distribute your podcast to other sites. This is actually the main reason why we use Ausha. It's way easier. That being said we still want to have a dedicated page on our existing website and host the RSS and media files ourselves. And it turns out there is a great Hugo theme for podcast hosting. If you are not familiar with Hugo it's one of the most popular static site generator. It's fast, mature, loaded with cool features and still in active development. Community is super helpful and you will find many different themes for different purposes like blog, documentation, FAQ or even podcast. To follow along you need to install git, hugo and clever-tools. Let's see how this works.

Create a new Hugo website

Creating a new Hugo website is pretty straightforward. Create a folder to contain your site and inside it run hugo new site. Then you can add the theme you want as a submodule, copy the theme sample configuration and you should be ready to start working on your site. Here's what I did:

mkdir mysite
cd mysite
hugo new site .
git init
git submodule add https://github.com/mattstratton/castanet themes/castanet
cp themes/castanet/exampleSite/config.toml config.toml 
git add .
git commit -m'init'

From here you can run hugo server and your site will be available at localhost:1313, with automatic reloading and file modification watching. This command will fail because it cannot find the theme. No worries, it's because we copied the config file from the theme directory, and its theme folder location is hardcoded. We don't need it anymore. So go ahead and edit config.toml. Start by removing or commenting themesdir on line 6. Then add your own configuration and create new content. I have set the baseUrl to clever-cloud.com/fr/podcast. Notice that this is not a traditional baseUrl as it's assuming something else is already running on clever-cloud.com. And this is fine, Clever Cloud knows how to manage this. From here you can add some content and finish your own configuration. Then it's time to deploy on Clever Cloud.

Deploy to Clever Cloud

At the root of your website create a file called hugo.sh with the following content:

wget https://github.com/gohugoio/hugo/releases/download/v$HUGO_VERSION/hugo_extended_"$HUGO_VERSION"_Linux-64bit.tar.gz
tar xvf hugo_extended_"$HUGO_VERSION"_Linux-64bit.tar.gz
chmod +x ./hugo
./hugo --gc --minify --destination public/fr/podcast

Don't forget to make it executable with chmod +x hugo.sh, add and commit it. This script will be executed by Clever Cloud thanks to our deployment hooks. It downloads Hugo with the version you specified in the environment variables then run the build of the website. The build destination is specified manually as public/fr/podcast, the default would be public. This is because we need to serve the content on clever-cloud.com/fr/podcast and not just clever-cloud.com. Now let's use clever-tools to create, configure and deploy the application. In the terminal run the following:

clever create --type static-apache mysite
clever domain add clever-cloud.com/fr/podcast
clever config set force-https enabled
clever env set CC_PRE_BUILD_HOOK "./hugo.sh"
clever env set CC_WEBROOT "/public"
clever env set HUGO_ENV "production"
clever env set HUGO_VERSION "0.68.3"
clever deploy

This will create the application on Clever Cloud, add the custom domain clever-cloud.com/fr/podcast, and yes this works even though we already have an application serving clever-cloud.com. The new domain will take precedence. Then we enforce HTTPS redirection and set a bunch of environment variable for our configuration. Last command deploys the website to Clever Cloud. From here you should see logs popping up. And this is it. You have deployed a static website in production that will be updated automatically each time you push new content, on top of an existing website. Please let us know if you have any questions about static site deployment.