navigation | ||||
---|---|---|---|---|
|
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 you'll want to add YAML Front Matter to your posts.
You can interactively scaffold posts with automatic front matter using the HydeCLI:
php hyde make:post
Learn more about scaffolding posts, and other files, in the console commands documentation.
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/gjpE1U527h8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>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.
- 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-name
followed by the extension.md
- Files prefixed with
_underscores
are ignored by Hyde - Your post will be stored in
_site/posts/<identifier>.html
Example:
✔ _posts/hello-world.md # Valid and will be compiled to _site/posts/hello-world.html
Front matter is optional, but highly recommended for blog posts as 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. You can read more about the Front Matter format in the Front Matter documentation.
Before digging deeper into all the supported options, let's take a look at what a basic post with front matter looks like.
// filepath _posts/my-new-post.md
---
title: My New Post
description: A short description used in previews and SEO
category: blog
author: Mr. Hyde
date: 2022-05-09 18:38
---
## Write Your Markdown Here
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Autem aliquid alias explicabo consequatur similique,
animi distinctio earum ducimus minus, magnam.
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. However, it can help in certain edge cases, for example if the text contains special Yaml characters, thus they are included here.
In the examples below, when there are multiple examples, they signify various ways to use the same property.
When specifying an array you don't need all the sub-properties. The examples generally show all the supported values.
title: "My New Post"
description: "A short description used in previews and SEO"
category: blog
category: "My favorite recipes"
date: "2022-01-01"
date: "2022-01-01 12:00"
Specify a page author, either by a username for an author defined in the authors
config, or by an arbitrary name,
or by an array of author data.
author: "Mr. Hyde"
author: mr_hyde
author:
name: "Mr. Hyde"
username: mr_hyde
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.
Specify a cover image for the post, either by a local image path for a file in the _media/
directory, or by a full URL.
Any array data is constructed into a dynamic fluent caption, and injected into post and page metadata.
When supplying an image source with a local image path, the image is expected to be stored in the _media/
directory.
Like all other media files, it will be copied to _site/media/
when the site is built, so Hyde will resolve links accordingly.
image: image.jpg
Full URL starting with http(s)://
) or //
(protocol-relative).
The image source will be used as-is, and no additional processing is done.
image: https://cdn.example.com/image.jpg
You can also supply an array of data to construct a rich image with a fluent caption.
image:
source: Local image path or full URL
altText: "Alt text for image"
titleText: "Tooltip title"
copyright: "Copyright (c) 2022"
licenseName: "CC-BY-SA-4.0"
licenseUrl: https://example.com/license/
authorUrl: https://photographer.example.com/
authorName: "John Doe"
See posts/introducing-images for a detailed blog post with examples and schema information! { .info }
To use images stored in the _media/
directory, you can use the following syntax:
![Image Alt](../media/image.png "Image Title")
Note the relative path since the blog post is compiled to posts/example.html
To learn more, check out the managing assets chapter on the topic.