How can I setup Jekyll for a blog with a large image directory, so as to avoid duplicating that directory in the generated site?

Question

I'm considering Jekyll for a site I'm putting together that will be a blog with lots of images (and other larg-ish media files). It's easy enough to to make a directory for images and then link to them as needed in the posts. But, as I understand it, when the site is generated, all the image data will be duplicated into the generated _site directory that holds the static files. Each time the site is generated the _site directory is emptied, and repopulated with the static version of the site.

Is there any way to, for example, drop a symlink to the images directory inside the site directory, and then maybe have jekyll ignore it when the static files are generated?

Or is there another way to go about this that makes more sense?

Answer 1

Assuming you are running on an apache web server, you can setup an Alias directive to serve images from a directory outside of the normal docroot. You need access to edit the VirtualHosts config or some other ability to create aliases directives (e.g. via a control panel).

For an example of how this would work, let's say you are storing your jekyll files under a directory called "/web/jekyll". To get your images directory do the following:

1. Add an "_images" directory along with your basic jekyll tree. Ending up with something like:

   _config.yml
   _images/
   _layouts/
   _posts/
   _site/
   index.md
   

2. Update your apache config to add the Alias directive like:

   Alias /images /web/jekyll/_images
   

3. Reload the apache config and run jekyll to build the site.

Since the image directory name starts with an underscore, jekyll won't push/copy it to the output _site during the build. Apache will happily serve most files from your _site directory as normal, but when it sees something like "http://jekyll/images/test.jpg", instead of looking for the file under "/web/jekyll/_site/_images/test.jpg", it'll serve it from "/web/jekyll/_images/test.jpg".

---

Incidentally, I like a little more separation of the source content and output content than jekyll defaults to. So, I setup my directory structure as follows:

/web/jekyll/html/
/web/jekyll/images/
/web/jekyll/source/
/web/jekyll/source/_config.yml
/web/jekyll/source/_layouts
/web/jekyll/source/_posts
/web/jekyll/source/index.md

With the following option set in _config.yml

destination: ../html

And the apache alias directive setup with:

Alias /images /web/jekyll/images

Jekyll is run in the "/web/jekyll/source" directory, but output is sent to the "/web/jekyll/html" dir. Similar to the first example, calls to "http://jekyll/images/test.jpg" are served from "/web/jekyll/images/test.jpg". This setup doesn't really make a difference from a site serving perspective. I just like the cleaner separation between the raw source files, the fully baked output files and the images which work via the alias.