Shimabox Blog

~sit in the sun~

blog.shimabox.netの元となるソースコードを公開しました

blog.shimabox.netの元となるソースコードを公開しましたはてなブックマーク

GitHubCloudflareHono

はじめに

はいさい！先日、このブログをWordPressからCloudflare Pages + Honoに移行しました。

で、移行して数日が経ち、個人的にこの構成がすごく気に入ったので、このブログ（blog.shimabox.net）の元となるソースコードをGitHubで公開することにしました。

https://github.com/shimabox/shimabox-blog-demo

「ブログを自分で作ってみたい」「Cloudflare Pages + Honoを触ってみたい」という方の参考になればうれしいです。

なぜ公開したか

正直なところ、最初は「自分用だし別に公開しなくてもいいかなぁ」と思っていました。

でもですね、移行作業をしていく中で、この構成がなかなか良くて。シンプルだし、早いし、何より完全無料で運用できるんですよね。Cloudflareの無料枠、太っ腹すぎませんか。

それで、「これ、誰かの役に立つかもしれないな」と思い始めまして。どうせなら公開して、同じようにブログを作りたい人の助けになれたらいいなと。そんな感じです。

この構成の良いところ

個人的に気に入っているポイントを挙げると以下になります。

  • 完全無料で運用可能
    • Cloudflareの無料枠で余裕で収まります。正直、この無料枠を超える個人ブログってなかなか無いと思いますし。
  • エッジ配信で高速
    • Cloudflareの強みですね。世界中どこからアクセスしても速い🚀
  • シンプルで理解しやすい
    • SPAとかではなく、リクエストが来たらHTMLを返すだけの昔ながらのMPA方式。シンプル・イズ・ベストだ。
  • カスタマイズが自由
    • テンプレートエンジンではなくJSXで書くので、Reactに慣れている人なら違和感なくいじれると思います。
  • Markdownで書ける
    • 技術ブログ書くならこれでしょう。VSCodeでMarkdown書いて、LiveReload対応しているのでローカル環境で保存したら即反映。最高🔥

技術スタック

このブログで使っている技術たちです。

技術 用途 一言
Hono Webフレームワーク 軽量で速い。JSX書ける。Cloudflareとの相性抜群
Cloudflare Pages ホスティング エッジ配信。無料枠が太っ腹
Cloudflare R2 ストレージ 記事・画像の保存。エグレス無料なのがエグい。
Cloudflare KV キャッシュ TTLなし＋明示的無効化方式で運用
Satori + resvg-js OGP画像生成 コマンド一発でOGP画像が作れる
highlight.js シンタックスハイライト CDNから読み込み。軽い

R2の「エグレス無料」は地味にすごいポイントですね。S3互換なのに転送量がかからない。個人ブログくらいなら完全に無料枠で収まります。（エグレス無料はエグい。エグレスだけに。やかましい。）

機能一覧

公開しているテンプレートには、だいたい必要そうな機能は入れてあります。

Markdownで記事が書ける

当たり前ですが、記事はMarkdownで書けます。コードブロックはもちろん、テーブルやGitHub Alertsにも対応しています。

package main

import "fmt"

func main() {
    fmt.Println("コードブロックも余裕です")
}
💡 Tip

こういうGitHub Alertsも使えます。NOTEとかWARNINGとか、いくつか種類があります。

OGP画像の自動生成

コマンド一発で記事ごとのOGP画像を生成できます。

# 特定の記事のOGP画像を生成
npm run generate-ogp -- your-slug

# 強制上書き
npm run generate-ogp -- your-slug --force

# 全記事のOGP画像を生成
npm run generate-ogp

Satori + resvg-js を使っていて、JSXでOGP画像のレイアウトを定義できます。アバター画像を入れることもできますし、入れなくても動きます。

ダークモード対応

システム設定に連動して自動でダークモードになります。右上のボタンで手動切り替えも可能です。

埋め込み対応

記事内にURLを書くだけで、自動的に埋め込みカードに変換されます。

  • X（Twitter）: ツイートの埋め込み
  • YouTube: 動画プレイヤーの埋め込み
  • Gist: GitHub Gistの埋め込み

絵文字ショートコード

:rocket: → 🚀 みたいに、絵文字ショートコードを自動変換します。GitHubと同じノリで使えます。

RSSフィード

/feed/ でRSSフィードを配信しています。フィードリーダーで購読できます。

シェアボタン

