GitHubを使わずに使う方法

OJapp Blog Kitは、GitHubを使わずにローカルで使ったり、ビルド済みファイルを手動で公開したりできます。

まず、次の2つは別の使い方です。

• ローカルだけで使う：自分のPCで記事を書き、プレビューする。インターネット上には公開されません。
• GitHubを使わず公開する：自分のPCでビルドし、dist/をホスティング先へアップロードします。

ローカルだけで記事を書く・確認する

1. ZIPをPCに展開します。
2. プロジェクトフォルダでターミナルを開き、初回だけ依存関係を入れます。

npm install

3. content/のMarkdown記事やarticles.jsonを編集します。
4. ビルドします。

npm run build

dist/にHTMLが生成されます。表示を確認する場合は、VS CodeのLive ServerなどのローカルWebサーバーでdist/index.htmlを開いてください。HTMLを直接ダブルクリックしてfile://で開くと、記事検索など一部の機能が動かないことがあります。

この使い方なら、記事データと生成結果はPC内にあります。公開URLがなくても執筆や確認はできますが、他の人がインターネットから閲覧することはできません。

GitHubを使わずCloudflare Pagesへ公開する

ローカルでビルドしたdist/を、Cloudflare PagesのDirect Uploadでアップロードします。Wranglerのコマンドを使わず、Dashboardから操作できます。

初回

1. site.jsonのurlを、公開予定のpages.dev URLまたは独自ドメインに設定します。
2. npm run buildを実行してdist/を作ります。
3. Cloudflare DashboardのWorkers & PagesからPagesプロジェクトを作成し、Drag and dropでdist/をアップロードします。
4. デプロイ後、必要ならPagesプロジェクトのCustom domainsから独自ドメインを設定します。

記事を更新するとき

記事や設定を編集したら、ローカルで再度npm run buildを実行します。その後、Pagesプロジェクトで新しいデプロイを作成し、更新されたdist/をアップロードします。

この方法ではGitHubへのPushは不要ですが、ビルドとアップロードは更新のたびに行います。CloudflareのDirect Uploadプロジェクトは、後からGit連携プロジェクトへ切り替えられません。将来GitHub連携に変更するときは、新しいPagesプロジェクトを作る必要があります。

Wranglerでコマンドから公開する

アップロード操作をコマンドで行う方法もあります。初回はプロジェクト内にWranglerを追加してCloudflareへログインし、Pagesプロジェクトを作ります。

npm install -D wrangler
npx wrangler login
npx wrangler pages project create

プロジェクト名を作成した後は、記事を更新するたびに次を実行します。

npm run build
npx wrangler pages deploy dist --project-name=プロジェクト名

コマンドが苦手ならDashboardからのアップロード、操作をまとめたいならWrangler、という選び方です。どちらもビルド済みのdist/を公開します。

GitHubを使う場合との違い

GitHub連携では、記事をPushすると公開先が自動でビルド・デプロイします。GitHubを使わない場合は、PCでビルドしたあと、自分でdist/をアップロードします。

どちらの方法でも、元になる記事はcontent/のMarkdown、設定はsite.jsonとarticles.jsonです。公開方法を選んでも、記事の内容は自分のファイルとして保持できます。