
この記事では、kakubase の CLI ツールを使って記事を作成し、ローカルでプレビューしながら公開するまでの全ステップを解説します。
初めて kakubase に記事を書く方を対象にしています。
kakubase には、記事を書くときに便利なCLIツール(kakubase-cli)が用意されています。
このツールを使うと、次のことが簡単にできます。
GitHub に push する前に、kakubase の実際のデザインで記事の見た目を確認できるのがポイントです。
kakubase-cli の実行には Node.js v18 以上 が必要です。 ターミナルで以下を実行してバージョンを確認してください。
node --version
# → v18.x.x 以上であれば OK
v18 未満の場合は Node.js 公式サイト から最新の LTS 版をインストールしてください。
記事を管理するリポジトリのルートディレクトリ(articles/ フォルダを置く場所)で、次のコマンドを実行します。
npx kakubase-cli init
実行すると、以下のファイル・フォルダが自動で作成されます。
articles/ ← 記事を置く場所
images/ ← サイト共通の画像
.gitignore
README.md
はじめかた.md
記事の書きかた.md
よくある質問.md
すでに `articles/` フォルダが存在する場合は「— already exists」と表示されてスキップされます。既存のファイルが上書きされる心配はありません。
初期化後のフォルダ構成はこのようになります。
my-content-repo/
├── articles/ ← 記事はここに入れる
├── images/ ← サイト全体で使う画像
├── .gitignore
├── README.md
├── はじめかた.md
├── 記事の書きかた.md
└── よくある質問.md
新しい記事を作るときは、次のコマンドを実行します。
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 をエディタで開くと、このような内容になっています。
---
title: ここにタイトルを書く
published: false
slug: my-first-post
topics: []
---
ここから記事を書きます。
この --- で囲まれた部分が 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 |
サムネイル画像ファイル名 | 省略可 |
本文には `#`(H1)を使わないでください。記事のタイトルは frontmatter の `title` から自動生成されます。本文は `##`(H2)から書き始めましょう。
本文は Markdown で書きます。基本的な記法の例を示します。
## 見出し(H2)
### 小見出し(H3)
**太字**、*斜体*、~~取り消し線~~、`インラインコード`
- リスト項目A
- リスト項目B
> 引用文はこのように書きます
\`\`\`javascript
const message = "Hello, kakubase!";
console.log(message);
\`\`\`
kakubase は Zenn 互換の改行ルール を採用しています。
| 書きかた | 表示結果 |
|---|---|
| 1回の改行 | 改行(<br>)として表示 |
| 空行(2回の改行) | 段落の区切り |
標準 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>
これが info(青)のCalloutです。補足情報や豆知識に使います。
これが warning(黄)のCalloutです。注意が必要な内容に使います。
これが alert(赤)のCalloutです。重要な警告に使います。
画像のサイズ指定
{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">
記事を書いたら、ローカルで見た目を確認しましょう。
npx kakubase-cli preview
起動すると自動でブラウザが開き、http://localhost:4567 でプレビューが確認できます。
kakubase preview
➜ Local: http://localhost:4567
記事を編集すると自動でリロードされます。
終了: Ctrl + C
ポート 4567 が使用中の場合は環境変数でポートを変更できます。
```bash
PORT=5000 npx kakubase-cli preview
```
プレビュー画面は3つのエリアで構成されています。
① トップバー — kakubase ロゴと「ライブプレビュー」バッジが表示されます。 ② 左サイドバー — 記事一覧をツリー形式で表示します。 ③ frontmatter パネル — 記事の設定情報(title・published・topics 等)をカラー表示します。 ④ 本文エリア — 記事の本文が表示されます。
サイドバーでは記事ファイルをツリー形式で確認できます。
① 検索ボックス — 記事タイトルやスラッグで絞り込めます。
② 下書きラベル — published: false の記事には「下書き」ラベルが表示されます。
③ 画像サムネイル — 記事フォルダ内の画像がサムネイル付きで表示されます。
サイドバーの幅は右端をドラッグしてリサイズできます。開閉状態はブラウザに保存されるので、ページをリロードしても復元されます。
index.md を編集して保存すると、ブラウザが自動でリロードされます。
記事を書きながらリアルタイムで見た目を確認できるので、仕上がりのイメージがつかみやすくなります。
画像をクリックすると、ライトボックスで拡大表示することもできます(Esc キーまたは背景クリックで閉じます)。
プレビューで確認して問題なければ、published: false を published: true に変更して GitHub に push します。
---
title: 私の最初の記事
published: true # ← ここを変える
---
git add articles/my-first-post/
git commit -m "初めての記事を公開"
git push
`published: true` にして push すると、kakubase 上でその記事が公開されます。
公開前にプレビューで最終確認することをおすすめします。
kakubase preview CLI を使った記事作成の流れをまとめます。
| コマンド | 用途 |
|---|---|
npx kakubase-cli init |
リポジトリの初期セットアップ(初回のみ) |
npx kakubase-cli new:article |
記事ファイルの雛形を生成 |
npx kakubase-cli preview |
ローカルプレビューサーバーを起動 |
PORT=5000 npx kakubase-cli preview |
ポートを変えてプレビューを起動 |
記事作成の流れ:
new:article で雛形を生成index.md を編集して記事を書くpreview でプレビューを確認しながら仕上げるpublished: true に変更して git push で公開CLIを使うことで、エディタとブラウザを並べながら快適に記事を書けるようになります。ぜひ活用してみてください。
まだコメントはありません。最初のコメントを書いてみましょう。
コメントするには ログイン してください。