This is an example blog post demonstrating all the features available in this Eleventy blog setup. Use this as a reference when creating your own posts.

Front Matter

Every blog post starts with front matter between --- delimiters. Here's what you can include:

---
title: "Your Post Title"
date: 2025-01-18
tags:
  - Tag1
  - Tag2
featuredImage: /assets/images/blog/your-post-slug/image.jpg
---

Required Fields

  • title: The post title displayed on the page and in listings
  • date: Publication date in YYYY-MM-DD format (determines sort order)

Optional Fields

  • tags: Array of tags for categorization (creates filterable tag pages at /blog/tag/tag-name/)
  • featuredImage: Path to the hero image displayed at the top of the post

Adding Images

Featured Image

Add a featuredImage path in your front matter. The image appears prominently at the top of your post and as a thumbnail in the blog listing.

Inline Images

Add images within your content using standard Markdown syntax:

![Alt text description](/assets/images/blog/your-post-slug/image.jpg)

Here's an example inline image:

Example inline image

Image Organization

Store images in /assets/images/blog/[post-slug]/ to keep them organized. For example:

  • /assets/images/blog/example-post/featured.svg
  • /assets/images/blog/example-post/inline-image.svg

Text Formatting

Standard Markdown formatting works:

  • Bold text using **text**
  • Italic text using *text*
  • Inline code using backticks
  • Links using [text](url)

Lists

Unordered lists:

  • First item
  • Second item
  • Third item

Ordered lists:

  1. First step
  2. Second step
  3. Third step

Blockquotes

This is a blockquote. Use it for quotes or callouts.

Code Blocks

// Code blocks with syntax highlighting
function greet(name) {
  return `Hello, ${name}!`;
}

Tags

Tags create automatic category pages. When you add tags to your post:

tags:
  - Tutorial
  - Example

Each tag generates a page at /blog/tag/[tag-name]/ listing all posts with that tag. Tags appear as clickable links on both the post page and in the blog listing.

Posts Without Images

If you don't specify a featuredImage, the blog listing will show a default placeholder. This keeps the layout consistent.

File Naming

Save your post as /blog/your-post-slug.md. The filename becomes the URL:

  • example-post.md → /blog/example-post/
  • my-first-post.md → /blog/my-first-post/

Quick Start Checklist

  1. Create a new .md file in the /blog/ directory
  2. Add front matter with at least title and date
  3. Write your content in Markdown
  4. (Optional) Add images to /assets/images/blog/[your-post-slug]/
  5. (Optional) Add tags for categorization
  6. Run npx @11ty/eleventy --serve to preview