自動化ラボ
開発日記

このサイトはWordPressを使っていません。Cloudflareで"更新のいらないサイト"を作った話

自動化ラボのサイトは、実はWordPressを一切使わずに公開しています。Astro・GitHub・Cloudflareという組み合わせで何をしたのか、WordPressなどのCMSと何が違うのか、非エンジニアにも分かるように解説します。

今読んでいただいているこの「自動化ラボ」のサイト、実はWordPressを一切使っていません。サーバーの契約も、管理画面へのログインもなし。それでも jidokalab.com という独自ドメインで、こうして記事をお届けできています。今回は「裏側で何をやったのか」「よくあるWordPressでのサイト作りと何が違うのか」を、非エンジニアの目線でまとめます。

今回使った3つの道具

登場するサービスは3つだけです。

  • Astro(アストロ) …… サイトの見た目とページを作る道具。記事1本1本を、Wordのようなシンプルな文章ファイル(Markdown)として書くと、自動できれいなWebページに変換してくれます
  • GitHub(ギットハブ) …… サイトの「設計図一式」を保管する倉庫。変更履歴がすべて残るので、「いつ・何を・どう変えたか」を後から確認したり、間違えたときに元に戻したりできます
  • Cloudflare(クラウドフレア) …… GitHubに置いた設計図をもとに、実際にサイトを組み立てて世界中に配信してくれるサービス。今回はここでドメイン(jidokalab.com)も購入しました

Astroがサイトの見た目とページを作り、GitHubが設計図一式を保管し、Cloudflareがそれをもとにサイトを組み立てて世界中に配信する、という3つの役割分担を示した図解

3つのサービスの役割分担。Astroが「作る」、GitHubが「保管する」、Cloudflareが「配信する」を担当します。

用語メモ:「静的サイト」とは? WordPressのように「アクセスされるたびにページをその場で組み立てる」方式ではなく、あらかじめ完成した状態のページを作っておいて、そのまま配る方式のことです。今回のサイトはこの「静的サイト」という作り方をしています。その場で計算する作業がない分、表示が速く、壊れにくいのが特徴です。

WordPressでのサイト作りと何が違うか

多くの方がイメージする「サイトを作る」は、レンタルサーバーを借りてWordPressを入れる方法だと思います。今回の方法との違いを表にまとめました。

WordPressなどのCMS今回の方法(Astro+GitHub+Cloudflare)
サーバーレンタルサーバーを契約し、常時稼働させる必要がある専用サーバーを借りる必要なし。Cloudflareが配信を担当
データの置き場所データベース(MySQLなど)に記事を保存記事はただの文章ファイル。データベースなし
記事の更新方法ブラウザの管理画面にログインして直接編集文章ファイルを直し、GitHubに送ると自動で公開される
セキュリティ常にプラグイン・本体の更新が必要(放置すると乗っ取りの被害も)ログイン画面や書き換え可能な場所がほぼなく、乗っ取られる「入り口」自体が少ない
表示速度アクセスのたびにサーバー側で組み立てるため、混雑すると遅くなることも完成済みのページを世界中の拠点から配るため、基本的にどこからでも高速
月々の費用目安レンタルサーバー代で1,000〜3,000円ほどCloudflareの無料枠の範囲で収まり、実質ドメイン代(年2,000円弱)のみ

実際にやった作業の流れ

今回、私(人間)とClaude Code(AIアシスタント)で分担した作業はこの4段階でした。

  1. サイトの土台を作る …… ページのデザインや記事の仕組みをAstroで構築(ここはClaude Codeが担当)
  2. GitHubに保管する …… 作った設計図一式をGitHubの倉庫(リポジトリ)に送信
  3. Cloudflareと連携する …… GitHubの倉庫とCloudflareを接続し、「倉庫が更新されたら自動で公開し直す」設定を作成
  4. 独自ドメインを接続する …… Cloudflareで購入した jidokalab.com を、公開されたサイトに接続

セットアップの4ステップ。サイトの土台作りとGitHubへの保管はAIが担当し、Cloudflareとの連携とドメイン接続も人の作業は数クリックだけ、という分担を示した図解

セットアップ全体の流れ。前半2つはAIが全部やり、後半2つも人の作業は数クリックです。

人間側の作業は、GitHubへのログイン許可やCloudflareの購入画面でのカード情報入力など、要所要所の「1クリック・1入力」だけ。技術的な設定はほぼAIアシスタントが行いました。ちなみに今あなたが読んでいるこの記事自体も、同じ流れ(文章ファイルを追加してGitHubに送る)で公開されています。

