AI × Article Pipeline × Cloudflare Pages Implementation
実装ログ

ネタがあれば、
1記事5分で公開できる

日々のChatGPTとの対話から気づきを抽出し、記事テンプレートに流し込み、AIでHTML記事化し、GitHubへ反映し、Cloudflare Pagesで自動公開する流れを作った。記事ネタさえあれば、本文作成から公開までを数分で回せる、個人サイト向けの記事作成パイプラインである。

気づきログから記事作成、GitHub反映、Cloudflare Pages公開までの流れを示す図
Framework: 気づき抽出 → 記事テンプレート → AI記事化 → GitHub更新 → Cloudflare Pages公開

記事ネタは、日々の対話から生まれる

記事作成で一番重いのは、実は文章を書くことではない。何を書くか、どの切り口で書くか、どんな主張にするかを決める部分である。ここを毎回ゼロから考えると、記事公開は続かない。

Old Style

毎回ゼロから記事を書く場合

  • 何を書くかを毎回考える必要がある
  • 構成を作るだけで時間がかかる
  • 書き始めるまでの心理的ハードルが高い
  • 記事化できる気づきが会話の中で流れてしまう
Pipeline Style

気づきログを記事ネタにする場合

  • 日々の対話がそのまま記事の材料になる
  • 週1回、チャット単位で気づきを抽出できる
  • ネタが蓄積されるため、記事化の起点に困りにくい
  • 自分の思考や実装ログを資産として残せる

記事作成を速くするコツは、文章を書く速度を上げることではない。
日々の気づきを、記事化できる形で蓄積しておくこと
そこから公開までの導線を短くすればよい。

全体の流れは、5ステップで回る

今回作った仕組みは、気づきログ、記事テンプレート、AIによる記事生成、GitHub更新、Cloudflare Pages公開をつなげる流れである。人間がやることは、記事ネタを選び、最終的に公開内容を確認することに近い。

Step 01
週1回、チャット単位で気づきを抽出する 日々チャッピーと対話した内容から、週1回程度で気づきを抽出する。チャット単位で処理することで、文脈が失われにくく、記事化しやすいネタとして整理できる。
Step 02
記事ネタと記事テンプレートをチャッピーに渡す 抽出した気づきの中から記事化するネタを選び、記事用HTMLテンプレートと一緒にチャッピーへ渡す。これにより、毎回デザインや構成を考え直さず、一定品質の記事に変換できる。
Step 03
チャッピーが記事本文とHTMLを作成する チャッピーが、ネタをもとにタイトル、メタディスクリプション、OGP、JSON-LD、本文、見出し、画像alt、キャプションまで含めて記事HTMLに整える。記事は長くてもよく、重要なのは公開可能な完成形まで一気に作ることである。
Step 04
Claude CodeやCodexでGitHubへ反映する 作成したHTMLと画像を、Claude CodeやCodexに渡してサイトのGitHubリポジトリへ反映する。記事ファイルの追加、画像配置、必要に応じた一覧やリンク更新を行い、コミット&プッシュする。
Step 05
Cloudflare Pagesが自動で公開する GitHubにpushされると、Cloudflare Pagesが変更を検知し、自動でデプロイを実行する。これにより、GitHub更新後は個人サイト側にも記事が反映される。

5分で公開できる理由は、作業を分解して固定化しているから

「1記事5分」というのは、文章を人間が高速で書いているという意味ではない。記事作成に必要な工程を分解し、それぞれの役割をAIと自動公開基盤に渡しているため、ネタがある状態なら短時間で回せるという意味である。

Manual Publishing
  • 記事ネタを考える
  • 構成を考える
  • 本文を書く
  • HTMLへ整える
  • 画像を作る
  • ファイルを配置する
  • GitHubへ反映する
  • 公開確認をする
AI Pipeline
  • 気づきログから記事ネタを選ぶ
  • テンプレートに沿ってチャッピーが記事化する
  • 画像も記事内容に合わせて作る
  • Claude CodeやCodexがGitHubへ反映する
  • Cloudflare Pagesが自動で公開する
  • 人間は最終確認と判断に集中する

テンプレートがあるから、記事の品質が安定する

この仕組みで重要なのは、記事テンプレートを固定していることである。毎回ゼロからHTML構造を考えるのではなく、タイトル、メタディスクリプション、canonical、OGP、JSON-LD、hero、section、quote、final messageといった枠をあらかじめ用意しておく。

チャッピーには、記事ネタとテンプレートを渡すだけでよい。すると、ネタをもとに本文を展開しながら、SEOやSNS共有に必要な要素も含めて記事HTMLに変換できる。つまり、文章作成だけではなく、公開用ページとして必要な要素まで一気に整えられる。

5
If Topic Exists
1
Hero Image
自動公開
Cloudflare Pages

GitHubにpushすれば、公開まで自動で進む

個人サイトの記事公開で面倒なのは、記事を書いた後の反映作業である。ファイルを置き、画像を置き、リンクを確認し、公開環境に反映する。この部分はGitHubとCloudflare Pagesの連携でかなり短縮できる。

GitHub

記事ファイルの管理

  • 記事HTMLをリポジトリ内に追加する
  • 画像ファイルを記事ディレクトリへ配置する
  • 必要に応じて一覧や導線を更新する
  • 変更内容をcommitしてpushする
Cloudflare Pages

サイト公開の自動化

  • GitHubの更新を検知する
  • 自動でデプロイが走る
  • 個人サイトに最新記事が反映される
  • 公開後はブラウザで表示確認するだけになる

この仕組みは、ネタを作れる人なら応用できる

この仕組みは、特別な文章力がある人だけのものではない。むしろ重要なのは、日々の仕事や学習、試行錯誤の中から、記事化できるネタを作れることである。ネタさえあれば、構成化、記事化、HTML化、公開反映はAIと自動化基盤に任せられる。

Use 01
業務改善ログを記事にする 日々の業務改善、AI活用、Notion運用、GitHub Actions、EC運用などの気づきを記事化できる。
Use 02
実装ログを資産にする 作った仕組みや詰まったポイントを、単なる作業メモではなく、他の人にも読める実装記事として残せる。
Use 03
思考ログを発信に変える ChatGPTとの対話から出た判断軸や構造化メモを、記事テンプレートに流し込んで発信できる。
Use 04
個人サイトを継続更新する 記事公開までの摩擦が小さくなるため、個人サイトの更新頻度を高めやすい。更新そのものがポートフォリオや知識資産になる。

記事を書くのではなく、記事が生まれる流れを作る

今回の仕組みで重要なのは、「AIに記事を書かせる」ことだけではない。日々の会話、気づきの抽出、記事テンプレート、HTML化、GitHub反映、Cloudflare公開までを一本の流れにしている点である。

Input

記事の材料

  • ChatGPTとの対話ログ
  • 週次で抽出した気づき
  • 実装中に得た学び
  • 業務改善やAI活用の判断軸
Output

公開される成果物

  • HTML形式の記事ページ
  • 記事内容に合わせたトップ画像
  • SEOとSNS共有に必要なメタ情報
  • Cloudflare Pages上の公開記事

記事作成を速くするには、
記事を書く作業ではなく、記事が公開される流れを設計する。
ネタがあれば、公開までは一気に短縮できる。