2 min read

Hello world — how this blog works

A worked example of the markdown blog pipeline: validated frontmatter, generated social cards, an RSS feed and a sitemap entry, all produced at build time.

A placeholder social card showing four rounded tiles in a two-by-two grid

This post exists so the blog engine has something to render. It is a plain markdown file in apps/marketing/content/blog/, and everything you see on this page was produced from it at build time — there is no CMS, no database and no client-side JavaScript on the page.

Keep it as a reference, or delete it once you have posts of your own. Deleting every post is safe: the index falls back to an empty state rather than failing the build.

What the build does with this file

next build reads the file, validates its frontmatter against a Zod schema and renders the body. A missing title, a malformed date or an ogImage that is not on disk fails the build loudly, so a broken post never reaches production.

From this one file the build emits:

  • /blog/hello-world — the post page, with Article and BreadcrumbList JSON-LD and its own Open Graph and Twitter card.
  • an entry on /blog, ordered newest first, with an estimated reading time.
  • an item in /blog/rss.xml, with root-relative links rewritten to absolute ones so they resolve in a feed reader.
  • a <url> entry in sitemap.xml, carrying the post's real lastmod.

Images

Put images in public/blog/<slug>/ and reference them with a site-absolute path. The build reads each PNG's real dimensions out of its header and writes them onto the <img> tag, so the browser reserves the right space before the bytes arrive and the text below does not jump:

A placeholder card showing four rounded tiles in a two-by-two grid

Alt text is not optional — an informative image without it fails the build.

Drafts

Set draft: true to stage a post. Drafts are excluded from the index, the feed and the sitemap, and their page is not exported at all, so the URL 404s until you flip the flag back.

That is the whole contract. content/blog/README.md documents every frontmatter field in a table.

The teacher behind the answers

Ochra looks at photos of your work in progress and tells you what to fix next.

Download on the App StoreGet it on Google Play
All posts