Creating a recipe site with Jekyll
In my push for more people to own their own piece of the internet I created a recipe website for my girlfriend.
“No, what would even be on it?”
That’s fair. Working on preparing for job interviews, so resume related stuff would work.
“What do you post/save/etc on social media?”
Now we’re cooking.
My favorite stack for most websites is Jekyll and Netlify. Jekyll builds the site on Netlify, and Netlify CMS takes care of no-code posting and editing. All for free.
Initializing a new Jekyll site is easy. However, getting a new Jekyll site configured how I want it to be is a bit more effort.
The default Jekyll project assumes you’re using a gem theme and doesn’t come with any folders for customization.
_includes I bring in to every project:
After getting the
_includes all set, I started with a plain markdown document for the homepage. This forces me to not weigh down the page with code and to design with the future in mind.
Starting a site with plain HTML and CSS is wonderful.
Recipes in Jekyll
To add a recipe collection, I created a
_recipe folder make Jekyll see the collection by adding some code to the
Recipe Structured Data
After learning about how to implement structured data on this site previously I’ve wanted to explore more examples of schema data.
Recipes are a perfect example of structured data.
Following the “Get your recipes on Google” guide by Google Search, I laid out the following data points:
These make up the front matter of every recipe post, to be added to from the Netlify CMS and to be used to generate the page and schema data.
Here is an example of what the front matter looks like:
Adding time in Jekyll
Jekyll uses the liquid templating language created by Shopify.
I wanted to add the
cooktime minutes and display as “X hours XX minutes.”
That is surprisingly difficult.
I’ll spare the details and toiling and show the end result.
It’s not perfect, it will say “1 hours,” but it works.
Editing Recipe Structured Data with Netlify CMS
Netlify CMS allows you to edit Jekyll front-matter without dealing with any code or development setup.
Netlify CMS has its own
config.yml file that you create in a folder titled
I’ll spare the details and toiling it took to get the end result and just show the code for the Netlify CMS