Blogging with Jekyll and S3

Why Jekyll and S3?

I finally decided that I need an internet presence and that it should start with a blog. The obvious choices are a Ruby on Rails application, Sinatra, Jekyll, Wordpress, Tumblr, or Posterous. The first 2 would require a VPS, and I don't want to pay $20/mo for a blog. The last 2 have a focus on microblogging, which I'm not really interested in. I've decided that my own domain is important so that locks me out of the free option on Wordpress. S3 is extremely cheap for hosting a static site, and Jekyll looked interesting. So the decision was made.

There are a lot of sites that discuss Jekyll and S3. I'm going to focus on the parts that I didn't run across immediately.

How to with Jekyll

Add a Rakefile that will run it locally in a faster way than the default. I like Unicorn. My Gemfile looks like this:

1 source 'http://rubygems.org'
2 
3 gem 'jekyll'
4 gem 'rack-contrib'
5 gem 'rdiscount'
6 gem 'unicorn'

Skip rack-jekyll. Add a config.ru like this:

 1 require 'rack/contrib/try_static'
 2 
 3 use Rack::TryStatic, 
 4 {
 5  :root => "_site",
 6  :urls => %w[/],
 7  :try => ['.html', 'index.html', '/index.html']
 8 }
 9 
10 run lambda { [404, {'Content-Type' => 'text/html'}, ['Not Found']]}

Setting up S3

• S3
  • add a bucket to S3 named after your website (www.elonflegenheimer.com)
  • select properties on the bucket
    • permissions tab
      • if you want to deploy using a different user, edit the bucket policy (see below)
    • website tab
      • check enabled
      • index document: index.html (make sure you have one in your project)
      • note the endpoint
  • upload your content to S3 (an exercise for the reader - lots of choices)
• IAM (optional step)
  • add a user
  • select user
    • security credentials
      • download access keys
    • summary tab
      • note user ARN
• Your DNS provider
  • www.elonflegenheimer.com CNAME www.elonflegenheimer.com.s3-website-us-east-1.amazonaws.com
• somewhere else (heroku?)
  • add a redirect from the naked domain to the www version.

A bucket policy that will allow everyone to read the repository and only the additional user to write:

 1 {
 2  "Version": "2008-10-17",
 3  "Id": "Policy...",
 4  "Statement": [
 5      {
 6          "Sid": "Stmt...",
 7          "Effect": "Allow",
 8          "Principal": {
 9              "AWS": "ARN that you noted above"
10          },
11          "Action": "*",
12          "Resource": "arn:aws:s3:::www.elonflegenheimer.com/*"
13      },
14      {
15          "Sid": "PublicReadGetObject",
16          "Effect": "Allow",
17          "Principal": {
18              "AWS": "*"
19          },
20          "Action": "s3:GetObject",
21          "Resource": "arn:aws:s3:::www.elonflegenheimer.com/*"
22      }
23  ]
24 }

Adding twitter bootstrap

I've previously used Gems or the easy option with Twitter Bootstrap. I opted for the harder way here. I'm not sure why straightforward steps are so hard to find. The gist of it is:

• clone twitter bootstrap to a permanent reference location
• install nodejs, npm, and less
  • sudo apt-get install nodejs
  • npm install less
  • export lessc into PATH
• javascript
  • copy the javascript files to a temp folder in your jekyll project
  • minify each of the javascript files with the uglifier gem
  • add references to the minified javascript files in an includes file or in the relevant layout
• css
  • copy the less files to a temp folder in your jekyll project
  • add a local custom.less file than imports bootstrap.less
  • run "lessc --compress custom.less bootstrap/css/bootstrap.min.css"
  • add references to the minified css file in an incldues file or in the relevant layout
• images
  • copy the image files to your jekyll project