Skip to content
Resizes images pushed to Github and saves them to S3, replacing the original on Github with a lo-res version
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
controllers
helpers
routes
test
.travis.yml
Procfile
README.md
app.js
app.json
package-lock.json
package.json
server.js

README.md

github-image-resizer

Build Status

Resizes images pushed to Github and saves them to S3, replacing the original on Github with a lo-res version

Why?

Responsive images for a static site.

We use jekyll, a static site generator, for our website and we edit it with Prose. Prose is a web app that connects directly to Github and allows somebody to edit markdown on Github without needing to use git or the command line.

Prose includes functionality to upload images to Github with a post. The problem is that our website is responsive, and we do not want to use the full-resolution image on smaller devices. There are online services to dynamically resize images on each request, but they cost money, and don't match the static site mentality.

Our solution is to convert each image to multiple sizes when we first upload it, then we replace the original image with a lo-res version that will load on initial page load. We then check the screen size of the website when it loads and load the correct sized image to replace the placeholder.

Installation

  1. Create an Amazon S3 bucket for your images.

  2. Deploy this server to Heroku by clicking the button below. Copy the GITHUB_SECRET - you will need that for setting up the Github webhook.

    Deploy

  3. Create a webhook on your Github repo. Payload Url should be https://YOUR_APP_ID.herokuapp.com, Content Type should be application/json, Secret should be the same as the GITHUB_SECRET environment variable on your Heroku App. You should just send the push event. Set your webhook to active.

When you make a push to Github that includes an image that matches /.+\.(jpg|jpeg|png|tif|tiff|gif)$/ then you will get a bunch of different sized images in your S3 bucket, and the original will be replaced with a lo-res version in your repo.

Testing

You will need to set a GITHUB_TOKEN for a testing account. Tests will create a temporary repo (named temp + current date stamp) and then delete it after tests complete.

npm install
npm test
You can’t perform that action at this time.