# How can a business owner update a static site themselves? (Adding a CMS to a static site)

Mark the parts the owner should be able to change (text, photos, a news list) with data-cms attributes, declare them in schema.json, and invite the owner to the Siteon dashboard. The owner edits from a phone and the change reaches every page within 15 seconds on Siteon hosting, or within a minute if you keep your own hosting, with no rebuild. Only the marked areas can be edited, so the design stays intact; it costs $4/month per site on your live domain.

URL: https://siteon.dev/guides/add-cms-to-static-site
Updated: 2026-10-26

## How it works

- You add `data-cms` attributes to the HTML. The text already inside each element is the default
- schema.json declares which fields exist. The dashboard shows exactly those fields to the owner, and nothing else
- Values are inserted as text before the page is delivered, so search engines see the updated content. Editors' input can never inject HTML or scripts
- If the CMS can't be reached, the HTML text you wrote is shown as is. The site never goes down because of the CMS

## Steps

### 1. Add the script tag

```html
<script src="https://cdn.siteon.dev/sitekit.js" data-site="hanaya" defer></script>
```

### 2. Mark the editable areas

```html
<dl>
  <dt>Open</dt>
  <dd data-cms="hours.days">Mon–Sat</dd>
  <dt>Hours</dt>
  <dd data-cms="hours.time">10:00 - 18:00</dd>
</dl>

<!-- A news list: the template repeats for each item -->
<ul class="news">
  <template data-cms-list="news" data-cms-limit="3">
    <li>
      <time data-cms="date">2026-01-01</time>
      <span data-cms="title">Article title</span>
    </li>
  </template>
  <template data-cms-empty="news"><li>No news yet.</li></template>
</ul>
```

### 3. Declare the fields in schema.json and apply it

```json
{
  "locales": ["en"],
  "groups": [
    { "key": "hours", "label": "Opening hours", "fields": [
      { "key": "days", "label": "Open", "type": "text" },
      { "key": "time", "label": "Hours", "type": "text" }
    ] }
  ]
}
```

Lists such as news are declared under `collections` (see [Writing schema.json](https://siteon.dev/docs/schema)).

```sh
siteon schema push --site hanaya
```

### 4. Publish, and invite the owner

```sh
siteon deploy ./dist --site hanaya
```

In the [dashboard](https://app.siteon.dev), invite the owner by email as staff of that site. Staff can edit content and read inquiries for their own site only. They never see billing or your other sites.

## Three ways to deliver the values

| | Siteon hosting | Cloudflare Pages relay | Other hosting (`data-embed`) |
|---|---|---|---|
| When values are inserted | Before delivery | Before delivery | In the browser after the page loads |
| Time for an edit to go live | Within 15 seconds | Up to 1 minute | Up to 1 minute |
| A page per article, tag pages | Available | Available | Not available |

## What it costs

| | Free | Lite | Standard | Business |
|---|---|---|---|---|
| Monthly | $0 | $4 | $12 | $39 |
| CMS items | 20 lifetime | 100 | 1K | 10K |
| Photos | 100MB | 1GB | 5GB | 20GB |
| AI translation & writing | 3 trial uses | Not included | 30 articles/mo | 150 articles/mo |

There is no charge per editor. On Free, editing works on development and preview domains and on its Siteon hosting subdomain (`<name>.siteun.com`). Custom domains need a paid plan.

## Limits and what's coming

- Only the areas you mark can be edited. Layout and design changes still happen in the code
- `data-embed` replaces the contents of `body` after load, so avoid it on sites with their own JavaScript. Use Siteon hosting or the relay instead
- Your own domain with Siteon hosting (coming soon)

## Related docs

- [Editable area markers (CMS)](https://siteon.dev/docs/cms): text, photos, lists, article pages, multiple languages
- [Writing schema.json](https://siteon.dev/docs/schema)
- [Hosting and delivery](https://siteon.dev/docs/hosting)

---

Siteon is infrastructure for AI-built websites: it adds hosting, a CMS your client can edit, contact forms, analytics and control from AI agents (CLI and MCP) around static HTML built with AI or by hand, so it is ready to ship.