Generating a Page using Personal Data
Static page generators such as Jekyll can
use data stored in files to produce the information contained into HTML pages.
We will have a look at this using a simple example.
The data files
The first step is to define the file(s) that will contain the information.
This can be either JSON, YAML, or CSV files.
For my list of duties I chose to use YAML files, but another part of my site,
the list of talks, used to rely on JSON files.
Data files have to be put in the
_data directory of the Jekyll tree structure.
Sub-directories can be used to structure your set of data files. So here I put my data within
Further, we will have one file for the current duties,
and another file,
before.yml, for the old ones. Here is the
You have a list of 2 items, each item containing a name (category) and a list of values, with a value being a period, a name, and the location it took place (see here for information about the YAML format).
From data to HTML
To generate HTML information for this, one can create an HTML document,
and use Liquid templating to access the data.
To generate a list you simply have to type in
As you can see, to access the data in the file
_data/duties/currently.yml, we refer to
This can be read as “the
currently file that is in the
duties subdirectory of the site data directory”.
For loops iterate over a list using some variable
To access to some attribute
a of a variable
v, we use double brackets and indexing.
The rest is self-explanatory if you know HTML.
You can get more information on Liquid templating here and here.
Now if you want to generate also the list of the old duties, you have to copy-paste the piece of code before,
site.data.duties.before. Too bad.
A better way to do things is to define the code in terms of a variable
duties as follows:
Then you put this piece of code, say
print_duties within the Jekyll include directory,
In order to generate both lists of duties you now simply have to write in
If you prefer to use Markdown, use instead a
duties.md file with:
Factorizing things (revisited)
Indeed file inclusion supports parameters (see here). You can add the parameter and its value to the import as follows:
print_duties.html template that is in the
_includes directory, you just have to prefix the name of the parameter with