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.
Update 2016-11-22: You can find the open source Octopress version of this blog circa 2015 right here. Once you’re ready to move on from GitHub try Simple Websites with Jekyll and Docker. And, once you’ve nailed that approach, try going for PageSpeed 100 with S3 and CloudFront.
Follow along to learn how to host images on S3 with Octopress.
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 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=3Bv0GjJjDPRKC5rJdZn4b2 --add env.global
Warning: Never store secrets in plain text. Don’t put them online either. Instead utilize encrypted Config variables, and even then be careful.
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 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!