Hosting a Jekyll website on Bluemix

As you might know, this site is created as a static website with Jekyll.

GitHub Pages in combination with Jekyll is a simple yet powerful tool to build and serve static websites. However, by default you website will be located at username.github.io, e.g., http://drissamri.github.io for this page. Generously, GitHub provides means to add a custom domain to your GitHub Page.

There are a few limitations, but for me the only limitation that was bothering me that there is currently no support for SSL on custom domains. You can partly work around this problem by using a service like CloudFlare, although it won’t give end-to-end SSL it is definitely better than using no SSL.

Since I like Bluemix, IBM’s Platform-as-a-Service based on the open source Cloud Foundry, I decided to give it a shot to deploy my website and setup SSL on it. If you haven’t tried it yet, definitely do! You can get a 30-day free trial, and afterwards you can still use the free tier. The free tier is plenty to host a few applications. Since Bluemix uses Cloud Foundry, I will mix both terms throughout this post.

Deploy your application on Bluemix

I prefer to work with the Cloud Foundry CLI instead of the Bluemix website, but both ways work. If you’re scared of a terminal, feel free to use the website.

The most important artifact for a Cloud Foundry application is the manifest.yml which defines metadata about your application. You can find the full manifest here.

---
applications:
- name: drissamri-blog
  memory: 64M
  host: drissamri-prd
  path: _site/
  buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
  stack: cflinuxfs2

name: Name of your application.
memory: Specify how much memory your application needs.
host: This defines the name for the subdomain (yourhost.mybluemix.net).
path: Specify what folder gets pushed. If not defined, defaults to the current directory.
buildpack: Specify what kind of buildpack your application needs.
stack: Bluemix currently defaults to an older stack (lucid64) so you better specify this if you are using a recent buildpack. More information here: Cloud Foundry stacks

Once you saved this file, you can use the Cloud Foundry CLI to push the application. Make sure you your Cloud Foundry CLI is pointing to the desired region (EU or US). Go ahead and get your baby in Bluemix with cf push.

cf push

Using stack cflinuxfs2...
OK
Updating app drissamri.com in org drissamri / space prod as driss.amri@optis.be...
OK

Using route drissamri-prd.drissamri.com
Uploading drissamri.com...
Uploading app files from: /Users/driss/workspace/drissamri/drissamri.github.io/_site
Uploading 626.3K, 76 files
Done uploading
OK

Starting app drissamri.com in org drissamri / space prod as driss.amri@optis.be...
-----> Downloaded app package (1.3M)
Cloning into '/tmp/buildpacks/staticfile-buildpack'...
Submodule 'compile-extensions' (https://github.com/cloudfoundry-incubator/compile-extensions.git) registered for path 'compile-extensions'
Cloning into 'compile-extensions'...
Submodule path 'compile-extensions': checked out 'ce9345a9a6e7b00266194cadd18dbef37e791a7b'
-------> Buildpack version 1.2.1
grep: Staticfile: No such file or directory
-----> Using root folder
-----> Copying project files into public/
-----> Setting up nginx
grep: Staticfile: No such file or directory
-----> Uploading droplet (4.8M)

1 of 1 instances running

App started


OK

App drissamri.com was started using this command `sh boot.sh`

Showing health and status for app drissamri.com in org drissamri / space prod as driss.amri@optis.be...
OK

requested state: started
instances: 1/1
usage: 64M x 1 instances
urls: drissamri-prd.drissamri.com
last uploaded: Wed Sep 2 20:34:35 UTC 2015
stack: cflinuxfs2

     state     since                    cpu    memory        disk          details
#0   running   2015-09-02 10:35:08 PM   0.0%   4.1M of 64M   10.6M of 1G

Now your application should be available on https://YOURHOST.mybluemix.net.

Setup your custom domain in Bluemix

I want my site to be available on drissamri.com and www.drissamri.com. There’s a few easy steps to do to accomplish this. If you are OK with using the default Bluemix URL of your application or you don’t have a custom domain, you can skip these steps.

First you will have to define your domain in Bluemix. Create the domain in Bluemix and associate it with an organization, in my case it’s called drissamri.

cf create-domain drissamri drissamri.com
cf create-domain drissamri www.drissamri.com

Now your domain is known within your organization, next you’ll want to map this domain to your application. Both my domain name and application name are called… drissamri.com.

cf map-route drissamri.com drissamri.com
cf map-route drissamri.com www.drissamri.com

Enable SSL

One of the reasons of moving my blog was to be able to enable and force SSL on my site. I already have a SSL certificate for my website, if you need one I can recommend SSLMate. By the time you are reading this, it might be worth checking out letsencrypt.org if they are already issueing certificates.

Unfortunately as far as I know, you can’t manage certificates with the Cloud Foundry CLI, so you’ll have to switch over to the Bluemix website. Navigate to the Manage Organizations and go to the Domains tab. Here you should see your newly created domain.

Perfect. Now you can upload the SSL certificate for this domain by clicking on the upload icon. Here you have to upload your private and public certifcates, and possibly an intermediate certificate.

Now Bluemix knows about your domain and your certificate, but the actual forwarding from your domain to the Bluemix application still has to happen. This has to be done on your domain DNS manager. My domain is registered at GoDaddy but I’m using the free CloudFlare plan for security and caching features. Your A record should point to the Bluemix DNS server, the server IP depends on which region you are using for your application. For me currently in the EU I have to use 5.10.124.142 but you should verify in the documentation for up-to-date information.

One last thing, if you want to force SSL usage of your site on HTTPS, you have to add another property to your manifest.yml. This is a feature of the staticfile-buildpack that we defined for our application.

env:
  FORCE_HTTPS: true

That’s about it! Up and running on Bluemix with a custom domain in a few minutes. It’s been running pretty smooth so far.