Hello world: how this blog works

This is a placeholder post. It exists so the blog renders with something in it, and so there is one working example of every field and formatting option to copy from. Delete it once real posts exist.

Adding a post

Create a file in app/blog/posts/. The filename becomes the URL, so hello-world.mdx is served at /blog/hello-world. Posts are picked up at build time — no database, no admin screen.

Every post starts with frontmatter between --- fences:

title: 'Your title'
publishedAt: '2026-08-22'
description: Shown in the listing, in search results and on social cards.

Those three are required. The rest are optional:

Field	Type	What it does
`updatedAt`	date string	Used in the sitemap instead of `publishedAt`
`image`	`{ src, alt }`	Cover image, also used as the social card
`tags`	list of strings	Search keywords; the first one becomes the section
`author`	string	Shown in the article's structured data
`canonical`	URL	Points search engines at the original, if republished
`draft`	boolean	`true` hides the post from the listing entirely
`noindex`	boolean	Published, but asks search engines to skip it

The frontmatter is validated when the blog is built, so a typo fails the build with the file name and the offending field rather than shipping a broken page.

Formatting

Standard markdown works: bold, italic, links, lists, and quotes.

Block quotes look like this.

Code blocks are syntax highlighted:

export function greet(name: string) {
  return `Hello, ${name}`;
}

Tables come from GitHub-flavoured markdown, as in the field list above.

Headings become anchors automatically, so any ## in a post can be linked to directly — useful for long articles.

Images and video

Cover images go in frontmatter. To place one inside the post, use the Image component rather than markdown syntax, so it gets sized and lazy-loaded:

<Image src="/images/example.png" alt="Description" width={1600} height={900} />

Images can be local files from public/, or remote — remote hosts have to be listed in next.config.ts first.

For video, <YouTubeEmbed videoId="..." title="..." /> renders a responsive embed.

What happens after publishing

The post appears in the listing at /blog, is added to sitemap.xml, and gets metadata for search engines and social cards from its frontmatter. Nothing else needs updating.