記事詳細ページの下部にシェアボタンを用意しています。

  • X（Twitter）でシェア
  • はてなブックマークに追加
  • CuraQに保存

CuraQは最近話題の「あとで読む」を資産に変えるAIナレッジアシスタントです。URLを送るだけでAIが自動でタグ付け・要約してくれて、「最近読んだテスト駆動開発のやつ」みたいな曖昧な表現でも検索できるのがすごい。このブログでも対応してみました。

Claude Code対応

Claude Codeを使っている方向けに、/new-post というスラッシュコマンドを用意しています。

/new-post 記事のタイトル

これを実行すると、記事ファイルの作成、画像ディレクトリの作成、サムネイル画像生成用のプロンプト出力まで一気にやってくれます。地味に便利。

セットアップ方法

詳しくは README を見ていただくのが一番なのですが、大まかな流れを書いておきます。

1. リポジトリをフォーク（またはクローン）

GitHub Actionsでの自動デプロイを使うには、自分のGitHubリポジトリが必要なのでフォークしてください。

# フォークしたリポジトリをクローン
git clone https://github.com/your-account/your-blog.git
cd your-blog
npm install
ℹ️ Note

ローカルで動かすだけならクローンでもOKですが、自動デプロイまでやるならフォークが必要です。

2. まずはローカルで動かしてみる

npm run dev
# http://localhost:8787 でアクセス

この時点でサンプル記事が表示されるはずです。いい感じですね。
記事の更新や追加もローカルでサクッと反映されて確認できます。便利です。

こんな感じで表示されればおｋです。

3. Cloudflareのリソースを作成

Cloudflareアカウントがまだなければ作成して、以下のリソースを用意します。

  • R2バケット（記事・画像の保存用）
  • KV namespace（キャッシュ用）

wranglerコマンドで作れます。

npx wrangler login

# R2 バケット作成
npx wrangler r2 bucket create your-blog-content

# KV namespace 作成
npx wrangler kv namespace create CACHE
npx wrangler kv namespace create CACHE --preview

4. 設定ファイルを自分用に変更

wrangler.toml の name や SITE_URL, SITE_TITLE などを自分のブログ用に書き換えます。

name = "your-blog-name"  # これがURLになります（https://your-blog-name.pages.dev）

[vars]
SITE_URL = "https://your-blog-name.pages.dev" # https://{name}.pages.dev となるように
SITE_TITLE = "Your Blog Title"
SITE_DESCRIPTION = "Your blog description"
⚠️ Warning

nameはCloudflare Pagesのサブドメインになります。好きな名前にしてください。
ただし、他の人が使っている名前は使えません。

5. 初回デプロイ

# OGP画像生成
npm run generate-ogp

# R2にコンテンツを同期
npm run sync

# デプロイ
npm run deploy

これで https://your-blog-name.pages.dev でブログが公開されます。

💡 Tip

Cloudflareアカウントがあれば、30分くらいでデプロイまでいけると思います。

GitHub Actionsで自動デプロイ

mainブランチへのpushで自動デプロイされるようにGitHub Actionsを設定してあります。

差分検知により、変更のあった記事のみR2に同期するので効率的です。新しい記事を追加したらpushするだけです。

📝 Important

PRをマージする際は Squash and merge を使用してください。通常のマージだと差分検知が正しく動作しない場合があります。

GitHub Secretsの設定

GitHub Actionsを動かすには、リポジトリのSecretsにいくつか設定が必要です。

Secret 説明
CLOUDFLARE_API_TOKEN Cloudflare API トークン
CLOUDFLARE_ACCOUNT_ID Cloudflare アカウントID
SITE_URL ブログのURL
ADMIN_KEY キャッシュ無効化API用のキー

こんな感じです。（いちおうpreviewと分けていますが、そこまで意味はないです）

詳しくは README に書いてあります。

おわりに

というわけで、このブログの元となるソースコードを公開しました。

WordPressやはてなブログなど、ブログを書く選択肢は色々ありますが、「自分でブログ基盤を構築してみたい」「Cloudflareを触ってみたい」「Honoを使ってみたい」という方に少しは参考になるんじゃないかなと思います。

Cloudflare + Honoの組み合わせは、シンプルで高速、そして無料で運用できるのが本当に魅力です。

何か問題や質問があれば GitHub Issues までお気軽にどうぞ🙏

スポンサーリンク
← 記事一覧に戻る