I was introduced to Jekyll as a platform by a colleague at the Open Government Hack Night. Up until recently my blog was built on WordPress, and right away I was excited by the idea that I could write both content and code from the same place, that is, my text editor. Also, keeping my content under version control and not having to deal with finicky web-based WYSIWYG editors was a big plus for me too. It was either that night or the next day that I started rebuilding my site with Jekyll and, at least for the moment, I am totally smitten with this platform.
One of Jekyll’s strengths (everything kept in Git) quickly turned out to be a stumbling block when I first tried to commit a bunch of my photography to the repository. As I waited 30+ seconds to even be prompted for the commit message, I realized that keeping all of my images checked directly into the repo was going to make it impractically large and unwieldy.
The solution is simple, and outlined in a few steps here:
1) Store images in my Dropbox
Dropbox accounts all have a folder called
Public, a default directory which makes any file in it available publicly on the interwebs at a consistent root URL, following whatever directory structure is laid out within it. For me that URL is
https://dl.dropboxusercontent.com/u/8637739, into which I put a directory called
benwilhelm.com, where I would put all of my photos organized into further subfolders as desired.
2) Create a site variable that is the Dropbox public URL
_config.yml file, I added the following line:
which means that I can now embed the images from my public folder into my markup thusly:
Added bonus: if I ever decide to go with a different solution for file hosting/sharing, I can simply update the site variable and not have to worry about each individual path.
3) Optional: Use Grunt.js for further image processing
I use grunt.js for managing development and deployment tasks. In order to create versions of my photos at different sizes (thumbnail, medium, large, etc), I created a grunt task using grunt-image-resize which scans the
originals folder and creates corresponding images at multiple resolutions in folders called