How to Write Posts: The Complete Markdown Guide

Every post on this blog is a single Markdown file in src/content/blog/. Markdown is plain text with a few simple symbols that turn into formatting. This post shows the syntax for each feature and how it renders — keep it as a reference while you write.

Frontmatter (the top of every file)

Each post starts with a block between --- lines. This is the post’s metadata:

---
title: "Your Post Title"
description: "A 150–160 character summary for Google and link previews."
date: 2026-06-27
updated: 2026-06-27
tags: ["AI", "automation"]
image: "/og.png"   # optional social-share image
draft: false       # true = hidden until you're ready
---

The file name becomes the URL — my-post.md → /blog/my-post. Set draft: true to keep a post out of the blog, sitemap, and feed until it’s ready.

Headings

Use # symbols — more hashes means a smaller heading.

## Section heading
### Sub-section heading

Emphasis

*italic*, **bold**, ***bold italic***, and ~~strikethrough~~.

Renders as: italic, bold, bold italic, and strikethrough.

Links

[visible text](https://example.com) — or an internal link like [my contact form](/#contact).

Renders as: visible text — or an internal link like my contact form.

Images

Put image files in the public/ folder (e.g. public/blog/diagram.png) and reference them with an absolute path. The text in brackets is the alt text (shown if the image fails to load, and read by screen readers):

![Owly, the event-app mascot](/mascots/owly.png)

Renders as:

Lists

Unordered lists use -, ordered lists use 1., and you indent to nest:

- First item
- Second item
  - A nested item
1. Step one
2. Step two

Renders as:

• First item
• Second item
  • A nested item

1. Step one
2. Step two

Blockquotes

Start a line with >:

> A highlighted callout or quote.

A highlighted callout or quote.

Code

For a word of inline code, wrap it in single backticks. For a block, use triple backticks and name the language:

```js
const greeting = "hello world";
console.log(greeting);
```

const greeting = "hello world";
console.log(greeting);

Tables

Columns are separated by pipes |, with a row of dashes under the header:

| Feature | Syntax | Notes |
| --- | --- | --- |
| Bold | `**text**` | Strong emphasis |
| Link | `[text](url)` | Inline link |

Video embeds (YouTube)

You can drop a responsive YouTube video into any post. Take the video ID from the URL — it is the part after watch?v= or youtu.be/ — and paste this HTML into your Markdown (Markdown allows raw HTML):

<div class="embed">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID" title="What the video shows" loading="lazy" allowfullscreen></iframe>
</div>

The .embed wrapper makes it scale to any screen at a 16:9 ratio. Replace VIDEO_ID with your own — for example, https://www.youtube.com/watch?v=abc123 becomes .../embed/abc123.

Horizontal rule & task lists

Three dashes make a divider, and - [ ] / - [x] make checkboxes:

---
- [x] Write the post
- [ ] Publish it

• Write the post
• Publish it

Publishing

When the post is ready, set draft: false, save the file, and commit it (push to the repo, or create the file straight from GitHub’s website). The site rebuilds and your post is live at /blog/your-file-name — automatically added to the blog index, sitemap, and RSS feed.

That’s the whole toolkit. Bookmark this page and you’ll never have to remember the syntax.