Jekyll - Low Cost Static pages on Azure

This article gives you instructions on howto host a low cost, static website on Microsofts cloud platform Azure.

Create a new Web App

Create a new Web App using portal.azure.com.
Choose a subdomain and make sure you use/create a App Service plan with the Free (F1) tier.

Preparing the environment

Install Jekyll

As soon as the deployment is done you need to install Jekyll. Goto your Web-App settings, look for Extensions in the Developmenttools section.
Click on Add, search for Jekyll and install the extension.

By the time of writing the installation of the Jekyll extension fails, However it is installed!

Source, Destination and Build folders

Goto:

https://<your-name>.scm.azurewebsites.net/dev/

This brings up the *new* App Serivce Editor where you can edit and upload files.

Bookmark this site, we will use this editor later to create and edit posts.

Move your mouse over WWWROOT on the left sidebar and create three folders:

• src - for our source files
• dst - for the files generated by Jekyll
• build - for our build script (that triggers Jekyll)

To save resources in the free App-Service plan we only build the website on demand, therefore we need a build script that runs as soon as we changed content.

Create a new file in the build folder and name it index.php.
Paste following contents:

<?php
    $jekyll = 'D:\home\SiteExtensions\JekyllExtension\Commands\Ruby-2.2.3\ruby-2.2.2-i386-mingw32\bin\jekyll.bat';
    $srcDir = 'D:\home\site\wwwroot\src';
    $dstDir = 'D:\home\site\wwwroot\dst';
    // ==================================================

    header('Content-Type: text/plain');
    header('Cache-Control: no-cache');
    ini_set('output_buffering', 'off');
    ini_set('zlib.output_compression', false);
    ini_set('implicit_flush', true);
    set_time_limit(0);
    chdir(dirname($jekyll));
    $handle = popen(basename($jekyll).' build -s "'.$srcDir.'" -d "'.$dstDir.'" 2>&1', 'r');
    while(!feof($handle))
    {
        echo fread($handle, 1024);
        flush();
    }
    pclose($handle);
?>

Now we need to change the root of our Web-App to the newly created dst folder:
Go to your Web-App Application settings and scroll to the Virtual applications and directories section.
Change the physical path from site\wwwroot to site\wwwroot\dst.

Additionally we create a new entry with /some-random-string and site\wwwroot\build. This will point to our build script, so use a truly random (long) sequence of letters and numbers (e.g. lQFtbZ6c1LuOkjhP0JWR), keep this secret!

Back in the App Service Editor we link to this build folder by adding a run.suffix key to the .settings/settings.json file.
If you do not see the file you might create it first. Add the following content:

{
    "run.suffix": "/some-random-string"
}

Uploading sources

Time to upload the content, I assume you have a Jekyll site allready, if not you can download a sample site somewhere.
There are multiple methods to upload the site, I recomend using FTP. You can set an ftp username and password in the settings panel of your Web-App (Settings->Deployment credentials).

Upload all sources to wwwroot/src.

Building your site

Goto the App Service Editor and hit the Play Button, a new window will open and execute the build script.
Your site should now be ready.

Creating a CDN for more speed

Since we have a static website, why not cache everything with a fast cdn?

1. Create a new CDN-Profile with a provider that suites your needs
2. Create an Endpoint and point the Origin Type to Web-App, Orgin Hostname to your Web-App instance.
3. Remember that it could take some time after the Endpoint is created, and available.
4. Add your domain to the Endpoint

Keep in mind that the CDN providers charge you by bandwith, meaning more traffic means more costs. In this scenario the only cost factor is the CDN, however you could skip the CDN and drop the costs to 0. But keep in mind, that the Free Service has bandwith quotas and your site might go offline.

Enabling SSL for the site

By the time of writing it is not possible to assign a certificate to the custom CDN Domain. However Microsoft plans to add support for this on Q4 2016.

Install Jekyll Extensions

So your site relies on some jekyll extensions such as jemoji or github-pages?
Well there is a solution, goto Kudu (Web-App Settings) and open a shell.
Change the directory to D:\home\SiteExtensions\JekyllExtension\Commands\Ruby-2.2.3\ruby-2.2.2-i386-mingw32\bin and install the extension via gem:

gem install jemoji