Adding more post metadata to Jekyll with YAML
NB: This flurry of content might be shortlived, but for now I’m excited to be posting again so shush!
Jekyll, as it turns out, is a really nice blogging platform static site generator. One of the nice things about it is the flexibility. In my current Jekyll set up I’ve added metadata to the YAML for posts, so that I can optionally define a post cover (or image, if you’d prefer) and a width for the cover.
This can be done easily enough by simply adding new lines to the YAML block at the top of your markdown. The default YAML block is as follows:
---
title:
categories:
tags:
---
To add your own, you just need to create a key: value line in the block as follows:
---
title:
categories:
tags:
cover: http://path/to/image.png
cover_width: 520px
---
These are all accessible within the page templates, as for example {{ page.title }} or {{ page.tags }}, as detailed on the Jekyll Bootstrap template API page.
To access these new values we just need to use {{ page.cover }} or {{ page.cover_width }} within our template.
Defining these each time we create a post can be a bit of a waste of time though, as it means we need to add these lines to the YAML block – why not just add them to the Rakefile that generates a new post? To do this, we need to edit the Rakefile:
- Open the
Rakefilein your text editor - Look for the line starting with
puts "Creating new post: #{filename}"(this should be line #23) - Below this, you should see the default YAML block, this is where you add your lines.
You can see my modified YAML block from the Rakefile below (note: I don’t use the categories or tags in the YAML block, so I have removed these lines):
puts "Creating new post: #{filename}"
open(filename, 'w') do |post|
post.puts "---"
post.puts "layout: post"
post.puts "title: \"#{title.gsub(/-/,' ')}\""
post.puts "cover: "
post.puts "cover_width: "
post.puts "---"
post.puts "{% include JB/setup %}"
end
Now, next time you run rake post title="Some new post" your new post markdown file will contain your custom lines in the YAML block, ready to be used in your post templates.
Mentioned elsewhere on this site
- Video integration with Jekyll
We need to break this in to two parts to use it with Jekyll, and set up some new YAML front matter to make the inclusion of videos simple.
- Extract the first image from a post in Jekyll
…each post and add a piece of Yaml frontmatter to indicate a “post image” (even though I had this at one point in the past!), so how could I automate this?
Related posts
- Adding support for Webmentions
I’ve added Webmention support to the posts on this blog. Webmentions are a method for websites to know that they’ve been linked to (or mentioned) from elsewhere on the web.
- Baking webmentions into the build
Back in 2022 I added webmention support to this blog. The implementation worked but it was entirely client-side, so the page would load, JS would fire, fetch from webmention.io, and render the results into the DOM. With JS disabled or on a slow connection, the discussion section was just empty. It worked well enough that I didn’t touch it for three years, but the rate-limit situation had been silently catching visitors out and eventually I started pulling at the thread.
- Moving to GitHub Actions (and adding .txt posts)
This year I moved the blog from GitHub Pages’ built-in Jekyll to a GitHub Actions workflow, then added .txt URL support for posts. Inspired by Terence Eden’s blog post about text-only websites.
Discussion
No interactions yet
Join the conversation
Reply from your own site with a Webmention (how?).
