
この記事では、GitHubリポジトリと kakubase を連携して、`git push` するだけで記事が自動公開される環境を構築する方法を解説します。
初めて kakubase を使う方を対象にしています。
kakubase は GitHub リポジトリと連携することで、記事の公開・更新を自動化できます。
一度セットアップすれば、手順はとてもシンプルです。
git push するこのページでは、そのセットアップを一から説明します。
GitHub アカウントをお持ちでない場合は、GitHub からアカウントを作成してください。
すでにお持ちの場合はそのまま次に進んでください。
kakubase の記事を管理する GitHub リポジトリを新規作成します。
my-kakubase-content)リポジトリ名は後から変更できますが、kakubase 側の設定も更新が必要になります。最初から使いやすい名前をつけておくことをおすすめします。
kakubase にアクセスして、GitHub アカウントでログインします。
「GitHub でログイン」ボタンをクリックすると GitHub の認証画面が開きます。許可して進んでください。
ログイン後、kakubase のダッシュボードからリポジトリの連携設定を行います。
連携が完了すると、そのリポジトリへの push を kakubase が検知するようになります。
連携時に kakubase の GitHub App がリポジトリへのアクセス許可を求めます。「Only select repositories」で対象リポジトリだけを選ぶと安全です。
手元にリポジトリをクローンして、初期化コマンドを実行します。
git clone https://github.com/{ユーザー名}/{リポジトリ名}.git
cd {リポジトリ名}
npx kakubase-cli init
`kakubase-cli` の実行には **Node.js v18 以上**が必要です。
`node --version` で確認し、v18 未満の場合は [Node.js 公式サイト](https://nodejs.org/) からインストールしてください。
実行すると、以下のファイルとフォルダが自動で生成されます。
articles/ ← 記事を置く場所
images/ ← サイト共通の画像
.gitignore
README.md
はじめかた.md
記事の書きかた.md
よくある質問.md
初期化後のフォルダ構成はこのようになります。
my-kakubase-content/
├── articles/ ← 記事はここに入れる
├── images/ ← サイト全体で使う画像
├── .gitignore
├── README.md
├── はじめかた.md
├── 記事の書きかた.md
└── よくある質問.md
この状態で最初の push をします。
git add .
git commit -m "初期化"
git push
記事を新規作成します。
npx kakubase-cli new:article
スラッグ(記事の URL)の入力を求められます。英小文字・数字・ハイフンのみ使えます。
slug(記事のURL・フォルダ名): my-first-post
入力すると articles/my-first-post/index.md が生成されます。エディタで開いて記事を書きましょう。
ローカルで見た目を確認したい場合は、プレビューサーバーを起動します。
npx kakubase-cli preview
# → http://localhost:4567 が開く
記事が完成したら、index.md の published を true に変更します。
---
title: 私の最初の記事
published: true # ← false から true に変更
---
あとは git push するだけです。
git add articles/my-first-post/
git commit -m "最初の記事を公開"
git push
`published: true` にして push すると、kakubase 上でその記事が**即時公開**されます。
公開前にプレビューで最終確認することをおすすめします。
push 後、数秒〜数十秒で kakubase に記事が反映されます。
kakubase のダッシュボードまたは自分のプロフィールページで、記事が表示されているか確認してください。
| ステップ | 作業内容 |
|---|---|
| 事前準備 | GitHub アカウント作成・リポジトリ作成 |
| Step 1 | kakubase に GitHub アカウントでログイン |
| Step 2 | ダッシュボードでリポジトリを連携 |
| Step 3 | npx kakubase-cli init で初期化・push |
| Step 4 | 記事を書いて published: true にして push |
| Step 5 | kakubase で公開を確認 |
一度セットアップしてしまえば、あとは記事を書いて push するだけで公開できます。ぜひ活用してみてください。
まだコメントはありません。最初のコメントを書いてみましょう。
コメントするには ログイン してください。