For a long while, I wanted to refactor the Project Archive in order for Jekyll to render that page faster and to access data about my projects in other parts of the blog.
Previously, projects were merely Jekyll pages with YAML-front-end-matter (YFEM) data and page “content”. The problem with this method was that it was difficult to query what projects existed on my blog. I would previously have to loop through all posts to find out.
I wanted to move project data into Jekyll’s data files, but all project data would have to be shoved into one giant file, which I didn’t like. You also cannot render page content with data files in any easy way.
The solution to this was Jekyll’s collections feature, a very powerful alternative to data files, which allowed me to make 1 entity (here meaning a project) per file and write content for every entity as if they were pages or posts. For projects, this allowed me to make a file per project, establish project metadata (name, type, domain, etc.), and write pages about every project. For this to work, I added the following data to the _config.yml
:
collections:
projects:
output: true
permalink: /projects/:name/
defaults:
- scope:
path: ""
type: "projects"
values:
layout: project
share: true
comments: false
Jekyll needs to know that I have a collection called projects
, and every project date file will be placed in a folder called _projects
(note the underscore). Also, make output
equal true
so that Jekyll renders pages for every project in the projects folder. In addition to this, I added some common data into defaults
so that I don’t have to write those values in every YFEM of every project file.
With the project collection implemented, I refactored how projects were listed in the Project Archive by looping through them instead of posts. There were multiple loops before, now there are only 2 nested loops. I’m actually not sure if the page is rendering faster, but the code is sure easier to read now.
Now that projects have easy to access metadata, I had the liberty of enhancing the look of the Project Archive by adding a date range, header image, and posts’ domains to the project listings. The difference is like night and day. On the left side of the screenshot below is the old Project Archive, and on the right side is the new version: