Jekyll Environment Variables

I was working on User Guide for Gaurilla and thought of creating those using something which I haven't used before. As most of the User Guide would be static content, I chose to go with a Static Site Generator called Jekyll.

If you want to take my word on it - it's awesome. Try it out.

When making layout for the User Guide (which would be just be minimal viable thing), I struck a bad bad issue. To inclue stylesheets and javascript files in layouts, I had to write complete path and as development URL was not same as production URl (which, I am still to figure out), I wanted some kind of environment dependent variables using which I could generate complete paths to stylesheets and javascript files.

After digging a lot, I found solution where I didn't expect it to be - Official Documentation. But because it wasn't easy to reach to it, I thought some might find it useful if they got exactly what is required.

Here's my _config.yml file:

source: ./src  
destination: ./dist  
name: "Gaurilla - User Guides"  
description: "Help articles for using Gaurilla"  
url: "http://guide.gaurilla.com"  
markdown: rdiscount  
permalink: pretty  
pygments: true  

I was including stlyesheets and javscript files like this:

<link rel="stylesheet" type="text/css" href="{{site.url}}/styles/main.css"/>  

Now, the {{site.url}} will resolve into the url property from the _config.yml file. But I for development purposes, I wanted to be different.

The solution is to create another configuration file, _config-dev.yml (you can call it anything), which would contain the properties that will override the default configurations.

Mine _config-dev.yml just has one line:

url: "http://guide.gaurilla.dev"  

Now, when building the Jekyll site to test in development environment, instead of jekyll build, I run:

jekyll build --config _config.yml,_config-dev.yml

The --config flag accepts one or more configuration files (comma-separated) and the right one overrides the conflicting values in the left ones.

This is a little tip for which I wasted two complete hours to discover. I hope, someone will find it useful.

comments powered by Disqus