Image Routes on Hakyll

Posted on January 11, 2023 by Michael Keane Galloway

I’ve been using Hakyll to build this site. One of the limitations that that has posed is organizing images for posts. The tutorials usually set you up with a route like the following:

    match "images/*" $ do
        route   idRoute
        compile copyFileCompiler

This copies all of the images under the images directory into the _site directory. Then when you run the watch command, you’ll be able to load images from there and use that directory as the source for your img tags.

Unfortunately, that also means that all of my images have to be in a flat structure in the images directory. Initially, I solved this problem by naming convention, but I really wanted to have images grouped by post. I think my ideal solution would allow me to have any directory structure that I want and have that copied into the _site folder.

I have done a little digging, and haven’t figured out my ideal solution for this problem. What I did see was a reference to Unix file patterns, and that led me to test the following change to my site.hs:

    match "images/**" $ do
        route   idRoute
        compile copyFileCompiler

Having the ** as a file pattern for the patch allows me to serve up images from subdirectories of the images directory. While this doesn’t let me nest any further than that, I can now atleast organize all of my images for posts into a directory corresponding to the post.