17 May 2026

How to Add a Blog Post

Five steps — create a folder, write a file, add an image, link it in the nav, and run the deploy script.

1. Create a folder for your post

mkdir -p src/content/blog/guide/images

Each topic gets its own folder inside src/content/blog/. The folder name becomes the URL path.

2. Write the markdown file

Create src/content/blog/guide/how-to-add-a-post.md:

---
title: How to Add a Blog Post
description: A simple guide
excerpt: Short summary shown on the blog grid.
publishedAt: 2026-05-17
draft: false
---

## Your heading here

Write your content in plain Markdown.

The frontmatter fields are:

• title — headline
• description — meta tag
• excerpt — shown on the blog card
• publishedAt — date for sorting
• draft — set to true to hide from the live site

3. Add an image

Drop a PNG or JPEG into the images/ folder next to your post:

src/content/blog/guide/images/how-to-add-a-post.png

Reference it in your markdown with a relative path:

![How-to guide screenshot](images/how-to-add-a-post.png)

That’s it — Astro handles the optimisation and responsive output during the build.

4. Add a nav link

Open src/components/Header.astro and find the Blog children array. Add your new post:

{
  href: withBase('blog'),
  label: 'Blog',
  children: [
    { href: withBase('blog'), label: 'Blog Home' },
    { href: withBase('blog/guide/how-to-add-a-post'), label: 'How to Add a Post' },
  ],
},

The href value matches the file path inside src/content/blog/ — no .md extension, no /index.html.

5. Build and publish

cd /home/aeneas/code/webs

# Build the site
cd froodx.net && npm run build

# Preview locally
npm run preview -- --host 127.0.0.1 --port 4318

# Commit and push
cd ..
git add -A
git commit -m "Add new blog post"
git push

# Deploy to Cloudflare Pages
node _scripts/deploy-cloudflare-pages-local.mjs

That’s it. The post will be live at https://froodx-net.pages.dev/blog/guide/how-to-add-a-post/.