5分で Hexo + Cloudflare Pages にページ公開

前提

• Node.js v20.11.1
• Git v2.44.0
• VSCode v1.87.1
• GitHub と Cloudflare のアカウントを作成済み
• Windows 10 (PowerShell 使用前提のコマンド例です)

セットアップ

ローカルでブログのプロジェクトを作成
<blog-name> はお好みで名前を変えてください

npm install hexo-cli -g
hexo init <blog-name>
cd <blog-name>
npm install
hexo server

ディレクトリ構成とコマンド呼び出し結果

この状態で http://localhost:4000 にブラウザでアクセスすれば、以下のページが表示される

デプロイ

はじめに GitHub レポジトリを作成し、Cloudflare Pages に連携して、デプロイを実施する

GitHub 登録

GitHub | Create a new repository より、レポジトリ作成

以下、コマンド実行時には <username> はGitHubのユーザー名に変えてください

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/<username>/my-hexo-blog.git
git push -u origin main

Cloudflare 設定

Cloudflare | Dashboard へログイン

Dashboard の左メニュー Workers & Pages を選択

Pages の Create application より Connect to Git を選択

ページのガイドに従い、GitHub 連携を行ったうえで、先ほど挙げたGitHub リポジトリを選択し、Build configurations セクションで次の情報を入力

名称	設定値
Project name	<blog-name>
Production branch	main
Framework preset	None
Build command	npx hexo generate
Build output directory	public

あとはガイドに従って進めると、デプロイが始まり、以下の View site から確認できます。(pages.dev 内)

完成

参考

• hexo | Setup
• Cloudflare | Deploy a Hexo site