Learn how you can use data files as a great way to manage configuration data or import an existing data set to Jekyll.
Clone: git clone https://github.com/CloudCannon/jekyll-learn-blog-template.git
Starter branch: git checkout data-intro-start
Finished lesson: git checkout data-intro-finish
Creating Jekyll data files to act as a database alternative
Using data files to populate a Google Map
Sometimes you also need supplemental data to use on pages, but not as its own page, much like from a database or API. Jekyll allows you to create data files and access them globally, just like collections. This way you can maintain your own mini-databases, but with very little setup needs. A number of file formats are supported, including JSON, YAML, CSV (comma-separated values), and TSV (tab-separated values).
In this example, we will create a page making use of Google Maps. Then we will use a data file to populate the map with real locations of our amazing endangered birds. Read more on data files on Jekyll’s official site.
First, let’s follow the usual conventions. If you haven’t already guessed it, we need to create a _data folder for our files. Then, we can create a
<filename>.yml file with our data. For convenience, in the root of the project, data.zip has been added, with
locations.yml (with coordinates of our birds and any supporting information) and
staff.yml. Simply unzip these files into
Now that we have our data files, we can simply access
site.data.locations. No need for any more setup in
_config.yml, unlike collections.
To make things easier, a few things have already been set up that aren’t the focus of this lesson:
locations.htmlwith script tags linking map.js and initializing the map.
All we need to do is use the data, which we can transform into JSON with the
jsonify filter. Simply add this to the last script tag:
When we view the page in the browser, all markers should now be visible. We can add more markers to the data file and it will be populated on the next Jekyll build.
Another great use of data is simple information about people, such as jobs or contacts.
One thing that might make sense here is to provide staff contact details for sightings of rare birds. Then staff members could be contacted to update the
locations.yml file. We already have
staff.yml in our
_data folder, with some simple contents (randomly generated names and a placeholder image).
Now we can simply add a new block below our map on
This will output all of our staff information, including names, images, and links (just home pages for now) to their email/social media. If we want to add more information or more staff, it is now easier to manage.
This is the end of the Jekyll beginner tutorial. We have dealt with all of the major topics in Jekyll and built a basic but decent-looking site. Hopefully you now feel confident putting together an easily maintainable static site.
Of course, Jekyll is not a CMS. If you wish to deploy your site into the wider world and have other people contribute to it - especially non-technical people - CloudCannon offers an easy-to-use and beautiful CMS solution.