Figment.so

Add an Editable Blog to a Static AI Website

Published September 23, 2026 • Figment editorial team

An editable static blog needs a repeatable path from a post file to a public URL. Give each post its own source file, define metadata once, generate an index from those files, and test one edit through build and deployment. A row of hard-coded blog cards on the homepage is not an editable blog: a writer would have to change both the card and its article page every time.

This guide starts with an AI-generated static site and adds a content workflow. It does not cover moving an existing archive; use the blog migration guide for that. It also does not require a hosted CMS. The example uses Markdown in a Git repository and Eleventy as a static generator. That is one implementation choice, not a claim that Figment imports these files.

Who needs to edit the posts?

If a writer can edit Markdown and use Git review, keep posts in the repository. If editors need a visual interface, test a CMS's authentication, preview, and publishing roles before choosing it. A prompt does not add a CMS to a static site.

For a small site, give each file a title, date, description, stable slug, and draft state. Use /blog/{slug}/ as the URL rule. Changing a title must not change its URL.

What does one post look like?

This fictional fixture is test content, not a customer article. Put it at posts/studio-hours.md:

---
title: Studio opening hours
date: 2026-09-23
description: When the studio is open and how to arrange a visit.
slug: studio-hours
tags: posts
draft: true
---

# Studio opening hours

This is test content. Do not publish it as a real business page.

[Back to blog](/blog/)

In a new site, run npm init -y and npm install --save-dev @11ty/eleventy@3.1.6. In an existing site, check how its build copies CSS and other pages. Do not replace a working pipeline without checking it. This tested Eleventy directory-data file at posts/posts.11tydata.cjs gives one draft switch two effects:

module.exports = {
  layout: 'post.njk',
  eleventyComputed: {
    permalink: (data) => data.draft ? false : `/blog/${data.slug}/index.html`,
    eleventyExcludeFromCollections: (data) => Boolean(data.draft),
  },
};

Eleventy documents computed data, collection exclusion, and permalink: false (accessed 2026-09-23). The permalink stops draft output; collection exclusion keeps it out of the index. Both are needed. Put this layout at _includes/post.njk so each published Markdown post is a full HTML page:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ title | escape }}</title>
  <meta name="description" content="{{ description | escape }}">
</head>
<body><main>{{ content | safe }}</main></body>
</html>

Create blog/index.njk with this minimal index. Adapt its surrounding header and styles to your existing site, but keep the collections.posts loop:

---
title: Blog
permalink: /blog/index.html
---
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>{{ title | escape }}</title></head>
<body><main><h1>{{ title | escape }}</h1><ul>
{% for post in collections.posts %}
  <li><a href="{{ post.url | escape }}">{{ post.data.title | escape }}</a> - {{ post.data.description | escape }}</li>
{% endfor %}
</ul></main></body></html>

Run npx @11ty/eleventy from the site root. Open _site/blog/index.html, then open each linked post. Check the page title, description, text, and return link. The generated files do not change your host until you deploy them.

How should the index and article pages work?

The index should list only published posts with correct titles and links. Each article needs one main heading and a link back. Add a Blog link to the site navigation. Plan a redirect if a live slug changes.

Do not use collections.all for the public index: it may include non-post content. The directory rule excludes drafts from all collections, including posts. Validate each slug before publication; the compact example does not reject duplicate or unsafe slugs.

Use a branch and review before the production merge. GitHub branch protection can require review and checks (accessed 2026-09-23). Review factual claims, links, image rights, slugs, and front matter. Add build validation for duplicate slugs and missing fields when the project grows.

What is the edit-to-publish test?

Run npx @11ty/eleventy with draft: true. Confirm _site/blog/studio-hours/index.html does not exist and the index omits the title. Change only draft: false, rebuild from a clean output directory, and confirm both the page and its index link exist. A local Eleventy 3.1.6 run of these files passed both states. A deployed route still needs review.

If the site deploys through Git, inspect a branch preview before merge. After merge, open the public URL and compare it with the reviewed source. A local pass is not a live publish. Remove the sample post or replace it with approved real content before deployment.

Use this acceptance record for every new post:

Stage	What to check
Source	Required fields, unique slug, approved copy, image rights
Local build	Draft excluded; published post appears at expected route
Preview	Index, article, links, mobile layout, metadata
Production	Exact public URL and content match reviewed commit

When is a static blog the wrong fit?

If editors need scheduling, many authors, or visual editing, a CMS may fit better. Test its workflow and cost first. An "editable" claim should mean one source change produces the intended public result.

You can use AI with your website to prepare a precise content-change prompt. It returns a plan, not repository access. Figment's AI editor is still an early-access request for a separate imported static copy. It does not accept arbitrary source files or provide this Markdown-to-publish workflow today. Keep the blog's source and deployment process in the site repository you control.

Sources and access date

Eleventy computed data, collections, and permalinks, accessed 2026-09-23. These support the draft and URL rule; the local run checked their combined behavior.
GitHub branch protection, accessed 2026-09-23. Optional review gate, not an Eleventy requirement.

Figment.so