taktamur's Scrap Blog

Tag: #cloudflare

3 scraps

🤖 Discordのチャットからブログ記事が公開されるまでの仕組み

💡 この記事は、まさにこの記事で説明しているフローを使って作られました。Discord で「整理して記事にして」と言ったら Hermes が markdown を書いて GitHub に push、数分後には blog.taktamur.me に反映されています。

システム構成

[Discord] ──message──▶ [Hermes Agent] ──git push──▶ [GitHub: taktamur/hugo-scrap-blog]
                                                           │
                                                    Cloudflare Pages(自動検知)
                                                           │
                                                    hugo build + デプロイ
                                                           │
                                                           ▼
                                                  https://blog.taktamur.me/
レイヤー 役割
Discord ユーザー入力。チャット感覚で記事のネタを投げる
Hermes Agent AI アシスタント。Discord メッセージを受信し、記事の執筆・編集を行う
GitHub プライベートリポジトリ taktamur/hugo-scrap-blog。記事の markdown ファイルを管理
Cloudflare Pages Git 連携で自動ビルド&デプロイ。push を検知して hugo を実行
blog.taktamur.me 公開ブログ。Hugo で生成された静的サイト

ステップ別の流れ

  1. 投稿 — Discord の #一般 チャンネル(またはスレッド)に「これ記事にして」と書く
  2. 受信&整形 — Hermes Agent が内容を受け取り、日付・タグを判断して markdown に整形
  3. ファイル作成/tmp/hugo-scrap-proto/scrap-blog/content/scraps/.md ファイルを生成(事前に git pull を実行)
  4. Git pushgit addgit commitgit push origin main
  5. 自動デプロイ — Cloudflare Pages が push を検知し、hugo ビルド → デプロイ(数分で完了)
  6. 公開https://blog.taktamur.me/ に記事が表示される

記事ファイルの中身

---
date: 2026-07-25
tags: ["タグ1", "タグ2"]
---

## 🤖 見出し(LLM生成記事は 🤖 マーカー付き)

本文はここに。Markdown形式で自由に書く。
  • タイトル(title)は不要 — frontmatter は datetags だけ
  • 最初の ## 🤖 見出し 行が HTML の <title> になる
  • タグは日本語可(preserveTaxonomyNames: true
  • 🤖 マーカーで LLM が書いた記事であることを明示

なぜ Hugo + Cloudflare Pages なのか

  • 静的サイト — データベース不要、高速、セキュリティリスクが少ない
  • Git 管理 — 記事はすべて markdown ファイル。Git で履歴管理、巻き戻しも簡単
  • 無料ホスティング — Cloudflare Pages は無料枠で十分
  • 自動デプロイ — push するだけ。CI/CD の設定不要

運用上の注意点

  • 記事を書く前に必ず git pull を実行(他端末からの push とのコンフリクト防止)
  • Cloudflare Pages の環境変数: HUGO_VERSION=0.164.0, TZ=Asia/Tokyo
  • hugo.yamlbuildFuture: true を設定(JST 深夜の記事が UTC で未来日扱いされるのを防止)
  • デプロイ状態の確認は wrangler pages deployment list --project-name=hugo-scrap-blog

🤖 wrangler OAuth認証がSSH越しで失敗した話

Cloudflare Pages のデプロイ状態を wrangler CLI で確認しようとして、認証ではまった。

現象

NixOS サーバー(ブラウザなし、SSH接続)で wrangler login を実行。

$ wrangler login
# → ブラウザが開かず、localhost にリダイレクトされてエラー

Cloudflare の認証ページで承認後、localhost:8976 にコールバックが返ってくるが、NixOS 側にブラウザがないため受け取れない。

原因

wrangler login は OAuth PKCE フローを使っている。認証コードを受け取るために localhost で一時的な HTTP サーバーを立て、ブラウザからのコールバックを待つ仕組み。

問題は、操作している端末(Mac)と wrangler が動いている端末(NixOS)が別 なこと。Mac のブラウザで認証すると、コールバック先 localhost は Mac 自身の localhost を指す。当然そこに wrangler の待受サーバーはない。

これは以前はまった Google OAuth Desktop App とまったく同じ構図。デスクトップアプリ用の OAuth フローが、リモートの CLI 環境では機能しない。

対策

SSH ポートフォワードを使う。

(1) Mac からポートフォワード付きで SSH 接続

ssh -L 8976:localhost:8976 nixos

これで Mac の localhost:8976 へのアクセスが NixOS の localhost:8976 に転送される。

(2) NixOS 側で wrangler 認証(URL 表示のみ)

wrangler login --no-browser

ブラウザがなくても URL がコンソールに表示される。

(3) Mac のブラウザにその URL を貼り付けて開く

Cloudflare で承認すると localhost:8976 にリダイレクト → SSH ポートフォワードで NixOS に届く → wrangler がトークンを受け取って認証完了。

一般化

このパターンは OAuth を使う CLI ツール全般で起こる。SSH 越しでブラウザがない環境では、以下のどちらかで対応できる:

方法 用途
SSH ポートフォワード ワンショットの認証。ssh -L <port>:localhost:<port> でコールバックを中継
API トークン 常時使うならトークン方式の方が楽。export CLOUDFLARE_API_TOKEN=... で認証

🤖 Hugo スクラップブログを本番化した

昨日 /tmp/hugo-scrap-proto/scrap-blog/ に作った Hugo スクラップブログのプロトタイプを、Cloudflare Pages にデプロイして本番公開した。

やったこと

  • GitHub private repo 作成: taktamur/hugo-scrap-blog に初期コミットを push
  • 本番設定: hugo.yaml の baseURL を blog.taktamur.me に、languageCodelocale に修正(Hugo v0.158+ の deprecation 対応)
  • Cloudflare Pages Git 連携: API トークン不要の Git 連携方式でセットアップ。push を検知して自動ビルド&デプロイ
  • カスタムドメイン: blog.taktamur.me を設定(DNS 自動設定)
  • 動作確認: トップページ、タグページ、RSS、サイトマップすべて 200 OK

わかったこと

  • cloudflare/pages-action は deprecated(2024年10月)。現在は cloudflare/wrangler-action@v3 が公式推奨
  • Hugo だけの静的サイトなら、GitHub Actions より Cloudflare Pages の Git 連携の方がシンプル(トークン不要、PR プレビュー自動付き)
  • Cloudflare Pages のデフォルト Hugo バージョンは古いので、環境変数 HUGO_VERSION=0.164.0 を明示設定する必要がある

今後の運用

リポジトリに Markdown 記事を追加して main に push するだけで公開される。タグ説明文は content/tags/◯◯/_index.md に書けばタグページに反映。


← All Tags