How I dynamically generate Jekyll config files

Insert dynamic data into Jekyll static sites using Python or Bash and avoid creating an API backend.
38 readers like this.
Digital creative of a browser on the internet

Jekyll, the static site generator, uses the _config.yml for configuration. The configurations are all Jekyll-specific. But you can also define variables with our own content in these files and use them throughout your website. In this article, I'll highlight some advantages of dynamically creating Jekyll config files.

On my local laptop, I use the following command to serve my Jekyll website for testing:

bundle exec jekyll serve --incremental --config _config.yml

Combining many configuration files

During local testing, it's sometimes necessary to override configuration options. My website's current _config.yml has the following settings:

# Jekyll Configuration

# Site Settings
url: "https://notes.ayushsharma.in"
website_url: "https://notes.ayushsharma.in/"
title: ayush sharma's notes ☕ + ? + ?️
email: ayush@ayushsharma.in
images-path: /static/images/
videos-path: /static/videos/
js-path: /static/js/
baseurl: "" # the subpath of your site, e.g. /blog

Since the local jekyll serve URL is http : //localhost:4000, the URL defined above won’t work. I can always create a copy of _config.yml as _config-local.yml and replace all the values. But there is an easier option.

Jekyll allows specifying many configuration files with later declarations overriding previous ones. This means I can define a new _config-local.yml with the following code:

url:""

Then I can combine the above file with my main _config.yml like this:

bundle exec jekyll serve --incremental --config _config.yml,_config-local.yml

By combining both files, the final value of url for this jekyll serve will be blank. This turns all URLs defined in my website into relative URLs and makes them work on my local laptop.

Combining dynamic config files

As a simple example, suppose you want to display the current date on your website. The bash command for this is:

> date '+%A, %d %B %Y'
Saturday, 16 October 2021

I know I can use Jekyll's _config.yml's for custom content as well. I'll output the above date into a new Jekyll config file.

my_date=`date '+%A, %d %B %Y'`; echo 'my_date: "'$my_date'"' > _config-data.yml

Now _config-data.yml contains:

my_date: "Saturday, 16 October 2021"

I can combine my new config file with the others and use the my_date variable on my website.

bundle exec jekyll serve --incremental --config _config.yml,_config-local.yml,_config-data.yml

On running the above command, {{ site.my_date }} outputs its configured value.

Conclusion

The example above is quite simple, but the possibilities are endless. Bash, Python, and other programming languages can dynamically generate Jekyll config files. I can then combine these during the build or serve process.

For findmymastodon.comI'm using Python to fetch Mastodon user statistics. I'm then writing these into a new _config-data.yml file (currently manually). Finally, the home page and others display these from the configuration file. This way, I can leverage a dynamic backend and still keep all the static website goodness I'm so fond of.

I hope this has sparked some ideas for your own static websites. Jamstack is great for static websites, but you can avoid creating an entire API backend for dynamic content. Why not instead use a build job to create config files with updated content? It might not suit every use case, but one less API means fewer infrastructure moving parts.

I hope this helps you in some way during your next static website project. Keep reading, and happy coding.


This article originally appeared on the author's website and is republished with permission.

What to read next

Build your website with Jekyll

Jekyll is an open source static site generator. You can write your content in Markdown, use HTML/CSS for structure and presentation, and Jekyll compiles it all into static…

https://ayushsharma.in
I am a writer and AWS Solutions Architect. I work with startups and enterprises on Software Engineering, DevOps, SRE, and Cloud Architecture. I write about my experiences on https://ayushsharma.in.

Comments are closed.

Creative Commons LicenseThis work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.