How I dynamically generate Jekyll config files | Opensource.com

How I dynamically generate Jekyll config files

Insert dynamic data into Jekyll static sites using Python or Bash and avoid creating an API backend.

Digital creative of a browser on the internet
x

Subscribe now

Get the highlights in your inbox every week.

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.

Person using a laptop

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 HTML.
Text editor on a browser, in blue

The ability to let your website adjust to the user's theme of choice is a great accessibility feature.

About the author

https://ayushsharma.in
Ayush Sharma - 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.