After many years of using Joomla and Wordpress to create websites, I am now looking to move all of my sites from a traditional web hosting company to Amazon Web Services. As an advocate of cloud services, I really should practice what I preach, and also gain the advantages of virtualisation, scalability and access to a global content delivery network. If possible I would like to reduce my hosting costs too.

##Reticence I had been holding back from this migration for several reasons, not the least the investment of my time to figure out the best way, but also a few other reasons: the support I get from my current supplier, possible issues over security, a definite increase in complexity if I have to personally support all these sites, as well as a potential increase in costs due to needing to use Amazon’s EC2 service, which while not expensive for one site, would increase the cost if I needed to launch an EC2 instance for each site I manage.

My ideal would be to host my site on Amazon Web Services S3. This has been ridiculously cheap to use as storage and has for a while supported the hosting of static websites. However it doesn’t support the database backed dynamic sites that I typically use.

To deploy a new site in Joomla or Wordpress I can register a URL, upload the latest version of my software of choice, add a new template, my content and customisations. I can usually get a basic site up and running in a few hours and add and configure new modules and components within a day.

Coding and maintaining a static site looked like a much harder option - HTML5 CSS3 is far too much like hard work, especially for a blog site where I would constantly be needing to recreate the HTML every time I added an article!

##Jekyll without Hyde Almost by accident I stumbled across Jekyll, a blog site generator which would allow me to host my site on a web server, Amazon S3 or even Dropbox and there was no need for a back end database to store the content. All the updating is done automatically on my laptop and then the static files can be uploaded to S3.

It sounds like it could be fantastic for my needs: my cost per site would be much lower, in addition any security issues I may have would disappear, no SQL injection attacks, no hacks based on the dynamic nature of the site. With Jekyll there would be no interaction with users, where the user requests information from the database and the site dynamically assembles the view and returns it to the user, so there would be far fewer things available to hack. So Wordpress and Joomla security patches become a thing of the past.

Surely there are some downsides to this? Well certainly I would need to learn a few new things, how to configure Jekyll for a start. Jekyll is a Ruby Gem…..a what? OK some Googling later I find Ruby is a programming language made famous through “Ruby on Rails” which is used to create many modern web applications and a “Gem” is an application written in Ruby. However I don’t need learn to code in Ruby, just set up the Ruby environment and use the Jekyll gem, and everyone writing on the topic makes that sound easy!

If I want a nice looking website I’ll need some CSS3 knowledge, back to Google,… I can download an existing Jekyll site or download the Twitter Bootstrap framework, …OK! Jekyll scripts use the Shopify liquid language,….OK more new stuff I’m sure I’ll cope.

One thing I really liked was that to write an article and post it on the site all I need to do is create it in Markdown and put it in the “_posts” folder, Great! I write all my existing posts in Markdown anyway so all I’ll need to do is copy and paste my draft articles into a folder on my laptop when they are ready to go live.

It looked interesting enough in that it was a slight extension of my skill set, without needing to learn to code in anything other than HTML. In addition my girlfriend needed a new website so this looks like a project with a purpose!

Setting up the environment

All the advice I’d read on this said it was easy to set up the Ruby environment on OSX as Ruby was installed by default. This however didn’t quite go as planned. Here’s the most common advice you read.

Open up Terminal and type the following:
Install Jekyll: gem install jekyll

Set it up: jekyll

Here’s what I got:
-bash: Jekyll: command not found

So not so easy then! Google you gave me a lot of false starts on this one!

I eventually found a method that worked for me using Homebrew and RVM. I’ll document it in a “How-To” post with all the details.

##Developing with Jekyll Once the Ruby environment was up and running with Jekyll installed things became much easier. Jekyll has a web server built in so as you make changes to your files you can instantly view the results. This makes my usual approach of a ‘poke-and-hope’ methodology a breeze! Making changes to the files and instantly viewing the results speeds up development considerably. As you will be writing text based code you will need a tool for this. I chose Sublime Text (v3 beta) it gives you a free trial and really helps with the marking up of the code.

The majority of Jekyll users host their sites on GitHub so you will need to bear this in mind when Googling for information.

##Creating a template The main Jekyll demonstration sites are based on some pretty ugly defaults. To create responsive HTML5 templates I’ve focused on using Twitter Bootstrap as it makes it easy for me to then buy a template or convert one of the free ones and all the work on aligning the views across multiple platforms has been done for me.

My first attempt was www.abettergrip.com, leave a comment if you like it! I used many of the defaults and it was quite easy to convert an existing Bootstrap template into a Jekyll site. There is a lot of available documentation and war stories, although much of it for older versions of Bootstrap, we’re at Bootstrap 3.0 as I write this.

I found a variety of ways to show my blog posts, the default site in Jekyll shows the blog page as a list of links, I’ve tried a few other options, including having the full article showing on the main page, I’ve also tried it with excerpts and “read more” links.

This site, www.markgibson.info, is the most advanced one I’ve built so far, I got to grips with the Liquid tempting language to adapt a static template into a Jekyll one. I’ve added my own version of categories using some borrowed javascript and have some great ideas on developing it further. I’ve started documenting this so the “how-to” articles will be posted on this site in the near future.

##What’s in a domain name? To give your bucket on S3 a domain name, use AWS Route 53 and whomever you use for domain registration. There are some technicalities here to bear in mind but once you’ve done it for one site it’ll take you about 5 minutes for each site after that. Again description coming in the “how-to”.

##Posting new articles To automate the posting of articles, most sites recommend the Jekyll-S3 Ruby gem, but that has now been deprecated and replaced by S3_website which works beautifully, and with a single command posts your latest articles or site changes to the web.

So to update your site, drop your new posts written in Markdown in the “_posts” folder on your hard drive, fire up terminal and type s3_website push

Done!

I’ve taken automation a little further and I can now drop the new article into a specific “New Posts” folder and it will automatically move it to the right place in my Jekyll source folder, add the date and run a script to upload to S3. I extended this a bit using dropbox so my girlfriend could easily add her own posts to her own Jekyll site without having Jekyll set up, this means she can now post from her iPad and it all works automatically.

##Comments A blog is part of the “social web” therefore we do need to allow some interaction with the site by its readers, so how can a static site accept comments? I’ve added Disqus, a free service which enables you to embed comments in your site and manage them too. You can sign up to Disqus, register your site and add the Disqus code to your posts layout page. You may also want to remove the random suggested sites added by default by logging into Disqus and selecting Settings > Discover > Increased traffic or comments only.

Simple, cheap, secure, interactive and fast! What’s not to like?

I’ve now created three sites in this way and am looking at converting all my websites to S3. If I lose my web reseller account then my costs will be 1/10th of what they are now.

Only one problem …email hosting! OK this will definitely be the subject of another post!