この方法のメリット

  • セキュリティの心配がほぼない。 ログイン画面や書き換え可能な入り口が少ないため、WordPressで頻発する「乗っ取り」「改ざん」のリスクが構造的に小さい
  • 表示が速い。 完成済みのページを配るだけなので、アクセスが集中しても遅くなりにくい
  • ほぼ無料で運用できる。 サーバー代がかからず、実質の固定費はドメイン代のみ(年2,000円弱)
  • 変更履歴がすべて残る。 GitHubのおかげで「いつ・何を変えたか」が記録され、失敗しても前の状態に戻せる
  • AIに「更新して」と頼むだけで済む。 管理画面の操作を覚えなくても、Claude Codeに文章を渡せば記事の追加・修正ができる

一方で、向いていない場面もある

正直なところ、デメリットもあります。

  • WordPressのように「管理画面でボタンをポチポチ押すだけ」の更新はできず、文章ファイルを編集する形になる
  • プラグインを入れるだけで会員機能・予約機能・EC機能などを足す、というやり方はできない。作り込みには別途開発が必要
  • 最初のセットアップ(今回の一連の作業)を非エンジニアが1人で行うのは難しい。今回もAIアシスタントとの二人三脚が前提だった

つまり「更新頻度は高いが、機能はシンプルでいい」ブログやオウンドメディアには今回の方法が向いていて、「会員登録やショッピングカートなど複雑な機能が要る」サイトにはWordPressのようなCMSの方が向いている、という住み分けです。

AIの発達で、この方法のハードルは一気に下がった

実はこの「Astro+GitHub+Cloudflare」という構成自体は、エンジニアの間では何年も前から定番でした。それでも非エンジニアに広がらなかったのは、セットアップに専門知識が必要だったからです。

その前提が、Claude CodeのようなAIアシスタントの登場で変わりました。今回私がやったように、チャットで会話しながら、要所の「1クリック・1入力」だけ自分でやれば、残りの技術的な作業はぜんぶAIに任せられるようになったからです。実際に私が行った流れを、指示の例と一緒に紹介します。

セットアップ編(最初の1回だけ)

① サイトの土台を作ってもらう

Claude Codeに対して「非エンジニア向けのブログサイトを作りたい。白基調のシンプルなデザインで、カテゴリとタグで記事を整理できるようにして」のように指示します。デザインの好みや必要なページ(プロフィール、問い合わせなど)を会話で伝えると、AIがAstroでサイト一式を組み上げてくれます。

② GitHubに保管してもらう

「このサイトをGitHubにアップして」と指示します。途中でGitHubへのログイン許可を求められるので、表示されたコードをブラウザで入力するだけ。倉庫(リポジトリ)の作成もアップロードもAIがやってくれます。

③ Cloudflareと連携する

「Cloudflare Pagesで公開したい。手順を教えて」と指示すると、AIが画面ごとに「次はこのボタンを押してください」と案内してくれます。私の場合、自分でやったのはGitHubとの連携許可ボタンなど数クリックだけで、ビルド設定(npm run builddist といった呪文のような設定値)はすべてAIが判断してくれました。

④ ドメインをつなぐ

「jidokalab.com を買ってサイトにつなぎたい」と伝えると、空きドメインの検索から購入画面への誘導、購入後の接続設定までAIが案内・実行します。自分で入力したのは、カード情報などの決済まわりだけです。

記事作成・更新編(ふだんの運用)

セットアップが済めば、ふだんの運用はもっと簡単です。

記事を書いて公開する

Claude Codeに対して「◯◯というテーマで記事を書いて公開して」と指示します。AIが記事を書き、私がチャット上で内容を確認して、OKなら公開。裏側では「文章ファイルの作成 → GitHubへ送信 → Cloudflareが自動で再公開」が走っていますが、私がやるのは内容チェックだけです。

記事公開の流れ。日本語で指示するとAIが執筆し、人が内容を確認したら自動で公開される、という4ステップを示した図解

ふだんの記事公開の流れ。人がやるのは「指示」と「確認」の2つだけです。

公開済みの記事を直す

「昨日の記事の料金表を最新に直して」のように指示すれば、該当箇所の修正から反映までAIが済ませてくれます。ちなみに、いま読んでいるこの記事も途中の図解画像も、この方法で公開したものです。

管理画面の使い方を覚える代わりに、「やりたいこと」を日本語で伝える。それがこの構成の新しい運用スタイルです。

おわりに

「仕事の8割をAIで自動化する」という自動化ラボのテーマは、サイトそのものの構築・運用にも当てはまるとあらためて感じました。技術的な部分をAIアシスタントに任せられれば、非エンジニアでも「更新の手間とセキュリティの心配が少ないサイト」を持てる時代になっています。「自分もサイトを持ってみたい」という方は、まずAIアシスタントに「ブログサイトを作りたい」と話しかけるところから始めてみてください。