AIを使って、自分のブログサイトを作ってみた

はじめに ― AIを学びながら、発信してみることにした

AIには興味がある。でも、何から始めればいいのか分からない。

ChatGPTを使ったことはあっても、「質問に答えてもらう」より先へ進むには、少し勇気がいりました。そこで、学んでから何かを作るのではなく、作りながら学び、その過程も発信することにしました。

このブログは、AIの専門家が正解を教える場所ではありません。AI初心者の自分が実際に手を動かし、分からなかったことや失敗したことも含めて共有する場所です。

今回のゴール ― AIと一緒にブログサイトを作る

最初の目標は、このブログサイトそのものをAIと一緒に作ることです。条件は次のように決めました。

インターネット上に公開する
記事を簡単に追加できるようにする
できるだけ低コストで運営する
スマートフォンでも読みやすくする
後から機能を追加しやすくする

サイトを作る作業自体が、最初の記事になります。

ブログの作り方を決める ― AIと一緒にゼロから自作してみる

WordPressなどの完成済みサービスは使わず、AIにコードを書いてもらいながら自作することにしました。

便利なサービスを避けたかったわけではありません。今回は「AIと一緒なら、初心者でもどこまで作れるのか」を確かめることが目的だったからです。

AIにブログの作り方を相談してみた

最初にCodexへ、使っているパソコンの環境確認をお願いしました。Codexは、会話だけでなく、許可した作業フォルダのファイル編集やコマンド実行もできるAIです。

確認と準備を進めたものは次のとおりです。

VS Code：コードや記事を編集するアプリ
Node.js：Astroなどの開発ツールをパソコン上で動かすための実行環境
npm：必要なプログラムをインストールする仕組み
Git：変更履歴を保存する仕組み
GitHub：コードと変更履歴をオンラインで管理するサービス

Node.jsとGitは入っていなかったため、公式サイトから無料でインストールしました。

AIにおすすめの技術構成を決めてもらった

候補を比較し、最終的に次の構成を選びました。

Astro：ブログのページを作る
Markdown：記事を書く
Git / GitHub：コードと変更履歴を管理する
Cloudflare Pages：完成したサイトを公開する
Codex：環境確認、コード作成、ファイル編集、動作確認を手伝う

Astro以外にもNext.jsなどの候補があります。今回は、ブログ向けで表示が軽く、最初はシンプルに使えて、後から拡張もできるというバランスでAstroを選びました。

データベースを使わず、Markdownで記事を管理する

このブログは、今のところデータベースを使っていません。記事は1記事につき1つのMarkdownファイルとして保存しています。

Markdownは、見出しに##、箇条書きに-を使うような、シンプルな文章形式です。特別な管理画面がなくても、VS Codeで文章を書いて保存できます。

この方法を選んだ理由は次のとおりです。

データベース料金がかからない
バックアップや変更履歴をGitHubで管理できる
サーバーや管理画面の保守が少ない
記事がまだ少ない段階では十分に扱いやすい

一方で、スマートフォンだけで記事を投稿したい場合や、複数人で編集する場合には不便です。その段階になったら、記事管理画面を持つCMSを追加する方法があります。

Astroプロジェクトを作り、基本デザインを整える

CodexがAstroプロジェクトを作成し、ブログに必要なページを実装しました。

トップページ
記事一覧
記事詳細ページ
カテゴリー別ページ
Aboutページ

デザインは、白を基調に黒い文字を使い、青紫色をアクセントにしました。少しだけテクノロジーらしさを出しながらも、記事が主役になるよう派手な装飾は控えています。

スマートフォンでもメニューや文章が読みやすくなるよう、画面幅に応じてレイアウトが変わる作りにしました。

制作中につまずいたこと

AIを使えば、すべてが一度で完成するわけではありませんでした。

Node.jsを入れたのに、すぐ認識されなかった

Node.jsをインストールした直後、すでに起動していたアプリには新しい設定が反映されていませんでした。アプリを開き直すことで認識されました。

PowerShellでnpmの実行が止められた

Windowsのセキュリティ設定により、npmのスクリプト実行が制限されました。設定を大きく変更せず、Windows用のnpm.cmdを使って進めました。

作業フォルダへの書き込み制限があった

最初に使おうとした場所にはAIがファイルを書き込めなかったため、許可されたブログ用フォルダへ保存先を変更しました。

GitHubとCloudflareの認証をやり直した

CloudflareからGitHubへ接続したとき、「アプリの内容が変わったため再確認が必要」という表示が出ました。ブログ用リポジトリだけをもう一度選び、認証すると成功しました。

エラーが起きたとき、Codexには原因と次に試すことを説明してもらいました。AIの便利さは、エラーをなくすことよりも、エラーの意味を理解しながら一つずつ解決できることにあると感じました。

GitHubでコードを管理する

完成したコードは、GitHubの公開リポジトリへ登録しました。

公開リポジトリではソースコードを誰でも見られます。その代わり、無料で使いやすく、制作物として共有しやすいメリットがあります。メールアドレス、パスワード、APIキーなどの個人情報や秘密情報はコードに入れないことが重要です。

今回は、GitHubとCloudflareの連携権限もブログ用リポジトリだけに限定しました。

Cloudflare Pagesでインターネットに公開する

GitHubのリポジトリをCloudflare Pagesへ接続し、次の設定で公開しました。

本番ブランチ：main
ビルドコマンド：npm run build
公開フォルダ：dist

「ビルド」は、AstroのコードとMarkdown記事を、ブラウザで表示できる完成済みファイルへ変換する処理です。Cloudflare PagesはGitHubの更新を検知すると、この処理を自動で行います。

最初のデプロイは無事成功し、次のURLで公開できました。

AIと、つくってみる。

現時点では、Node.js、Astro、GitHub、Cloudflare Pagesの利用に料金はかかっていません。独自ドメインは急いで購入せず、まずはCloudflareが用意した無料URLで運営することにしました。

実際にAIと作って感じたこと

今回、自分だけでは調べる順番に迷いそうな場面でも、「今何を確認しているのか」「なぜ必要なのか」を聞きながら進められました。

一方で、インストールやサービスへのログイン、外部サービスの認証など、自分で内容を確認して操作する場面もあります。AIにすべてを任せるのではなく、提案の理由を聞き、権限や公開範囲を自分で判断することが大切だと分かりました。

まだ完成ではありません。これから記事を追加し、必要になったときに検索やお問い合わせなどの機能も検討します。

まずは、AI初心者でもAIと相談しながら、ブログをゼロから公開するところまで進められました。この記録が「興味はあるけれど、何から始めればいいか分からない」という人の、小さなきっかけになればうれしいです。

次にやること

次は、普段の記事を迷わず追加できるように、記事作成の手順を整えます。そのうえで、実際にAIツールを使ってみた記録を増やしていく予定です。