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
As soon as the deployment is done you need to install Jekyll.
Goto your Web-App settings, look for Extensions in the
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
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
Paste following contents:
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
Additionally we create a new entry with
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
If you do not see the file you might create it first. Add the following content:
Time to upload the content, I assume you have a Jekyll site allready, if not you can download a sample site
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 (
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?
- Create a new CDN-Profile with a provider that suites your needs
- Create an Endpoint and point the Origin Type to Web-App, Orgin Hostname to your Web-App instance.
- Remember that it could take some time after the Endpoint is created, and available.
- 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
Well there is a solution, goto Kudu (Web-App Settings) and open a shell.
Change the directory to
and install the extension via
gem install jemoji