Glancing over the Octopress plug-ins list yesterday I noticed something I hadn’t seen before, an Image tag & uploader for S3. Curious to tinker around with it I set-up an account for S3 and integrated it today to decrease my blog header background image size and serve it from the cloud with caching.
Learn how to host images on S3 with Octopress.
Update 2016-11-22: You can find the open source Octopress version of this blog circa 2015 open sourced GitHub. Once you’re ready to move on from GitHub try hosting Jekyll on DigitalOcean using Docker. And, once you’ve nailed that approach, try going for PageSpeed 100 with S3 and CloudFront.
Create S3 bucket
Before we get started, create a bucket on S3. I recommend using an
images subdomain so cookies from the
www don’t bleed over and chew up bandwidth for image requests. That’d net a bucket with an ID such as
Install plug-in script
To install the Octopress plug-in script
cd to the root of your blog’s local git clone, ensure you’re on the
source branch and do the following:
cd plugins curl -O https://raw.githubusercontent.com/TheAshwanik/aws_s3_imagetag/master/aws_s3_imagetag.rb
The preceding commands will pull down the Ruby script we need to get everything working and save it to the Octopress plugins directory.
Once the plug-in script is installed some build-time configuration is needed. See the plug-in
README.md for instructions on how to get that going. Or, if you’re using Travis-CI you can model from the following
env: global: - AWS_BUCKET=images.squidward.org - AWS_CUSTOM_DOMAIN=images.squidward.org - S3_DIR=source/images/toS3 - AWS_UPLOAD=true - secure: kMICJKIexxeIEaT0qUv4mTRpNeitiZYGNhXt6xwcki6hVsFNbKYIAddz4SHYNQ5VatC1Uat3Bv0GjJjDKC5rJdZn4b2NBRwwWmIzo+BOy6ejvZxrUPBAkqVNWnDD0Ht/q72buJtc6YVVXEdIdw/8CC5iWTBOgwqtcoE7Wsm7EdE= - secure: ONJOfICPkuk93jMl5402mX2FFmDx79iHIe5LHbs0bAAaBwVKzDe3ZWUI7JgiS9V21EQ8d3FtRnajRSLD/HMiQexjJbrMReRkohasLp4aoppf0Bd21lJDvZgN8lSYkUguYQTVq8vnE7mqeYmo8sx/X0IcEkXeUWgcr+EMVmX5YIw=
secure keys. Those hold key-value pairs for the
AWS_SECRET_ACCESS_KEY requested by the plug-in script when the site is generated. They’ve been obscured using the
encrypt feature for security purposes.
To generate and save secure keys for Travis do the following from your blog’s root directory:
sudo gem install travis travis encrypt AWS_ACCESS_KEY_ID=8CC5iWTBOgw --add env.global travis encrypt AWS_SECRET_ACCESS_KEY=3Bv0GjJjDKC5rJdZn4b2 --add env.global
If you’re not sure of your AWS access keys new ones can be generated using the AWS Management Console.
The plug-in script has a dependency we need to install before it will run successfully. We’ll install it using a convenience tool called gemrat.
sudo gem install gemrat # install gemrat utility gemrat install aws-s3 # installs gem AND saves to Gemfile
aws-s3 gem is added to the
Gemfile run a
bundle exec bundle install to create a new
Gemfile.lock, installing the
bundler gem as a prerequisite if necessary.
The specific implementation for each blog will differ depending on how it’s set-up. If you’re using Travis the information and examples here along with my blog source and migration instructions should get you to the finish line. If your using rsync or some other method to get the plug-in working why not share how how it’s done? Good luck!