--- title: "How to Build a Blog with Framer CMS (Step by Step)" description: "Build a full blog in Framer CMS from scratch — collections, dynamic post pages, categories, and the SEO setup that gets it found. A complete step-by-step build." canonical_url: "https://framerhub.io/blog/how-to-build-blog-in-framer" last_updated: "2026-12-18T00:00:00.000Z" --- Building a blog in Framer is genuinely straightforward once you understand the shape of it — a collection, a dynamic page template, and a list page that pulls from the collection. Most tutorials either stop there or skip straight to "just use the CMS," without covering the decisions that actually determine whether the blog is easy to maintain a year and 100 posts later. This is the full build, including the parts that matter once the blog is no longer new. ## The Three Pieces of Every Framer Blog Before touching the CMS panel, understand what you're building: 1. **A Posts collection** — one CMS item per blog post, holding title, content, slug, date, category, author, and SEO fields. 2. **A dynamic post page template** — one page design that renders every post in the collection, using CMS field bindings instead of hardcoded content. 3. **A blog index page** — the `/blog` listing page, pulling a CMS collection list component that links out to each dynamic post page. Everything below is building and refining these three pieces. ## Step 1: Set Up the Posts Collection In Framer's CMS panel, create a new collection called Posts (or Blog, whatever fits your naming). Add these fields at minimum: - **Title** (text) — the post headline. - **Slug** (slug field, auto-generated from title but editable) — controls the post's URL. - **Content** (rich text) — the post body itself. - **Excerpt** (text) — a short summary for the blog index and meta description fallback. - **Cover Image** (image) — used on the index card and as the OG image. - **Date Published** (date) — for sorting and display. - **Category** (reference or multi-select) — see the categories section below for which to pick. - **SEO Title / SEO Description** (text) — separate from the display title so you can optimize them independently. Resist the urge to add every field you can imagine on day one. Every field you add is one more thing to fill in on every post — start minimal, add fields when a real need shows up. ## Step 2: Build the Dynamic Post Page Create a new page, and instead of a static page, set it as a **CMS page** connected to your Posts collection. This single page template renders for every item in the collection at its own URL (`/blog/[slug]`), pulling content from whichever post is being viewed. Design it like a normal page, but bind each element to a CMS field instead of typing static content: - Title text layer → bound to the **Title** field - Cover image → bound to **Cover Image** - Body text/rich text component → bound to **Content** - A byline section → bound to **Author** (if you've added an authors collection) and **Date Published** - Meta title/description → bound to the SEO fields in the page settings panel, not the display title, so search snippets can differ from the on-page headline Preview a couple of different posts while designing to make sure the layout holds up with a short post and a long one — a design that only looks right with placeholder Lorem Ipsum of exactly the right length will break the moment a real post runs long or short. ## Step 3: Build the Blog Index Page The index page (`/blog`) uses a CMS collection list component, connected to the same Posts collection, laid out as a grid or stacked list of post cards. Each card typically shows the cover image, title, excerpt, category, and date — and links to the individual post's dynamic URL automatically, since Framer wires that up when the card is inside a collection list bound to the same collection. Sort the list by **Date Published**, descending, so new posts appear first — this is a setting on the collection list element, not something you need a code override for. ## Step 4: Categories — Pick the Right Field Type This is the decision that matters most for a blog that's going to grow: - **Multi-select field**, directly on the Posts collection, works fine for a small, fixed set of categories you won't need to manage independently. - **A separate Categories collection**, referenced from each post, is worth the extra setup the moment you want category-level pages ("all posts in Tutorials"), category descriptions, or the ability to rename a category once instead of editing every post that uses it. If you're not sure which you'll need, start with the separate collection — it's more setup up front, but converting from a text/multi-select field to a proper reference collection later means re-tagging every existing post by hand. Better to do the extra 20 minutes of setup now than the rework later. ## Step 5: SEO Fields That Actually Get Used Framer gives every CMS page access to per-item SEO fields (title, description, OG image) — but they only work if your dynamic page template is actually bound to them, and if you fill them in per post. A blog with 50 posts and no per-post meta descriptions is a blog where Google is writing your search snippets for you. Two habits worth building from post one: - Write a distinct SEO title/description per post — don't let it default to the display headline for every post, which reads as duplicate content across an entire blog. - Set the cover image as the OG image binding, so shared links on social platforms show a real preview instead of a blank card. For the deeper technical SEO setup — sitemaps, structured data, page speed — see our [complete Framer CMS guide](/blog/framer-cms-complete-guide) and [Framer SEO guide](/blog/framer-seo-guide), which cover the site-wide setup this blog build sits on top of. ## Step 6: A Table of Contents for Longer Posts Long-form posts benefit from an in-page table of contents — it improves scannability and gives Google a structured outline to potentially surface as jump links in search results. Framer's rich text field doesn't generate one automatically, so it's typically built as a code override that reads the heading elements rendered from your CMS rich text field and builds a linked outline from them, or as a manually maintained list of anchor links for sites where posts follow a predictable heading structure. It's optional for a short-post blog, close to essential once posts regularly run past 1,500 words — which, if you're building this to rank, they should. ## Step 7: A Related Posts Section A collection list filtered to the current post's category, excluding the current post itself, placed at the bottom of the dynamic post template, keeps readers moving through the blog instead of bouncing after one article. This is one of the more effective uses of the Category reference field from Step 4 — it's what makes a "show 3 related posts" section possible without manually curating it per post. For deeper category- or tag-based cross-linking across a growing archive, this is the same underlying capability [CMS Filter](/plugins/framer-cms-filter) extends further, and it pairs well with the [CMS collections tutorial](/blog/framer-cms-collections-tutorial) if you want the full walkthrough on structuring references between collections. ## What Breaks Once the Blog Grows Everything above works cleanly for a blog with a few dozen posts. Past that, two native limits show up: - **Single-field filtering.** Native Framer CMS lists filter on one condition at a time. A reader wanting "Tutorials, sorted by newest, published this year" is asking for three conditions at once — natively, you're stuck picking one. - **No real search.** Native CMS search (where it exists) typically matches a single field with exact or partial string matching — no fuzzy matching, no multi-field search across title and content and category simultaneously. Both are the exact gap [CMS Filter](/plugins/framer-cms-filter) was built for — multi-field filtering, realtime search, and shareable filtered URLs, configured from Framer's native panel without rebuilding the list. If you're planning for the blog to genuinely grow (dozens of posts becoming hundreds), it's worth building the filter/search layer in from early on rather than retrofitting it once readers are already complaining they can't find anything. ## Maintenance Habits Once It's Live - **Audit broken internal links quarterly** — as posts accumulate, cross-links between old and new posts go stale faster than people expect. - **Re-check category balance** — a blog with 40 posts in one category and 2 in another usually means the category structure needs rethinking, not more posts. - **Watch your CMS item count against your plan tier.** CMS-generated post pages count toward Framer's published-page limit — a blog that grows past a couple hundred posts can quietly hit a plan ceiling. If you haven't checked your current plan's limits recently, framer.com/pricing has the current numbers. ## FAQ **Can you build a full blog with Framer's native CMS?** Yes — collections, dynamic post pages, categories, and SEO fields are all native. Multi-field filtering, content search, and advanced pagination at scale are the gaps. **How many CMS collections do I need for a blog?** One for posts is enough to start. Add an Authors collection and a Categories collection as the blog grows past a handful of posts and contributors. **Does Framer CMS handle blog SEO automatically?** It provides the fields — you still have to fill them in per post and bind your page template to use them. Nothing auto-populates. **What happens when a Framer blog outgrows a single category filter?** Native lists support one filter condition at a time. Filtering by category and tag and date simultaneously needs a plugin like [CMS Filter](/plugins/framer-cms-filter). **Should I build categories as a CMS collection or a plain text field?** A separate referenced collection once you have more than a handful of categories — it enables category pages, category metadata, and single-place renaming that a text field can't do.