Resizes images pushed to Github and saves them to S3, replacing the original on Github with a lo-res version
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.
-
Create an Amazon S3 bucket for your images.
-
Deploy this server to Heroku by clicking the button below. Copy the
GITHUB_SECRET- you will need that for setting up the Github webhook. -
Create a webhook on your Github repo. Payload Url should be
https://YOUR_APP_ID.herokuapp.com, Content Type should beapplication/json, Secret should be the same as theGITHUB_SECRETenvironment variable on your Heroku App. You should just send thepushevent. 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.
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