kakubase preview CLIで記事を作成・プレビューする方法

はじめに

kakubase には、記事を書くときに便利なCLIツール（kakubase-cli）が用意されています。

このツールを使うと、次のことが簡単にできます。

• リポジトリの初期セットアップ
• 記事ファイルの雛形を自動生成
• ローカルプレビューサーバーの起動（ファイルを保存するたびに自動リロード）

GitHub に push する前に、kakubase の実際のデザインで記事の見た目を確認できるのがポイントです。

事前準備

Node.js のバージョンを確認する

kakubase-cli の実行には Node.js v18 以上 が必要です。 ターミナルで以下を実行してバージョンを確認してください。

node --version
# → v18.x.x 以上であれば OK

v18 未満の場合は Node.js 公式サイト から最新の LTS 版をインストールしてください。

Step 1 — リポジトリを初期化する

npx kakubase-cli init を実行する

記事を管理するリポジトリのルートディレクトリ（articles/ フォルダを置く場所）で、次のコマンドを実行します。

npx kakubase-cli init

実行すると、以下のファイル・フォルダが自動で作成されます。

articles/        ← 記事を置く場所
images/          ← サイト共通の画像
.gitignore
README.md
はじめかた.md
記事の書きかた.md
よくある質問.md

生成されるファイル構成

初期化後のフォルダ構成はこのようになります。

my-content-repo/
├── articles/          ← 記事はここに入れる
├── images/            ← サイト全体で使う画像
├── .gitignore
├── README.md
├── はじめかた.md
├── 記事の書きかた.md
└── よくある質問.md

Step 2 — 記事を新規作成する

npx kakubase-cli new:article を実行する

新しい記事を作るときは、次のコマンドを実行します。

npx kakubase-cli new:article

実行するとスラッグ（記事の URL・フォルダ名）の入力を求められます。

  slug（記事のURL・フォルダ名）: my-first-post

スラッグは 英小文字・数字・ハイフンのみ 使えます（例：my-first-post、2026-04-diary）。

入力すると articles/{slug}/index.md が自動生成されます。

  ✅  articles/my-first-post/index.md を作成しました

生成された index.md を確認する

生成された index.md をエディタで開くと、このような内容になっています。

---
title: ここにタイトルを書く
published: false
slug: my-first-post
topics: []
---

ここから記事を書きます。

この --- で囲まれた部分が frontmatter（記事の設定情報）です。次のステップで詳しく説明します。

Step 3 — 記事を書く

frontmatter を設定する

frontmatter は記事のタイトル・公開設定・タグなどを定義するブロックです。

---
title: kakubase preview CLIで記事を作成・プレビューする方法  # 必須
published: false    # 下書き。公開するときは true に変える
slug: my-first-post # URLのパス（省略するとフォルダ名）
topics: ["kakubase", "CLI", "入門"]  # タグ（最大5つ）
thumbnail: cover.png  # サムネイル画像（省略可）
---

フィールド	説明	必須？
title	記事のタイトル	必須
published	true で公開、false で下書き	省略時は非公開
slug	URL のパス	省略可
topics	タグ（最大5つ）	省略可
thumbnail	サムネイル画像ファイル名	省略可

Markdown 本文を書く

本文は Markdown で書きます。基本的な記法の例を示します。

## 見出し（H2）
### 小見出し（H3）

**太字**、*斜体*、~~取り消し線~~、`インラインコード`

- リスト項目A
- リスト項目B

> 引用文はこのように書きます

\`\`\`javascript
const message = "Hello, kakubase!";
console.log(message);
\`\`\`

kakubase は Zenn 互換の改行ルール を採用しています。

書きかた	表示結果
1回の改行	改行（<br>）として表示
空行（2回の改行）	段落の区切り

kakubase 専用記法を使う

標準 Markdown にはない、kakubase 独自の記法が使えます。

リンクカード

URL をカード形式で表示します。

<div class="link-card" data-url="https://kakubase.com/"><a href="https://kakubase.com/" target="_blank" rel="noopener noreferrer">https://kakubase.com/</a></div>

Callout（注意書きボックス）

3種類のスタイルがあります。

<div data-callout-type="info"><span class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></span><p>補足情報をここに書きます。</p></div>

画像のサイズ指定

{width=数値} で幅をピクセル指定できます。

<img src="https://kakubase-uploads.s3.ap-northeast-1.amazonaws.com/uploads/2026/04/fa441687-7b38-46de-b72b-40ffc794dd3a.png" alt="プレビュー画面" width="700" style="width:700px">

Step 4 — ローカルプレビューで確認する

npx kakubase-cli preview を実行する

記事を書いたら、ローカルで見た目を確認しましょう。

npx kakubase-cli preview

起動すると自動でブラウザが開き、http://localhost:4567 でプレビューが確認できます。

  kakubase preview

  ➜  Local:   http://localhost:4567

  記事を編集すると自動でリロードされます。
  終了: Ctrl + C

プレビュー画面の見かた

プレビュー画面は3つのエリアで構成されています。

① トップバー — kakubase ロゴと「ライブプレビュー」バッジが表示されます。 ② 左サイドバー — 記事一覧をツリー形式で表示します。 ③ frontmatter パネル — 記事の設定情報（title・published・topics 等）をカラー表示します。 ④ 本文エリア — 記事の本文が表示されます。

サイドバーを使う

サイドバーでは記事ファイルをツリー形式で確認できます。

① 検索ボックス — 記事タイトルやスラッグで絞り込めます。 ② 下書きラベル — published: false の記事には「下書き」ラベルが表示されます。 ③ 画像サムネイル — 記事フォルダ内の画像がサムネイル付きで表示されます。

サイドバーの幅は右端をドラッグしてリサイズできます。開閉状態はブラウザに保存されるので、ページをリロードしても復元されます。

ファイルを保存すると自動リロードされる

index.md を編集して保存すると、ブラウザが自動でリロードされます。

記事を書きながらリアルタイムで見た目を確認できるので、仕上がりのイメージがつかみやすくなります。

画像をクリックすると、ライトボックスで拡大表示することもできます（Esc キーまたは背景クリックで閉じます）。

Step 5 — 公開する

プレビューで確認して問題なければ、published: false を published: true に変更して GitHub に push します。

---
title: 私の最初の記事
published: true   # ← ここを変える
---

git add articles/my-first-post/
git commit -m "初めての記事を公開"
git push

まとめ

kakubase preview CLI を使った記事作成の流れをまとめます。

コマンド	用途
npx kakubase-cli init	リポジトリの初期セットアップ（初回のみ）
npx kakubase-cli new:article	記事ファイルの雛形を生成
npx kakubase-cli preview	ローカルプレビューサーバーを起動
PORT=5000 npx kakubase-cli preview	ポートを変えてプレビューを起動

記事作成の流れ：

1. new:article で雛形を生成
2. index.md を編集して記事を書く
3. preview でプレビューを確認しながら仕上げる
4. published: true に変更して git push で公開

CLIを使うことで、エディタとブラウザを並べながら快適に記事を書けるようになります。ぜひ活用してみてください。