2026年の個人サイト運用まとめ：AIとAstroとCloudflareで回す
2020年で更新が止まっていたGatsby製のこのサイトを、2026年にAstro＋Cloudflare Pagesでリニューアルしました。人とAIの分担体制、確定した技術構成、記事の品質チェックと作り直しの判断、来年以降に残した課題まで、1年の運用を総括します。
続きを読むPASTORA — Portfolio & Blog
ローカルで動くAIとクラウド型AIの違い・選び方
自分のPCでモデルを動かすローカルAIと、ChatGPTのようなクラウド型AIを、性能・速度・プライバシー・コスト・保守の軸で比較しました。普段はクラウド主軸の筆者が、ローカルを「どの作業に割り当てるか」を判断するための検討メモです。
続きを読むホスティング移行後の確認リスト：当日・数日・数週間で見るもの
NetlifyからCloudflare Pagesへの切り替え直後から数週間にかけて確認する項目を、時点ごとに整理しました。表示とステータスコード、リダイレクトの301/302、証明書、Search Consoleと解析の受信、404の収束、旧ホスティングの解約タイミングまで。
続きを読むAstroの404ページとリダイレクト設計：旧URLの受け止め方
Astroサイトのリニューアルで旧URLをどう受け止めるか。404ページの作り方と導線、astro.config の redirects と Cloudflare Pages の _redirects の使い分け、301と302の判断、旧URLの棚卸しと事故パターンまでを整理しました。
続きを読むAIツールの乗り換えコストを下げる：データを持ち運べる形に
AIツールの乗り換えで困るのは性能差ではなく、会話履歴やカスタム指示などツール内に残した資産です。ロックインが効く場所と、決定事項や指示の型を自分のファイルに持つ「持ち運べる形」の作り方、点検リストを整理します。
続きを読むCloudflare D1とKVの使い分け：静的サイトに小さい動的機能を足すとき
Cloudflare Pagesの静的ブログに「状態を持つ機能」を足したくなったときの、D1とWorkers KVの使い分けメモ。キー・バリューで結果整合性のKVと、SQLiteベースでSQLが使えるD1の性格の違いを比べ、閲覧カウンタ・いいね・問い合わせ保存・設定値の保持といった用途の振り分けと、そもそもビルド時生成で済むものの線引き、無料枠の考え方を整理しました。
続きを読むAstroのビルドを速く保つための見直しポイント：遅くなる前に見る場所を決める
Astro 5製のこのサイトのビルド（astro build＋Pagefind）を速く保つため、遅くなる前に見る場所を決めておくメモ。まず2段に分けて計る手順、画像最適化・ページ生成・インデックス・依存といった伸びやすい要因、効く対策とやらない方がいい対策を整理します。
続きを読むAIにテストを書かせるときの注意点：緑でも正しいとは限らない
AIにテストコードを書かせると速い反面、仕様ではなく現状をなぞるテスト、モックで固めたテスト、期待値自体の間違いといった問題が入りやすい。起きやすいパターンと見抜き方、頼み方の工夫、レビュー観点を整理しました。
続きを読むCloudflare Pages／Workersの環境変数と秘密情報の扱い：平文とSecretの使い分け
Cloudflare PagesとWorkersで、平文の環境変数とSecret（暗号化された値）をどう使い分けるかの検討メモ。Production／Previewの分離、ローカル開発の.dev.varsと.gitignore、AstroのPUBLIC_変数の注意点、漏れたときの初動まで整理しました。
続きを読むMarkdown記事のコードブロック運用メモ（Astro＋Shiki前提）
Astro標準のShikiでMarkdown記事のコードブロックを読みやすく保つための運用メモ。言語指定の徹底、長いコードの抜粋ルール、ファイル名表示と行ハイライトの方法、コピーボタンの考え方、ダークモードの2テーマ出力、モバイルでのはみ出し対策までを整理します。
続きを読む小さい自動化をAIに作らせるときの現実：量産と保守
通知の集約や定型チェックなど、小さい自動化をAIに作らせるコストは劇的に下がりました。一方で、仕様変更で壊れる・失敗に気づけない・中身を誰も覚えていない、といった「動かし続けるコスト」は残ります。向く自動化と向かない自動化の線引き、壊れたときに気づく仕組み、棚卸しの習慣、作る前に決めておくことを整理しました。
続きを読むCloudflare Turnstileでフォームのスパム対策
静的サイトに問い合わせフォームを足すときのスパム対策として、Cloudflare Turnstileを検討したメモ。従来型CAPTCHAとの違い、サイトキーとシークレットキーによる2段構えの仕組み、静的サイトでの検証側の置き場、ウィジェットモードとテストキーの使い方を、公式ドキュメントで確認しながら整理しました。
続きを読むAstroサイトのE2EはPlaywrightの最小構成から
個人のAstroブログにPlaywrightのE2Eを入れる最小構成をまとめます。webServerでpreviewを自動起動する設定、最初に書くテスト3本の選び方、スクリーンショット回帰の始め方と割り切り、CIに載せる前のローカル運用までを扱います。
続きを読むAIとの会話履歴を資産にする：メモリと引き継ぎ文書
AIとの作業を長く続けるほど、チャット履歴は資産にも負債にもなります。決まったこと・前提・禁止事項をメモリや引き継ぎ文書に残し、次のセッションや別のAIがそのまま続きから入れるようにする運用を、残す情報の種類と引き継ぎテンプレート付きで整理しました。
続きを読むCloudflare Web AnalyticsとGA4の違い：個人ブログでの選び方
Cloudflare Web AnalyticsとGA4（Googleアナリティクス4）の違いを、計測方式・Cookie・取れる指標・データの欠け方の観点で比較。個人ブログでどちらを選ぶか、両方入れる場合の注意点まで整理します。
続きを読むAstroサイトのダークモード実装メモ：data属性＋CSS変数で切り替える
Astro＋Tailwind CSS 4のサイトで、data属性とCSS変数の差し替えによるダークモードを実装する手順をまとめました。メディア戦略との比較、head内のインラインスクリプトによるチラつき（FOUC）対策、localStorageの扱い、@custom-variant darkの記法、画像とコードブロックの対応まで。
続きを読む生成コードのレビュー観点：差分を読むときのチェック
AIエージェントにコード編集を任せるとき、コミット前に差分をどう読んでいるかを整理しました。変更ファイルの全体像から掴む読み方、スコープ外の変更や重複実装といった観点別のチェック、危ないサインの見つけ方、レビューで差し戻すときの指示の書き方までをまとめます。
続きを読むCloudflareのキャッシュと静的サイト：何が速くなるのか
Cloudflare Pagesで配信する静的ブログを前提に、エッジキャッシュで速くなる部分とそうでない部分を整理しました。HTMLと静的アセットの扱いの違い、デプロイとハッシュ付きファイル名で更新が伝わる仕組み、Cache Rulesやパージが必要な場面・不要な場面、計測するときの注意までまとめます。
続きを読むAstro＋Tailwind CSS 4の組み立て方（Viteプラグイン前提）
Astro 5にTailwind CSS 4を@tailwindcss/viteで組み込む手順を整理しました。v3との違い（tailwind.config.jsからCSSの@themeへ）、デザイントークンをCSS変数に寄せる設計、ダークモードの下準備まで含めた実践メモです。
続きを読むAIの回答を一次情報で検証する手順
AIの回答をそのまま信じず、公式ドキュメントなどの一次情報で裏取りする自分なりの手順をまとめました。主張の分解から、別モデルとの突き合わせ（disagreement check）、検証しないと決める線引きまで、実際の運用の落としどころを書いています。
続きを読むCloudflare R2の使いどころ：画像とファイルの置き場
Astro＋Cloudflare Pagesの個人ブログで、画像や配布ファイルをどこに置くか。リポジトリ＋astro:assetsとCloudflare R2の役割分担、エグレス無料という料金設計の意味、公開方法の3択（カスタムドメイン／r2.dev／署名付きURL）を整理しました。
続きを読むAstroでRSSとサイトマップを正しく出す
Astro 5で公式連携（@astrojs/rss・@astrojs/sitemap）を使い、RSSフィードとサイトマップを出す手順を整理します。下書き除外と日付順の並び替え、site設定の前提、サイトマップのfilterによる除外、フィードの全文配信と要約配信の判断、移行時にフィードURLを変えない注意までまとめました。
続きを読むAIへの指示の型：目的・制約・出力形式を固定で渡す
AIに仕事を渡すとき、自分は「目的」「前提と制約」「出力形式」の3点セットを固定の型で渡すようにしています。各要素を欠くと何が起きるか、悪い指示を直した対比例と、コピペで使えるテンプレートをまとめました。
続きを読むCloudflare WorkersとPagesの使い分け：静的で済むか、リクエスト時に処理が要るか
Cloudflare PagesとWorkersは対立する選択肢ではなく、Pages Functions自体がWorkersランタイムで動きます。このサイト（静的ブログ）を例に、静的配信で済む範囲、Functionsで足りる範囲、単体のWorkersまで行く範囲を、判断フローと比較表で整理しました。
続きを読むAstroの画像最適化を標準の astro:assets に寄せる
Astro 5 の標準機能 astro:assets で画像を最適化する実践メモです。Image と Picture の使い分け、src と public の置き場の違い、widths の指定、リモート画像の許可設定、幅・高さの自動推定による CLS 対策までをまとめました。
続きを読むAIに任せる作業・任せない作業の線引き
AIには広く任せる方針でも、取り消せない操作だけは候補を出させて止め、自分のOKが出てから実行させています。任せてよい作業・確認してから進める作業・任せない作業の3分類と、線引きに使う3つの軸、迷ったときのデフォルトを整理しました。
続きを読むPagefindで静的サイトに検索を足す手順と注意点
Astro製の静的サイトにPagefindで全文検索を入れる手順をまとめました。ビルドへの組み込み方、`data-pagefind-body`などインデックス範囲の指定、検索ページ自体を除外する注意点、日本語検索の挙動まで、公式ドキュメントで確認した範囲で整理します。
続きを読む独自ドメインとDNSをCloudflareで管理する基本
ホスティング移行にあわせてDNS管理をCloudflareへ寄せる前に整理した基本メモ。A／AAAA／CNAME／MX／TXTレコードの役割、ゾーン追加からネームサーバ変更までの手順、プロキシ（オレンジ雲）とTTLの考え方、メール系レコードを消すと起きることをまとめます。
続きを読むMCP入門：AIに外部ツールを触らせる仕組みの基本
MCP（Model Context Protocol）の入門メモ。ホスト／クライアント／サーバの3つの役割、Tools・Resources・Promptsの違い、JSON-RPCベースの通信とstdio／Streamable HTTPの2つの運び方、権限の考え方を、公式ドキュメントに沿って整理しました。
続きを読むAstroのアイランドアーキテクチャ入門：なぜ配信JSが減るのか
Astroのアイランドアーキテクチャを、client:load / idle / visible / media / only の使い分けから解説します。デフォルトでJavaScriptを送らない仕組みと、このブログの構成を例にした判断の手順、付けすぎで失敗するパターンを整理しました。
続きを読むCloudflare Pagesのプレビューデプロイ運用メモ
Cloudflare Pagesのプレビューデプロイを個人ブログの確認フローに組み込むための運用メモ。ブランチ／PRごとのプレビューURLの仕組み、環境変数の分離、解析タグの混入や検索インデックスへの注意、確認チェックの型を整理しました。
続きを読むAIに書かせた記事の品質チェック：出典・捏造・定型文を見抜く
AIに下書きさせた記事が数十本溜まってから気づいた、中身の薄さの兆候と見抜き方をまとめました。出典の実在確認、体験談の真偽、定型句の繰り返し、サイズや構造の均一さなど、自分の下書きにそのまま使えるチェックリストです。
続きを読むContent Collectionsの型でfrontmatterの事故を防ぐ
AstroのContent Collectionsで、ブログ記事のfrontmatterをZodスキーマで検証する実践メモ。slugの空欄、日付の形式ブレ、タグの表記ゆれといった事故パターンと、その防ぎ方、必須・デフォルト値・optionalの使い分け、astro checkの位置づけをまとめます。
続きを読むNetlifyからCloudflare Pagesへ移すときのチェックリスト
Gatsby時代からNetlifyで公開してきたこのサイトを、AstroへのリニューアルにあわせてCloudflare Pagesへ移す前に洗い出したチェックリスト。ビルド設定、環境変数、ドメインとDNS、リダイレクト、フォームやCMSの代替、解析タグ、移行直後の確認項目までを整理しました。
続きを読むAIコーディングエージェントの使い分けメモ：ChatGPT・Codex・Claude Code・Gemini
調査と要件整理はChatGPT、ローカルのコード編集はCodex中心、文章の推敲と別視点チェックには他のAI、大量ドキュメントの要約にはGemini。普段の開発でAIをどう使い分けているか、得意な頼み方と事故る頼み方を含めて整理しました。
続きを読むGatsbyからAstroへ移行した理由：判断軸の整理
2019年にGatsby 2系で作り、2020年で更新が止まったこのブログをAstro 5へ移した理由を整理します。JSの量、依存の保守、Markdown記事の運搬という3つの判断軸と、画像・GraphQL・URL維持など移行で実際に困る点をまとめました。
続きを読むDevChallengesにチャレンジしてみた
DevChallengesにチャレンジしてみました。
続きを読むJavascriptの等価性について
Javascriptの比較について調べたら、奥が深かった。
続きを読むPsySHって便利だね
MacにHomebrewでPHPとPsyshを入れてみた。
続きを読むnpmライブラリのアップデート
フロントエンド開発でnpmライブラリのアップデート方法をいつも忘れるので、必要なnpmライブラリや手順を書いて備忘録にしておきます。
続きを読む外部リンクにtarget=_blankを設定する
自分の書いたブログの文章を見直していると、外部リンクが別タブで表示しないことに気づいて、Markdownだとtarget=_blankってどう書くのか調べたけど、Markdownで別タブで開く書き方はないことに気付きました。そこでHTMLを生成するGatsbyJS側でビルド時にtarget=_blankするように修正したので、設定をメモ。
続きを読むReactチュートリアルをやってみた
GatsbyJSを使ってブログを構築したはいいけど、ReactとかJSXとかよくわかっていないので、スタートガイドを読んで実際にチュートリアルをやってみようかなということで、ローカルに環境を作ってやってみました。
続きを読むOGPの設定を追加しました。
OGPの設定を追加したので、設定したmetaタグを残しておこうかと思います。OGPに設定するプロパティはたくさんあって色んなサイトで解説しているので、情報には困らないかと思いますが、公式のドキュメントを教えてくれるところは意外に少ない気がしました。
続きを読むGatsbyJSでポートフォリオができるまで
静的サイトジェネレーターをふとネットで見かけて、GatsbyJSのドキュメントを試したら簡単に形ができるのに感動して、持て余してるGitHub Pagesでホスティングしたサイトを作ろうと思ったのがこのポートフォリオブログサイトを立ち上げたキッカケです
続きを読むFirst Blog
ポートフォリオサイト作りました。
続きを読む