【個人開発】ブログ専用CMSをNext.jsで作った｜GitHubに直接コミットする仕組みと、実際に使っている機能
ゆう
先に結論
このブログは「Astro」という仕組みで動いており、記事のデータはすべてGitHubに直接置いて管理しています。
最初はパソコンのテキストエディタで直接書いていました。ただ、記事を書くたびに裏側の管理データを書き換える必要があり、画像も決められたフォルダへわざわざ移動させなければならず、更新のたびに待たされる作業が地味に負担でした。
そこで面倒な設定作業をすべて自動化し、記事を書くことだけに集中できる自分専用の管理画面を自作しました。
結論から言うと、GitHubの保管場所をそのまま保存先にするのが、個人ブログには一番軽快でぴったりでした。
なぜ管理画面を自作したのか
世の中には既存の管理ツールもありますが、このブログには譲れない条件がありました。
管理画面に求めた条件
- 記事の特別な書き方（デザイン用コード）を崩さずに保存したい
- 外部サービスに大切な記事本文を預けたくない
- 画像やサムネイルの配置・整理をすべて自動でやってほしい
- 公開されたページとまったく同じ見た目で、下書きのうちから確認したい
- URLが滅茶苦茶にならないように自動で管理したい
特に大きかったのが「ブログ独自のデザイン記法を壊さずに保存・編集できること」でした。一般的なツールを使うと、せっかく配置したデザイン枠やカードが消えてしまうことがあったため、自分で作る決断をしました。
できたこと
実際に使っている便利な機能
- 自分だけが安全にアクセスできるログイン機能
- 記事の新規作成・編集・下書き保存・公開・下書き戻し
- 2秒文字入力を止めると自動保存／間違えても Ctrl+Z で何度でも元に戻せる
- 実際のブログと完全に同じ見た目で確認できるリアルタイムプレビュー
- 一覧画面での検索・タグ絞り込み機能
- 画像のアップロード
- ボタンひとつでデザインカード類を挿入できる機能
- 誤操作を防ぐ安全な削除機能と、接続トラブルを診断するページ
筆者が運用している今回制作したCMSは、特定のGitHubアカウントでしかサインインできないようになっています。
技術の仕組み
| 管理画面 | Next.js |
|---|---|
| ブログ本体 | Astro |
| 保存先 | GitHub |
| ログイン認証 | GitHubアカウント連携 |
| ホスティング | Netlify |
| データベース | なし |
保存の流れはとてもシンプルです。
記事が保存されるまでの流れ
- 画面で文章を書く
- 2秒間入力を止めると、自動でサーバーへ文章を送る
- 裏側のプログラムが文章を整え、必要な設定を自動で補完する
- GitHubへ自動で送って保存する
- サーバーが新しい内容を読み込んで、ブログが自動更新される
データ専用の金庫（データベース）を用意していないため、バックアップも過去の変更履歴もすべてGitHubが自動でやってくれます。運用がとにかく楽になりました。
設計で気をつけたこと
1. 上書きミスを防ぐ
別のタブで同じ記事を開いていたり、外からファイルをいじったりした直後に保存するとエラーになることがあります。そのため、エラーを検知したら裏側でこっそり最新の状態を確認し、1度だけ自動で保存をやり直す仕組みを入れました。書いていた内容が消える心配はありません。
2. ブログ独自の記法を壊さない
ブログの中に「商品カード」などの特別な飾りを入れる書き方をしています。普通のプログラムだとこれがエラーだと誤解されて消えてしまうことがありました。文字の解析順序を工夫することで、飾り記法が壊れずにそのまま保存されるようにしました。
3. 番号＝URL を壊さない
このブログの記事URLは 「https://space-lab.jp /blog/6/」のように連番になっています。記事を削除すると番号に穴が空き、そのままでは「No.6」の次が「No.8」になって不自然です。
そこで削除時は、後ろの記事の番号や関連する画像フォルダ、他記事からのリンクまで一括で自動修正するようにしました。
4. 自動保存と「元に戻す（Undo）」
文字を書くのを止めると2秒で自動保存されます。間違えて消してしまっても Ctrl + Z キーで数文字単位ではなく「区切りの良い単位」で手軽に元に戻せるよう調整しています。
5. プレビューは本物と全く同じ見た目
下書きを書いている最中から、実際にブログに公開された時とまったく同じデザイン・見た目で確認できる画面を用意しました。「公開してみたらレイアウトが崩れていた」というガッカリがなくなります。
6. 画像の安全対策と自動整理
写真をアップロードすると、自動的に「撮影場所」などのプライバシー情報（EXIFデータ）を消去します。さらに、サイズや見栄えを整えて自動で専用フォルダへ整理してくれます。
苦労したこと
日本語を入力すると文字が見えなくなる
文字に色をつける仕組みと、日本語を変換する仕組みがケンカして、変換中の文字が画面から消える現象が起きました。変換中だけ文字表示のルールを変えることで無事に解決しました。
一覧画面がごちゃごちゃしていた
最初は日付やサムネイル画像を並べたカード型にしていましたが、記事を選ぶ画面としては情報が多すぎました。今はタイトルと公開状態だけのシンプルな1行リストにして、探しやすいように改善しています。
反映されるまでに少し待ち時間がある
保存ボタンを押しても、ブログ全体が更新されるまで1〜3分ほど時間がかかります。「保存したのに変わっていない！」と焦らないよう、画面に「ただいま反映中です（1〜3分かかります）」と案内を出すようにしました。
安全面の工夫
- ログインできるユーザーを自分自身のアカウントだけに限定
- 大切なパスワードやアクセス権限の情報は画面側に見せない仕組み
- 過去の変更履歴がすべて記録されるため、いつでも昔の状態に戻せる
作ってよかったこと
一番の収穫は、記事を書くまでの面倒な作業がなくなったことです。
裏側の設定を気にしたり、画像の置き場所を迷ったりする必要がなくなり、下書きの見た目もその場で確認できます。文章を書くことだけに集中できるようになりました。
本当にnoteのエディタ機能で編集してるような感覚です。
一方で、管理ツールは「作ること」より「不具合で記事を壊さないこと」のほうが難しいとも感じています。だからこそ、誤削除の防止や保存エラーへの備えなど、「万が一の事故を防ぐ仕組み」にしっかり時間をかけました。
まとめ
このブログをAstro×AIで作ったときの話はこちら
よくある質問
管理画面はスマホからも使えますか？
はい！ネット上に公開してある自分専用の管理画面なので、外出先のPCやスマホ問わずいつでもどこでも編集ができます。
難しいデータベースは必要ありませんか？
不要です。文章も画像もすべて通常のファイルとして保存し、変更履歴の管理もGitHubに任せているため、データベースの契約や面倒な管理は一切不要です。
記事のデザインカードはどうやって入れますか？
ツールバーの「カード」ボタンから、引用・メリット／デメリット・まとめ・Q&Aなどをワンクリックで挿入できます。複雑なプログラミングコードを書く必要はありません。