The official engineering blog for Fiberplane, covering topics around observability, developer tools, MCP (Model Context Protocol), and TypeScript.
This is an Astro-based blog with a clean design. Here's the project structure:
.
├── public/ # Static assets (favicons, logos, etc.)
├── src/
│ ├── assets/ # Images and media for blog posts
│ ├── content/
│ │ └── blog/ # Blog posts (.md or .mdx files)
│ ├── layouts/ # Page layouts (BaseLayout, BlogPost)
│ ├── pages/ # Route pages
│ │ ├── index.astro # Blog listing homepage
│ │ └── blog/[...slug].astro # Dynamic blog post routes
│ └── content.config.ts # Content collection schema
├── astro.config.mjs
├── package.json
└── tsconfig.json
- Create a new
.mdor.mdxfile insrc/content/blog/ - Add the required frontmatter at the top of the file:
---
title: "Your Post Title"
description: "A brief description for SEO and post listings"
pubDate: 2025-10-29
author: "Your Name"
tags: ["tag1", "tag2", "tag3"]
---
Your blog post content starts here...- The post will automatically appear on the homepage at
/and be accessible at/blog/your-filename
Frontmatter fields:
title(required): The post titledescription(required): Short description for SEOpubDate(required): Publication date (YYYY-MM-DD)author(optional, defaults to "Fiberplane Team"): Post authortags(optional, defaults to []): Array of tagsupdatedDate(optional): Last updated datedraft(optional, defaults to false): Set to true to hide from listings
Images can be added to src/assets/ and embedded in Markdown with relative links.
Static assets like favicons can be placed in the public/ directory.
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
pnpm install |
Installs dependencies |
pnpm dev |
Starts local dev server at localhost:4321 |
pnpm build |
Build your production site to ./dist/ |
pnpm preview |
Preview your build locally, before deploying |
pnpm astro ... |
Run CLI commands like astro add, astro check |
pnpm astro -- --help |
Get help using the Astro CLI |
The blog features a clean, minimal design:
- Geist Sans and Geist Mono fonts
- Dark mode support (auto, light, dark)
- Responsive layout
- Clean typography with focus on readability