本文へ移動
Siteon

ガイド

店主が自分でサイトを更新できるようにするには?(静的サイトに CMS を後付けする)

お店の人に直してほしい箇所(文言・写真・お知らせの一覧)に data-cms 属性で印を付け、schema.json で宣言し、お店の人を Siteon の管理画面に招待します。お店の人がスマホで直すと、Siteon のホスティングなら15秒以内、いまのホスティングのままなら1分以内に全ページに反映され、サイトのビルドし直しは要りません。直せるのは印を付けた箇所だけなのでデザインは崩れず、本番ドメインでは1サイト月500円からです。

更新日:

しくみ

手順

1. script タグを入れる

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

2. 直せる箇所に印を付ける

<dl>
  <dt>営業日</dt>
  <dd data-cms="hours.days">月〜土</dd>
  <dt>営業時間</dt>
  <dd data-cms="hours.time">10:00 - 18:00</dd>
</dl>

<!-- お知らせの一覧: template の中身が記事の数だけ繰り返される -->
<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">記事のタイトル</span>
    </li>
  </template>
  <template data-cms-empty="news"><li>お知らせはまだありません。</li></template>
</ul>

3. schema.json で項目を宣言して反映する

{
  "locales": ["ja"],
  "groups": [
    { "key": "hours", "label": "営業時間", "fields": [
      { "key": "days", "label": "営業日", "type": "text" },
      { "key": "time", "label": "営業時間", "type": "text" }
    ] }
  ]
}

お知らせのような一覧は collections で宣言します(schema.json の書き方)。

siteon schema push --site hanaya

4. 公開して、お店の人を招待する

siteon deploy ./dist --site hanaya

管理画面で、お店の人をそのサイトのスタッフとしてメールで招待します。スタッフが直せるのは自分のサイトの中身とお問い合わせの確認だけで、請求やほかのサイトは見えません。

値の届け方は3つ

Siteon のホスティングCloudflare Pages の中継ほかのホスティング(data-embed)
値を入れるとき配信の前配信の前表示の後にブラウザで
直してから反映まで15秒以内最大1分最大1分
記事ごとのページ・タグのページ使える使える使えない

料金

FreeLiteStandardBusiness
月額(税抜)0円500円1,480円4,980円
CMS の記事通算 20件100件1,000件1万件
写真100MB1GB5GB20GB
AI の翻訳・文章お試し 3回なし月 30記事月 150記事

編集する人の数では料金がかかりません。Free では、編集は開発・プレビュー用のドメインと、Siteon のホスティングのサブドメイン(<名前>.siteun.com)で使えます。独自ドメインは有料プランです。

できないこと・近日の機能

関連するドキュメント

このページは Markdown でも読めます。AI エージェントには llms-full.txt(全文)を渡してください。