Chillarin Blog 構成紹介 - 0.全体像編 -

背景

自宅でいくつかのNUCを運用している中で、「せっかくなら自宅サーバでブログを作って色々発信してみたい」と思いました。
そこで Hugo + Cloudflare Tunnel + GitHub Actions（self-hosted runner）を組み合わせてブログ環境を作りました。

最初は王道の WordPress で始めるつもりで、実際に作成も開始していました。
ただ、運用や公開方法、そして「遊び要素」との相性を考えると要件が増えていき、最終的に今回の構成に落ち着きました（理由は別章で詳しく書きます）。

外出先から更新できる（= GitHubにpushすれば反映される）
ポート開放はしたくない（家庭回線・セキュリティ的にも）
コメントを付けたい（静的サイトでも運用できる形で）
ペットのチンチラ（リンちゃん）のライブ映像を埋め込みたい（しかも時間帯で出し分けたい）
ついでに、レイアウトや小ネタも遊びたい（崩れない範囲で）
Xへの投稿などを自動化したい

この記事では、まず「全体としてどう繋がっているか」を整理し、次回以降の記事で各要素を分解して紹介していきます。

目的

このシリーズの目的は、大きく2つです。

1) “自宅サーバ運用でも” 更新が楽なブログを作る

記事はGitHubをメインにして、pushしたら自宅サーバ側へ自動反映。
これによって、PCが手元になくても（出先でも）更新できる状態を目指します。

2) 運用目線で「詰まりポイント」も含めて残す

実際に構築してみると、想定外のところでハマります。

Cloudflare Tunnel / DNS / HTTPS周り
Hugoのカテゴリページのテンプレート・CSS
self-hosted runnerの権限・パス・ビルドの事故防止
コメント基盤（Remark42）の公開URLやSameSiteの問題
“記事数が増えるとレイアウトが崩れる” みたいな地味なバグ

こういう「やってみないと分からない部分」も含めて、未来の自分へのメモとしても残します。

全体構成

全体像はこんな感じです。

文章でもざっくり書くと、以下の流れです。

公開経路（ブログ）

GitHubに記事をpush
自宅サーバ上の GitHub Actions self-hosted runner がジョブを受ける
runnerがHugoでビルドして成果物を作る
成果物を /opt/chirarin-blog-public に rsync で安全にデプロイ
nginxコンテナが /opt/chirarin-blog-public を静的配信
Cloudflare Tunnel経由で https://chillablog.chillarin39.com として外部公開

サーバ側のディレクトリ構成（運用の軸）

自宅サーバでは、役割を分けて配置しています。

/opt/actions-runner
GitHub Actions self-hosted runner（ビルド＆デプロイ実行）
/opt/chirarin-blog-infra
nginx + tunnel + remark42 をまとめたdocker-compose（インフラ定義）
/opt/chirarin-blog-public
nginxが配信する“生成物”のみ（ビルド成果物）
/opt/chirarin-blog-site
Hugoのソース（content/layouts/static/configなど）
/opt/nest-control
ライブ制御まわり（後続章で説明予定）
/opt/containerd
コンテナ基盤（root管理）

「ソース」と「公開物」を分けて事故が発生しても損失を極力抑えられるよう工夫しております。

この記事シリーズに今後掲載する内容

このシリーズでは、ざっくり以下を順番に扱う予定です（多少前後するかも）。

物理・仮想基盤（NUC×3 + Proxmox）
- NUC3台の役割分担（例：blog系VM、メディア/stream VM、管理/検証VM）
- Proxmox上のVM設計（CPU/RAM/ストレージ、バックアップ方針）
- ネットワーク（ブリッジ、固定IP、LAN側動線）
- チンチラ定点カメラ用 Google Nest Cam紹介
公開の核：Cloudflare Tunnel設計
- ポート開放なしで公開する思想
- Tunnelの構成・ingress（blogとcommentsの振り分け）
- DNS/証明書周りの落とし穴（詰まりやすい箇所だけ濃く）
Hugoでブログを作る（テーマ・テンプレの基本）
- Hugoプロジェクト構成（content/layouts/static/config）
- 既存テーマを使わずに整える場合のポイント（baseof / partial / taxonomy）
- “最初に決めるべきルール”（URL設計、カテゴリ/タグ、画像配置）
Dockerで本番サービス化（nginx + tunnel + remark42）
- /opt/chirarin-blog-infra/docker-compose.yml の解説
- nginxが読むのは /opt/chirarin-blog-public（ここが公開物で固定）
- コンテナのrestart policy / systemd / 再起動耐性の話
運用効率アップを目的とした自動化
- GitHub Actions self-hosted runnerで自動反映（CI/CD）
- deploy.yml の狙い（public全消し事故防止の工夫が強い）
- ビルド→検証→rsyncの流れ
- 失敗した時の切り分け（runnerログ、権限、ssh鍵、ワークディレクトリ）
- Xへの半自動投稿
ギミック：ライブ映像編
- チンチラライブ映像 Google Nest Camとgo2rtcの連携
- チンチラカテゴリだけライブ枠を出す（sidebar.htmlの条件分岐）
- status.jsonでON/OFFやaudioを切る発想（運用に強い）
- 配信コントロールアプリ
ギミック：見た目・遊び・コメント（＋おまけのトラブルシュート）編
- 「記事数でレイアウトがズレる」問題をどう潰したか（display: contents / gridの固定配置）
- 背景チンチラ（roamer）等、遊び要素の入れ方
- 記事投稿ページにのみ導入したコメント（Remark42）の紹介

このシリーズで“やらないこと”（方針）

本筋から外れやすいので、以下は深追いしない方針です（必要になったら別記事で書きます）。

CloudflareのCSP / Snippets系の細かい制限の完全解消
（無料プランの制限に引っ張られがちで、目的に対して労力が大きい）
完璧なセキュリティ設計の解説（WAF/Access/Zero Trustのフルセットなど）
（必要性が出たら追加する）

次回は「物理・仮想基盤編（NUC×3 + Proxmox）」です。
環境をどう分割して運用しているかを、図と設定例つきで整理します。

自宅サーバ運用の全体像は自宅サーバ運用の完全ガイド — Proxmox + Cloudflare Tunnel + Docker で個人ブログを公開し続けるにまとめています。Proxmox クラスタ・公開経路・Docker 本番化・障害対応までを 1 ページで通読できる Pillar ガイドです。

· · ·