OJAPP BLOG KIT · GETTING STARTED
あなたに合った方法で、
ブログを育てよう。
スマホでも、PCでも。GitHubでも、ローカルでも。
Blog Kitは、書く場所と公開方法を自分で選べます。
CHOOSE YOUR STYLE
どんな方法で書きたい？
どれが正解ということはありません。自分が続けやすい方法を選んでください。
スマホで気軽に更新
GitHubのWeb画面で記事ファイルを編集。変更を保存すると、設定済みの自動公開が動きます。
スマホでの更新方法 →PCでしっかり編集
VS Codeなら記事もCSSもまとめて編集。一括検索・置換やローカル確認も便利です。
PCでの更新方法 →GitHubなしで公開
PCで記事を書き、ビルドしてできた dist/ をCloudflare Pagesへアップロード。
FIRST SETUP
まずはブログを準備しよう。
ZIPを使う場合の基本手順です。GitHubテンプレートから始める場合も、設定ファイルの考え方は同じです。
Blog Kitを用意する
ダウンロードページからZIPを入手して展開するか、GitHubテンプレート ↗から自分のリポジトリを作ります。ローカルでビルドする場合はNode.js（LTS版）↗が必要です。
site.json を編集する
ブログ名、公開URL、言語などを設定。特に url は公開先のURLと合わせてください。サブディレクトリで公開する場合は末尾の / も含めて正しく指定します。
{
"title": "My Blog",
"url": "https://example.com/",
"lang": "ja"
}※ 既存のsite.json全体を置き換えるのではなく、必要な項目を編集してください。
記事を書いてビルドする
記事本文は content/ のMarkdownファイル、記事情報は articles.json で管理します。PCでビルドする場合はBlog Kitのルートで次を実行します。
npm install
npm run build公開用ファイルは dist/ に生成されます。
WORKFLOW 01 · SMARTPHONE
スマホなら、GitHubで編集。
すでにGitHubリポジトリと自動公開の設定があるなら、スマホだけでも記事を更新できます。
- GitHubで自分のBlog Kitリポジトリを開く。
content/内の記事を開き、編集機能でMarkdownを修正する。新規記事ならファイルを追加する。- 必要に応じて
articles.jsonの記事情報も更新する。 - 変更をコミットする。設定済みのGitHub ActionsやCloudflare Pagesのビルドが実行される。
- 公開先で表示を確認する。
WORKFLOW 02 · PC / VS CODE
PCなら、VS Codeでまとめて編集。
記事だけでなく、CSSや固定ページも触りたい人におすすめ。ファイル検索・一括置換も便利です。
- Blog KitのフォルダをVS Codeで開く。GitHub運用ならリポジトリをクローンしておく。
content/やpages/のファイルを編集し、必要なJSON設定を更新する。npm run buildで生成結果を確認する。- GitHub連携なら変更をコミットしてpushする。VS Codeのソース管理画面やターミナルから操作できる。
- 公開先で表示を確認する。
git add .
git commit -m "Update articles"
git push※ リポジトリを接続していない場合は、このGit操作は不要です。ビルドして手動アップロードする方法もあります。
WORKFLOW 03 · LOCAL UPLOAD
GitHubを使わず、ファイルを公開。
まずBlog Kitを試したい人や、ローカルのファイルだけで管理したい人向け。
- PCにNode.jsをインストールし、Blog KitのZIPを展開する。
site.jsonと記事ファイルを編集する。npm install（初回）とnpm run buildを実行する。- Cloudflare PagesでDirect Upload方式のプロジェクトを作成し、生成された
dist/をアップロードする。 - 記事を更新したら再ビルドし、新しい
dist/を再アップロードする。
PUBLISHING
公開方法も、目的に合わせて。
Cloudflare Pages · Direct Upload
自分のPCで npm run build → dist/ をアップロード。GitHubは不要です。
Cloudflare Pages · Git連携
GitHubリポジトリを接続し、ビルドコマンド npm run build、出力先 dist を設定。pushで自動ビルド・公開します。
GitHub Pages · Actions
GitHub ActionsでBlog KitをビルドしてPagesへデプロイ。テンプレートにワークフローがある場合は、その設定を確認してください。
GitHub上で完結させたい人向け※ CloudflareやGitHubの管理画面・メニュー名は変更される場合があります。公開先のURLを変更したら site.json の url も見直してください。
GOOD TO KNOW
Blog Kitで管理するもの。
content/*.md記事本文。Markdownに加えてHTMLも利用できます。
articles.json記事タイトル、公開日、URL、言語など。
pages/*.mdAboutやLPなどの固定ページ。
pages.json固定ページのタイトルや公開URLなど。
site.jsonブログ全体の設定。
dist/ビルド後に生成される公開用ファイル。