Static Site Blog Post Template (Front Matter)

Blog post with YAML front matter (title, date, draft, tags, description, slug) and Hugo, Jekyll and Astro differences

Письмо та контентКомпактнийHugo, Jekyll and Astro front matter conventionsstatic site postОновлено 20 жовт. 2026 р.

Як використовувати: Use when writing a post for a static site generator. Fill the front matter first and keep draft true until ready. The main pitfall is generator-specific rules, such as Jekyll's dated file names or Astro's schema validation.

Перегляд

title	"[Post title]"
date	YYYY-MM-DD
draft	true
tags	["[tag-one]", "[tag-two]"]
description	"[One-sentence summary under 160 characters for search results and social cards]"
slug	"[post-slug]"

[Post title]

Blog post template for static site generators (Hugo, Jekyll, Astro and similar). It starts with YAML front matter, explains how the three generators differ, then gives a post body structure. Based on the documented conventions of each generator. Replace every [bracketed] value; delete the notes sections before publishing.

Front matter reference

The same fields, shown on their own so you can copy and adapt them:

---
title: "How we cut our build time in half"
date: 2026-10-21T09:00:00+07:00
draft: false
tags: ["ci", "performance", "github-actions"]
description: "Caching, parallel jobs and smaller images took our CI from 18 to 8 minutes."
slug: "cut-build-time-in-half"
---

Field	Purpose	Notes
`title`	Page title and heading	Quote it if it contains a colon
`date`	Publication date for sorting and feeds	Future dates may be hidden until that date
`draft`	Exclude from production builds	Remove or set `false` to publish
`tags`	Taxonomy pages and related posts	Use lowercase, hyphenated tags consistently
`description`	Meta description and social preview	120 to 160 characters
`slug`	URL segment	Lowercase, hyphens, no dates unless your permalinks need them

Generator differences

Topic	Hugo	Jekyll	Astro
Where posts live	`content/posts/` (or any section)	`_posts/`	`src/content/blog/` with a content collection
File name	Any, for example `my-post.md` or a page bundle `my-post/index.md`	Must be `YYYY-MM-DD-title.md`	Any; the file name is the default ID or slug
Drafts	`draft: true`, shown with `hugo server -D`	Put the file in `_drafts/`, or `published: false`; preview with `--drafts`	No built-in rule; filter `draft` yourself in the collection query
Front matter formats	YAML, TOML (`+++`) or JSON	YAML only	YAML; fields are validated by the collection schema
Slug	`slug` overrides the file name in the URL	`slug` used with the `permalink` pattern in `_config.yml`	Set via the collection loader or route; `slug` is a normal field you map
Tags	Built-in taxonomies (`tags`, `categories`)	`tags` and `categories` are built in	Define `tags` in the schema; build tag pages yourself
Summary	`description` or `summary`, or text before `<!--more-->`	`excerpt` or the first paragraph	Any field you define, usually `description`

Post body

Introduction

[Two or three sentences: the problem or question, who it is for, and what the reader will get from the post.]

[Main section 1]

[Explain the first key point with an example, code block or image.]

[Main section 2]

[Second key point. Keep headings descriptive so readers can skim.]

[Main section 3]

[Third key point, or a step-by-step walkthrough.]

Conclusion

[Summarise the takeaway in two sentences and suggest one next step, such as a related post or a link to the code.]

Before publishing

draft set to false (Hugo, Astro) or file moved to _posts/ (Jekyll).
Images stored next to the post or in the static folder, with alt text.
The local preview build shows the post at the expected URL.
Description reads well as a search snippet.

Standard and licence note

Based on the documented front matter conventions of Hugo, Jekyll and Astro. Generator behaviour changes between versions; check your version's documentation. Original text written for this collection. Template licence: MIT.

Схожі шаблони

Письмо та контент