Building a Cookery Blog with Bulma Clean Theme

Published: Mar 25, 2021 by C.S. Rhymes

Version 0.11 of Bulma Clean Theme has a new recipe layout you can use in your posts or pages. This post will explain how to use the new layout and build your very own cookery blog.

To make it as easy as possible to create a recipe page, the recipe is generated from page’s front matter. This means that you only have to enter the information once and it will be used to create the page content, but it will also be used to generate recipe schema data for the recipe to help your site show up in search engines for recipe searches.

If you add any additional content to the page, such as the story behind the recipe, it will appear below the recipe details.

Start by using the recipe layout in your page or blog post’s front matter and add a title and an image

layout: recipe
title: My recipe title
image: /path/to/recipe-image.jpg
hero_image: /path/to/recipe-hero-image.jpg

Then create a list in the front matter for the ingredients:

ingredients:
    - 1tsp vegetable oil
    - 2 Carrots, finely diced
    - 1 Onion, finely diced

Next add the method steps:

method:
    - Heat the vegetable oil in a large pan on a medium heat, then add the carrots, onion and celery and cook for five to ten minutes to soften, stirring occasionally
    - Add the crushed garlic and cook for 2 more minutes, stiffing occasionally

Then specify the additional information about your recipe, such as the prep time, cook time, keywords, etc. The times need to be in a specific format for the recipe schema which uses ISO 8601, basically P for period, T for time, 1H for one hour and 1M for one minute.

prep_time: PT0H10M
cook_time: PT1H
total_time: PT1H10M
keywords: recipe,cooking
recipe_yield: 4
recipe_category: Main course
recipe_cuisine: Italian
calories: 500 calories

When you build the page, this data will be inserted into the recipe template and the schema will be generated in the background.

More information and an example page can be found on the Bulma Clean Theme demo site.

Have fun and enjoy building your cookery blog!

Photo by Janko Ferlic from StockSnap

bulma blogging cookery recipes

Share

Latest Posts

Mocking window.location in Jest
Mocking window.location in Jest

Recently I had to write some tests for a piece of JavaScript code that used window.location. This left me trying to figure out how to mock the window.location so that I could pass in dummy data and ensure that the data I got back was what was expected. Here was how I managed to solve the issue.

Considerations for Incremental Static Regeneration in Next.js
Considerations for Incremental Static Regeneration in Next.js

Next.js offers a feature called Incremental Static Regeneration (ISR) that allows you to generate a static page when the page is first visited, rather than generating a static copy at build time. This is a really handy feature as it allows you to reduce your build time, but still benefit from having a cache of a page generated so future visitors will have a faster response time.

Mocking axios in Jest tests with Typescript
Mocking axios in Jest tests with Typescript

Recently I wanted to write a test for a React component that uses axios to retrieve information from an API. To do this I had to mock jest, but I ran into some issues with the types as I was using typescript. This article explains how I managed to get it to work.

How NOT to make a website

How NOT to make a Website

By C.S. Rhymes

From £8.99

Nigel's Intranet Adventure

Nigel's Intranet Adventure

By C.S. Rhymes

From £2.69