Blog Kit ダウンロード・導入ガイド

OJapp Blog KitをZIPまたはGitHubテンプレートから導入。Node.jsの準備、site.jsonの設定、ビルド、Cloudflare Pagesへの公開手順を紹介します。

OJAPP BLOG KIT · DOWNLOAD

自分のブログを、
ここから始めよう。

Blog Kitをダウンロードして、Markdownで記事を書く。
ビルドしたファイルを公開するだけで、自分のブログが完成します。

必要なもの:Node.js / テキストエディター / 公開先(Cloudflare Pagesなど)

QUICK START

公開まで、4ステップ。

コマンドを使うのは最初の準備とビルドだけ。記事は普通のMarkdownファイルで管理できます。

01

Node.jsを準備してZIPを展開

Node.js公式サイト ↗からLTS版をインストール。Blog KitのZIPを解凍し、展開したフォルダをVS Codeなどで開きます。

02

site.json を設定

ブログのタイトル、公開URL、言語などを自分のサイトに合わせて変更します。公開URLは実際の配置先に合わせて設定してください。

site.json(設定例)
{
  "title": "My Blog",
  "url": "https://example.com/",
  "lang": "ja"
}

※ 上記は主要項目の例です。既存のsite.jsonを丸ごと置き換えず、必要な値を編集してください。

03

インストールしてビルド

展開したBlog Kitのルートフォルダで、ターミナルを開いて実行します。

Terminal
npm install
npm run build

完了すると、公開用の静的ファイルが dist/ に生成されます。

04

Cloudflare Pagesで公開

Cloudflareダッシュボード ↗からWorkers & PagesのPagesプロジェクトを作成し、ドラッグ&ドロップ方式で dist/ フォルダをアップロード。発行されたURLで表示を確認します。

独自ドメインは公開後に追加できます。Cloudflareの画面表記や操作手順は変更される場合があります。

WRITE & REBUILD

公開後も、やることはシンプル。

✍

記事を書く

content/ にMarkdownファイルを追加。記事のタイトルや公開日などは articles.json で設定できます。

↻

再ビルドする

記事を更新したら npm run build。記事一覧やRSS、サイトマップなども再生成します。

↗

もう一度公開

更新された dist/ を再アップロード。GitHub連携による自動公開へ切り替えることもできます。

CHOOSE YOUR WORKFLOW

ZIPでも、GitHubでも。

LOCAL FIRST

ZIPから始める

まずは自分のPCで作って、完成した dist/ をアップロード。構成を確認しながら進めたい人向け。

ZIP公開後にダウンロード可能

GITHUB WORKFLOW

テンプレートから始める

GitHubに自分のリポジトリを作成。GitHub ActionsやCloudflare Pagesとの連携で公開を自動化できます。

GitHubテンプレートを見る ↗