npx cms-create-site my-site 今日は何をつくりますか？
見てみるVertex とは
コンテンツサイトは設定ファイルです。それ以外はすべてフレームワークの仕事です。
Vertex CMS は vite-ssg 上に構築された Vue 3 フレームワークです。各ページに何を載せるかを JSON で書くと、ルーティング・メタデータ・テーマ・画像まで処理済みの、事前レンダリングされた静的サイトが返ってきます。書くべきアプリケーションコードも、動かすべきサーバーもありません。
ページはコードではなくデータ
ページとは、コンポーネントの一覧と、それらのコンポーネントが必要とするコンテンツのことです。セクションの追加は 1 行の追加。見出しを変えるために .vue ファイルを開く必要はなく、コンテンツの編集がビルドを壊すこともありません。
デザインはトークンのマニフェスト
テーマは、デザイントークン（パレット、タイポグラフィ、サーフェス、フォーカスリング、エレベーション）をまとめた 1 つの JavaScript オブジェクトです。フレームワークがこれを CSS カスタムプロパティにコンパイルするため、サイト全体の見た目を変えるのはファイル 1 つの作業であり、スタイルシートの棚卸しではありません。
静的な出力、本物の SEO
すべてのルートが、正規 URL・hreflang 代替・JSON-LD・Open Graph タグ・サイトマップ、そしてドラフト設定から導出された robots.txt とともに、それぞれの HTML に事前レンダリングされます。ファイルを配信できる場所ならどこにでもフォルダごとデプロイできます。
クイックスタート
何もない状態から、4 つのコマンドでデプロイ可能なサイトへ。
Vertex は 1 つの npm パッケージと Vite プラグインとして提供されます。スキャフォルダがすぐビルドできる動作するサイトを生成し、そこから先は JSON を編集していくだけです。
サイトを生成する
サイトディレクトリ、スターターテーマ、そしてすでにビルドが通るホームページを作成します。
ターミナル npx cms-create-site my-site cd my-site npm installページを記述する
配列インデックス付きのドット記法によるフラットなキー。フレームワークがこれを展開し、コンポーネントがレンダリング時に読み取るネストされたオブジェクトにします。
site/content/en/pages/home.json { "components[0]": "Header", "components[1]": "Hero", "components[2]": "Footer", "content.hero.headline": "Welcome", "content.hero.subhead": "Built with Vertex CMS.", "content.hero.cta.text": "Get in touch", "content.hero.cta.href": "/contact", "path": "/" }プレビューする
ホットリロード対応の Vite 開発サーバー。コンテンツの編集は即座に反映され、画像やテーマの変更も同様です。
ターミナル npm run dev静的サイトをビルドする
すべてのルートを dist/ 内のそれぞれの HTML ファイルに事前レンダリングし、レスポンシブ画像のバリアントを生成して、sitemap.xml、robots.txt、manifest.json、404 ページを書き出します。
ターミナル npm run build:ssg
これがループのすべてです。完全なコンテンツモデル、テーマトークン、デプロイ先については、こちらをご覧ください： ドキュメント →
含まれるもの
コンテンツサイトに必要な部品は、すでに揃っています。
これらは探しに行くプラグインではありません。フレームワークに組み込まれ、既定で有効で、他のすべてと同じ JSON から設定できます。
事前レンダリングされたルーティング
ルートはページファイルから導出されます。各ルートはビルド時にそれぞれの HTML へレンダリングされます。SPA リライトも、実在するコンテンツ URL にトップページの外枠を返すこともありません。
多言語コンテンツ
互いに対応するロケールごとのディレクトリ。ベースロケールが先に読み込まれ、各ロケールは自身が定義したキーだけを上書きします。つまり部分的な翻訳も有効な翻訳です。
レスポンシブ画像
site/assets/img/ に元画像を置くだけ。ビルドが AVIF・WebP・JPEG を 6 段階の幅で生成し、リポジトリの外にキャッシュして、<picture> の srcset 経由で配信します。
SEO メタデータ
正規 URL、hreflang 代替、Open Graph と Twitter カード、JSON-LD、自動導出されるパンくずリスト、sitemap.xml、robots.txt、ウェブアプリマニフェスト — すべて生成され、手作業での保守は不要です。
ドラフトゲート
1 ページ、パスのプレフィックス、あるいはサイト全体をパスワードで保護できます。保護されたページは noindex 付きで配信され、サイトマップからも除外され、解除されるまで本文をレンダリングしません。
テーマと拡張機能
テーマはトークンのマニフェストです。拡張機能は検証済みのコンポーネントバンドルです。どちらもリポジトリ内に置くことも、npm に公開して複数のサイトで共有することもできます。
3 層のコンポーネント解決
サイト固有のコンポーネントが拡張機能のコンポーネントを上書きし、それが同梱のコンポーネントを上書きします。より具体的なものが優先され、名前が衝突した場合はソース修飾名で区別します。
本物の 404
フレームワークはサイト自身のヘッダーやフッターを備えた /404.html を事前レンダリングします。一致しない URL には、空のレスポンスボディではなく、noindex を持つブランド付きのページが返されます。
はじめる
それでは — 今日は何をつくりますか？
Vertex CMS は MIT ライセンスで npm に公開されています。サイトを生成するもよし、ドキュメントを読むもよし、ソースコードを読むもよしです。
npx cms-create-site my-site