Skip to content

Creating Blog Posts

Introduction to Hyde Posts

Making blog posts with Hyde is easy. At the most basic level, all you need is to add a Markdown file to your _posts folder.

To use the full power of the Hyde post module however, you'll want to add YAML Front Matter to your posts.

You can scaffold posts with automatic front matter using the HydeCLI:

1php hyde make:post

Learn more about scaffolding posts, and other files, in the console commands documentation.

Short Video Tutorial

Best Practices and Hyde Expectations

Since Hyde does a lot of things automatically, there are some things you may need to keep in mind when creating blog posts so that you don't get unexpected results.

Filenames

  • Markdown post files are stored in the _posts directory
  • The filename is used as the filename for the compiled HTML
  • Filenames should use kebab-case-slug followed by the extension .md
  • Files prefixed with _underscores are ignored by Hyde
  • Your post will be stored in _site/posts/<slug>.html

Example:

1 _posts/hello-world.md # Valid and will be compiled to _site/posts/hello-world.html

Front Matter

Front matter is optional, but highly recommended for blog posts.

You can read more about the Front Matter format in the Front Matter documentation. Here is a quick primer:

  • Front matter is stored in a block of YAML that starts and ends with a --- line.
  • The front matter should be the very first thing in the Markdown file.
  • Each key-pair value should be on its own line.
  • The front matter is used to construct dynamic HTML markup for the post as well as meta tags and post feeds. You are encouraged to look at the compiled HTML to learn and understand how your front matter is used.

Example:

1---
2title: "My New Post"
3---
4 
5## Markdown comes here

You can use the php hyde make:post command to automatically generate the front matter based on your input.

A first look at Front Matter

Before digging in deeper on all the supported front matter options, let's take a look at what a basic post with front matter looks like.

This file was created using the make:post by hitting the Enter key to use all the defaults (with some extra lorem ipsum to illustrate).

1---
2title: My New Post
3description: A short description used in previews and SEO
4category: blog
5author: Mr. Hyde
6date: 2022-05-09 18:38
7---
8 
9## Write your Markdown here
10 
11Lorem ipsum dolor sit amet, consectetur adipisicing elit.
12Autem aliquid alias explicabo consequatur similique,
13animi distinctio earum ducimus minus, magnam.

How the Front Matter is used

The front matter is used to construct dynamic HTML markup for the post as well as meta tags and post feeds.

You are encouraged to look at the compiled HTML to learn and understand how your front matter is used.

Front matter syntax

Here is a quick reference of the syntax Hyde uses and expects:

1---
2key: value
3string: "quoted string"
4boolean: true
5integer: 100
6array:
7 key: value
8 key: value
9---

Supported Front Matter properties

Post Front Matter Schema

Here is a quick reference of the supported front matter properties. Keep on reading to see further explanations, details, and examples.

KEY NAME VALUE TYPE EXAMPLE / FORMAT
title string "My New Post"
description string "A short description"
category string "my favorite recipes"
date string "YYYY-MM-DD [HH:MM]"
author string/array See author section
image string/array See image section

Note that YAML here is pretty forgiving. In most cases you do not need to wrap strings in quotes, but it can help in certain edge cases, thus they are included here.

In the examples below, when there are multiple keys, they signify various ways to use the parameter.

Title

1title: "My New Post"

Description

1description: "A short description used in previews and SEO"

Category

1category: blog
2category: "My favorite recipes"

Date

1date: "2022-01-01 12:00"
2date: "2022-01-01"

Author

1author: "Mr. Hyde" # Arbitrary name displayed "as is"
2author: mr_hyde # Username defined in `authors` config
3author: # Array of author data
4 name: "Mr. Hyde"
5 username: mr_hyde
6 website: https://twitter.com/HydeFramework

When specifying an array you don't need all the sub-properties. The example just shows all the supported values. Array values here will override all the values in the authors config entry.

Image

1image: image.jpg # Expanded by Hyde to `_media/image.jpg` and is resolved automatically
2image: https://cdn.example.com/image.jpg # Full URL starting with `http(s)://`)
3image:
4 path: image.jpg
5 uri: https://cdn.example.com/image.jpg # Takes precedence over `path`
6 description: "Alt text for image"
7 title: "Tooltip title"
8 copyright: "Copyright (c) 2022"
9 license: "CC-BY-SA-4.0"
10 licenseUrl: https://example.com/license/
11 credit: https://photographer.example.com/
12 author: "John Doe"

When supplying an image with a local image path, the image is expected to be stored in the _media/ directory.

The image will be used as the cover image, and any array data is constructed into a dynamic fluent caption, and injected into post and page metadata.

See posts/introducing-images for a detailed blog post with examples and schema information!

Using images in posts

To use images stored in the _media/ directory, you can use the following syntax:

1![Image Alt](../media/image.png "Image Title") # Note the relative path

To learn more, check out the chapter in managing assets