How to Add a Blog to Your Website Using EmDash CMS

Adding a blog to an EmDash site is really two small pieces: a content model for posts, and two Astro pages to render them. This walks through both, starting from a blank EmDash project.
Table of Contents
- Step 1: Define the Posts Collection
- Step 2: Build the Blog Index Page
- Step 3: Build the Post Detail Page
- Step 4: Add Blog to Navigation
- Step 5: Write and Publish Your First Real Post
- Optional: Categories and Tags
- Frequently Asked Questions
- Do I need a separate collection for pages versus blog posts?
- Can editors write posts without any Astro or code knowledge?
- How do I handle a blog with hundreds of posts and pagination?
- Will new posts show up immediately, or do I need to redeploy?
- The Bottom Line
Step 1: Define the Posts Collection
If you scaffolded with the default starter, a `posts` collection likely already exists. If you're adding one from scratch, create it in the admin panel's Visual Schema Builder, or script it with the CLI:
npx emdash schema create posts --label Posts --label-singular Post --description "Blog posts"
npx emdash schema add-field posts excerpt --type text --label "Excerpt"
npx emdash schema add-field posts content --type portableText --label "Content" --required
npx emdash schema add-field posts featuredImage --type image --label "Featured Image"A minimal blog post collection needs a title (most collections get one by default), a `slug` for the URL, a `portableText` field for the body, and usually a `text` excerpt and an `image` field for a featured image. Add a `reference` field to an `authors` collection if you want author bylines, or use EmDash's built-in byline system instead — see our guide on managing multiple authors for that.
Step 2: Build the Blog Index Page
---
// src/pages/blog/index.astro
import { getEmDashCollection } from "emdash";
import Base from "../../layouts/Base.astro";
const { entries: posts, error } = await getEmDashCollection("posts", {
status: "published",
orderBy: "published_at",
order: "desc",
limit: 20,
});
if (error) console.error("Failed to load posts:", error);
---
<Base title="Blog">
<h1>Blog</h1>
<ul>
{posts.map((post) => (
<li>
<a href={`/blog/${post.slug}`}>{post.data.title}</a>
{post.data.excerpt && <p>{post.data.excerpt}</p>}
</li>
))}
</ul>
</Base>Filtering by `status: "published"` is the important part — without it, you'd render drafts on the public listing. `getEmDashCollection` accepts `orderBy`, `order`, and `limit` directly, so pagination and sorting don't need a manual sort step in your template.
Step 3: Build the Post Detail Page
---
// src/pages/blog/[slug].astro
import { getEmDashEntry } from "emdash";
import { PortableText } from "emdash/ui";
import Base from "../../layouts/Base.astro";
const { slug } = Astro.params;
const { entry: post, error } = await getEmDashEntry("posts", slug);
if (!post) {
return Astro.redirect("/404");
}
---
<Base title={post.data.title}>
<article>
<h1>{post.data.title}</h1>
<PortableText value={post.data.content} />
</article>
</Base>`getEmDashEntry` automatically serves the published version on the live site, and — if the request carries a valid signed preview token — the current draft instead, with no extra logic in your template. That's what makes EmDash's preview system "implicit": the same page code works for both live traffic and an editor previewing an unpublished draft.
Step 4: Add Blog to Navigation
Link it into your site's primary menu from the admin panel, or via the CLI:
npx emdash menu get primary
# then edit via the admin UI at /_emdash/admin/menus,
# or update programmatically through the REST APIStep 5: Write and Publish Your First Real Post
- In the admin, go to Posts → New Post.
- Fill in the title, excerpt, and write the body in the rich text editor.
- Upload a featured image directly from the editor's media picker if you added that field.
- Set status to Published, and save.
Your post is live immediately at `/blog/your-post-slug` — no rebuild step.
Optional: Categories and Tags
For a blog with more than a handful of posts, taxonomies make the listing page genuinely useful. Add categories via the CLI or admin:
npx emdash taxonomy add-term categories --name "Product Updates" --slug product-updates
npx emdash taxonomy add-term categories --name "Engineering" --slug engineeringThen build a `/blog/category/[slug].astro` page filtering `getEmDashCollection("posts", { where: { category: slug } })` the same way the main blog index does, just scoped to one term.
Frequently Asked Questions
Do I need a separate collection for pages versus blog posts?
Generally yes — a `pages` collection for static content (About, Contact) and a `posts` collection for the blog keeps each content type's fields relevant to what it actually needs, rather than one bloated collection with fields only some entries use.
Can editors write posts without any Astro or code knowledge?
Yes — once the collection and templates exist, an editor works entirely in the rich text admin editor. They never touch the Astro pages that render their content.
How do I handle a blog with hundreds of posts and pagination?
Use `getEmDashCollection`'s `limit` and `cursor`-based pagination (from the query response) to build page 2, 3, and so on, rather than loading every post on one index page.
Will new posts show up immediately, or do I need to redeploy?
Immediately — EmDash serves content through Astro's Live Content Collections at runtime, so a newly published post appears on the live blog index without a rebuild or redeploy.
The Bottom Line
A working, editor-friendly blog on EmDash is one collection and two Astro templates — no separate CMS backend, no rebuild step between publishing and it going live. From here, see our guide to customizing content models further if you want richer post fields, or optimizing the result for SEO.




Comments