Sync Middleman with Amazon S3

One thing that I love using Middleman and Amazon S3 is that they’re a perfect combination for building and hosting a static HTML5 site.

Indeed, using Middleman, you can generate an HTML5 Boilerplate in one command:

middleman init my_new_boilerplate_project –template=html5
After generate a template, you can start up your development server by using command:
bundle exec middleman server (or just) middleman server
When you finish your site, you can build your site using command:
bundle exec middleman build
Is it better you can sync Middleman with Amazon S3 automatically when you build your site, so that you don’t need to use any other FTP clients to upload these files manually? Yes, middleman s3_sync can do it for you:

In your Gemfile, add following lines:

gem ‘middleman-s3_sync’

In your config.rb file, activate your middleman s3 sync

activate :s3_sync do |s3_sync|
  s3_sync.bucket                     = ‘your_s3_bucket_name’ # The name of the S3 bucket you are targetting. This is globally unique.
  s3_sync.region                     = ‘us-west-2’     # The AWS region for your bucket.
  s3_sync.aws_access_key_id          = ‘your_access_key_id’
  s3_sync.aws_secret_access_key      = ‘your_secret_access_key’
  s3_sync.delete                     = false # We delete stray files by default.
  s3_sync.after_build                = false # We chain after the build step by default. This may not be your desired behavior…
  s3_sync.prefer_gzip                = true
  s3_sync.path_style                 = true
  s3_sync.reduced_redundancy_storage = false
  s3_sync.acl                        = ‘public-read’
  s3_sync.encryption                 = false

Make sure you install all the necessary gems to your app.

 bundle install

Now you can sync your files to S3 using:

 middleman sync_s3

More Articles

Set up Nginx with Centos

Create App With Meteor

Middleman Localization

Setting up Amazon Web Services