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

この記事は、AIと一緒に自分のブログサイトを作りたい人向けの記事です。Windowsパソコンを使い、できるだけ費用をかけずにブログを始める方法を紹介します。

この記事をSTEP 1から順番に進めると、自分のブログサイトを作成して、インターネットへ公開できるようになります。

この記事を表示しているサイトが、今回AIと一緒に作ったブログサイトです（作った当時の名前は「AIと、つくってみる。」。いまは「ユキのAI教室」です）。

私は、ChatGPTを企画の相談に使い、Codexをブログサイトの作成に使いました。ソフトのインストールやアカウント認証など、本人の許可が必要な操作は私が行いました。

AIサービスの画面や設定名は更新される場合があります。記事と表示が違う場合は、画面に書かれた料金と権限を確認してから進めてください。

ブログを公開するまでの6ステップ

ブログサイトは、次の順番で作ります。

1. ブログを企画する
2. ブログで使う技術を決める
3. パソコンに開発環境を構築する
4. ブログサイトを作成する
5. ブログサイトのコードをGitHubへ保存する
6. ブログサイトをインターネットへ公開する

先に使う技術を決めてから、必要なソフトをパソコンへインストールします。

STEP 1｜ブログを企画する

最初に、誰に何を届けるブログなのかをChatGPTと整理します。ここでは、ブログサイトを作成する前に必要な企画書を作ります。

ChatGPTへ入力したプロンプト

［　］の部分は、自分の内容へ置き換えてください。

あなたはブログの企画を整理する編集者です。
これからAIを使って、自分のブログサイトを作ります。

私が現時点で考えている内容は次のとおりです。

ブログを始める目的：
・［例：AIについて学んだ内容を整理する］
・［例：実際にAIを使った結果を発信する］
・［例：将来の仕事や活動につなげる］

記事を届けたい人：
［例：AIの使い方や活用例を知りたい社会人］

発信したい内容：
［例：AIの基本、仕事での活用、AIツール、制作記録］

この回答を、あとでサイト制作AIへそのまま渡せる
「ブログ企画書」にまとめてください。

企画書には次の項目を入れてください。
1. ブログの目的
2. 記事を届けたい人
3. 読者が得られること
4. ブログのコンセプトを表す一文
5. カテゴリーと各カテゴリーの説明
6. 最初に作る記事の候補
7. 必要なページ
8. デザインで重視すること

情報が足りない場合は、企画書を書く前に質問してください。

ChatGPTから返ってきた回答

実際の回答は長かったため、中心部分を抜き出しています。

ブログの目的
AIについて学んだ内容と、実際に使った結果を整理して発信する。

記事を届けたい人
AIの基本や、仕事・生活・制作での活用方法を知りたい人。

ブログのコンセプト
AIを、知るだけで終わらせない。
実際に使い、できることを増やすブログ。

カテゴリー案
・はじめてのAI
・仕事で使う
・暮らし・趣味
・AIツール図鑑
・AIでつくってみた

最初の記事案
「AIを使って、自分のブログサイトを作ってみた」

必要なページ
トップ、記事一覧、記事詳細、カテゴリー、About

STEP 1の完了チェック

次の8項目が1つの企画書に書かれていれば、STEP 1は完了です。

• ブログの目的が1〜3文で書かれている
• 記事を届けたい人が具体的に書かれている
• 読者が記事から得られることが書かれている
• ブログのコンセプトを表す一文がある
• 3〜6個程度のカテゴリー名と説明がある
• 最初に書く記事が1つ以上決まっている
• 必要なページが一覧になっている
• 読みやすさや色など、デザイン条件が書かれている

STEP 2｜ブログで使う技術を決める

企画が決まったら、ブログサイトをどの技術で作り、どこへ保存し、どこで公開するかを決めます。

Codexへ入力したプロンプト

STEP 1で作ったブログ企画書を貼り付けた後、次のプロンプトを入力します。

上のブログ企画書に合う技術構成を提案してください。

希望する条件：
・できるだけ無料で運営したい
・記事を追加しやすくしたい
・スマートフォンで読みやすくしたい
・将来、検索やお問い合わせなどの機能を追加したい
・WordPressなどの完成済みブログサービスは使わない

次の4つを分けて提案してください。
1. 記事を書く方法
2. ブログのページを作る方法
3. コードと変更履歴を保存する方法
4. ブログをインターネットへ公開する方法

候補の費用、良い点、注意点を比較し、
今回どれを選ぶのがおすすめか説明してください。
まだソフトのインストールやファイル作成は行わないでください。

Codexから返ってきた回答

おすすめの構成

記事を書く：Markdown
見出しや箇条書きを簡単な記号で書けるため、記事作成に向いています。

ページを作る：Astro
Markdownの記事からWebページを生成でき、ブログとの相性が良いです。

コードを保存する：Git / GitHub
変更履歴を残し、コードをインターネット上へ保管できます。

ブログを公開する：Cloudflare Pages
GitHubと連携し、Astroで作ったサイトを無料枠で公開できます。

この構成なら、データベースを使わずに始められます。
記事数が増えたり、複数人で編集したりする場合は、あとからCMSを追加できます。

STEP 2の完了チェック

次の4項目について、使う技術の名前と役割が決まっていれば完了です。

決めること	今回選んだ技術	役割
記事を書く方法	Markdown	文章を記事ファイルとして保存する
ページを作る方法	Astro	記事ファイルからWebページを生成する
コードを保存する方法	Git / GitHub	変更履歴とコードを保存する
ブログを公開する方法	Cloudflare Pages	ブログサイトをインターネットへ公開する

料金が発生する条件も確認します。今回は、4つとも無料で始められる範囲を選びました。

STEP 3｜パソコンに開発環境を構築する

使う技術が決まったので、ブログサイトを作成するためのソフトをパソコンへ用意します。

この記事ではWindowsを使います。Macでも、Node.js、VS Code、Gitを用意してターミナルでコマンドを実行する流れはほぼ同じです。ただし、インストーラーの画面やターミナルの開き方は異なります。

この工程で使うもの

• VS Code：ブログのコードや記事を書くアプリ
• Node.js：パソコン上でAstroを動かすための土台
• npm：Astroなど、制作に必要なプログラムを追加・管理する仕組み
• Astro：ブログの記事ファイルからWebページを作るプログラム
• Git：ファイルの変更履歴をパソコン上へ記録する仕組み
• GitHub：Gitで記録したコードをインターネット上へ保存するサービス

私はVS Codeを以前からインストールしていました。Node.jsとGitは入っていなかったため、この工程で追加しました。

Codexへ入力したプロンプト

Windowsパソコンに、Astroブログを作るための開発環境を構築してください。

使用するもの：
・VS Code
・Node.js
・npm
・Git

まず、すでに利用できるものをコマンドで調べてください。
不足しているソフトがあれば、公式サイトから安全にインストールする方法を、
初心者向けに1つずつ案内してください。

私が操作する場合は、次の内容を必ず書いてください。
・どの画面を開くか
・どのボタンを押すか
・設定は初期値のままでよいか
・操作後にアプリを再起動する必要があるか

インストール後は、バージョン確認まで行ってください。

Codexから返ってきた回答

確認結果
・VS Code：インストール済み
・Node.js：利用できないため、インストールが必要
・npm：Node.jsと一緒にインストールされる
・Git：利用できないため、インストールが必要

次に行うこと
1. Node.js公式サイトからLTS版をダウンロードする
2. インストーラーを開き、基本設定は初期値のまま進める
3. Git公式サイトからWindows版をダウンロードする
4. インストーラーを開き、基本設定は初期値のまま進める
5. VS CodeとCodexを開き直す
6. node、npm、gitのバージョンを確認する

人が行った操作

Codexの指示に沿って、次の操作を行いました。

1. ブラウザでNode.js公式サイトを開き、LTS版をダウンロードする
2. ダウンロードしたインストーラーを開き、初期設定のままインストールする
3. ブラウザでGit公式サイトを開き、Windows版をダウンロードする
4. ダウンロードしたインストーラーを開き、初期設定のままインストールする
5. 起動していたVS CodeとCodexを閉じ、もう一度開く

ソフトのインストールはパソコン全体へ変更を加えるため、所有者本人の許可が必要です。

コマンドを入力する場所

Windowsでは、VS Codeのターミナルを使います。

1. VS Codeを開く
2. 画面上部の「ターミナル」をクリックする
3. 「新しいターミナル」をクリックする
4. 画面下部にPowerShellが表示されたことを確認する
5. 次のコマンドを1行ずつ入力し、Enterキーを押す

node -v
npm -v
git --version

Macでは、VS Codeの「ターミナル」→「新しいターミナル」か、macOSの「ターミナル」アプリを使用できます。

STEP 3の完了チェック

3つのコマンドを実行し、次のようにバージョン番号が表示されれば完了です。数字はインストール時期によって異なります。

node -v
→ v22.○.○ のように表示される

npm -v
→ 10.○.○ のように表示される

git --version
→ git version 2.○.○ のように表示される

「認識されません」「command not found」と表示された場合は、VS Codeを開き直してからもう一度実行します。

STEP 4｜ブログサイトを作成する

STEP 1の企画書とSTEP 2の技術構成をCodexへ渡し、ブログサイトを作成します。

Codexへ入力したプロンプト

STEP 1のブログ企画書に沿って、
AstroとMarkdownを使ったブログサイトを作成してください。

必要なページ：
・トップページ
・記事一覧ページ
・記事詳細ページ
・カテゴリー別ページ
・Aboutページ

デザイン条件：
・シンプルで読みやすい
・記事を主役にする
・初めて来た人にも使い方が分かる
・派手すぎない
・少しだけAIやテクノロジーらしさを出す
・スマートフォンにも対応する

記事はMarkdownファイルで追加できるようにしてください。

最初に、作成するページとファイル構成を説明してください。
その後、プロジェクトを作成し、必要なコードを書いてください。
実装後はnpm run buildを実行し、エラーがないことを確認してください。
最後に、新しい記事を追加する方法を説明してください。

Codexから返ってきた回答

作成する構成
・共通レイアウト
・ヘッダーとフッター
・トップページ
・記事一覧と記事詳細
・カテゴリー別ページ
・Aboutページ
・Markdownの記事フォルダ

実装結果
Astroプロジェクトを作成しました。
Markdown記事から記事一覧と記事詳細を自動生成できます。
画面幅に応じてレイアウトが変わるようにしました。
npm run buildを実行し、すべてのページを生成できました。

記事の追加方法
記事フォルダへ新しいMarkdownファイルを追加します。
タイトル、説明、公開日、カテゴリーを書き、本文を続けます。

人が確認したこと

私は、Codexが提案した文章、カテゴリー、色、ページ構成がブログの目的に合っているかを確認しました。修正したい箇所は、「誰に何を伝えたいか」と一緒にCodexへ伝えました。

STEP 4の完了チェック

VS Codeのターミナルで、ブログプロジェクトのフォルダを開いた状態で次を実行します。

npm run build
npm run dev

次の状態になれば完了です。

• npm run buildの最後にComplete!と表示される
• npm run devを実行するとhttp://localhost:4321/のようなURLが表示される
• URLをブラウザで開くとトップページが表示される
• 記事一覧から記事をクリックすると本文が表示される
• ブラウザの横幅を狭くしても、文章が画面外にはみ出さない

STEP 5｜ブログサイトのコードをGitHubへ保存する

完成したブログサイトのコードと変更履歴を、GitHubへ保存します。

Codexへ入力したプロンプト

このブログプロジェクトのコードをGitHubへ保存したいです。

次の作業を順番に進めてください。
・秘密情報や個人情報がコードに含まれていないか調べる
・不要なファイルを送らないための.gitignoreを確認する
・Gitで変更履歴を作成する
・GitHubへ送信する準備をする

GitHubへのログイン、リポジトリ作成、認証など、
私が操作する必要がある箇所は、画面とボタンを具体的に案内してください。
公開リポジトリに何が表示されるのかも説明してください。

Codexから返ってきた回答

確認結果
・パスワードやAPIキーは見つかりませんでした
・node_modulesは.gitignoreで送信対象外になっています
・ブログサイトのファイルを最初の変更履歴として保存しました

次にGitHubで行うこと
1. GitHubへログインする
2. New repositoryを押す
3. リポジトリ名を入力する
4. PublicまたはPrivateを選ぶ
5. Create repositoryを押す
6. 表示されたURLをGitの送信先として登録する
7. git push origin mainを実行する

人が行った操作

私はGitHubへログインし、ブログ用の公開リポジトリを作成しました。公開リポジトリではコードを誰でも閲覧できるため、個人情報や秘密情報が含まれていないことを確認しました。

認証画面が表示されたときは、Git Credential ManagerからGitHubへの接続を許可しました。Codexから送信できなかった場合は、VS Codeのターミナルで次を実行しました。

git push origin main

STEP 5の完了チェック

ブラウザで自分のGitHubリポジトリを開きます。次の状態になっていれば完了です。

• src、public、package.jsonなどのファイルが表示される
• Markdown記事のファイルが表示される
• ページ上部のブランチ名がmainになっている
• 最新の変更履歴に、自分が保存した内容が表示される
• node_modulesフォルダやパスワードが表示されていない

STEP 6｜ブログサイトをインターネットへ公開する

GitHubへ保存したコードをCloudflare Pagesへ接続し、誰でもアクセスできるブログサイトとして公開します。

Codexへ入力したプロンプト

GitHubへ保存したAstroブログを、Cloudflare Pagesで公開したいです。

次の内容を初心者向けに順番に案内してください。
・Cloudflareへログインした後に開く画面
・GitHubと安全に連携する方法
・許可するリポジトリの選び方
・本番ブランチ
・ビルドコマンド
・公開フォルダ
・公開後に確認すること

私が操作する箇所は、押すボタンと入力する値を書いてください。
有料機能を選ぶ前には必ず知らせてください。

Codexから返ってきた回答

Cloudflare Pagesで行う操作
1. Cloudflareへログインする
2. Workers & Pagesを開く
3. PagesのGitHub連携を選ぶ
4. GitHubの認証画面で、ブログ用リポジトリだけを許可する
5. ブログ用リポジトリを選択する

入力する値
・本番ブランチ：main
・ビルドコマンド：npm run build
・公開フォルダ：dist

設定後にSave and Deployを押します。
Successと表示されたら、発行されたURLを開いて確認します。

人が行った操作

私はCloudflareへログインし、ブログ用のGitHubリポジトリだけを連携対象にしました。Cloudflareへコードを読む権限を渡すため、アカウント所有者が対象と権限を確認する必要があります。

最初の認証では、GitHubアプリの内容を再確認するよう表示されました。私はブログ用リポジトリを選び直し、認証後にSave and Deployを押しました。

ビルドが成功し、このブログサイトを次のURLで公開できました。

https://ai-to-tsukutte-miru.pages.dev/

今回のゴールの達成結果

ゴール	結果	完了した状態
ブログサイトを作成する	達成	トップ、記事一覧、記事詳細などを表示できる
記事を追加できるようにする	達成	Markdownファイルから記事ページを生成できる
スマートフォンに対応する	達成	画面を狭くしても文章がはみ出さない
無料で運営を始める	達成	Astro、GitHub、Cloudflare Pagesの無料範囲を使用
インターネットへ公開する	達成	Cloudflare PagesのURLから誰でもアクセスできる

STEP 6の完了チェック

Cloudflare Pagesの画面と公開URLで、次を確認します。

• デプロイ結果にSuccessと表示される
• https://○○.pages.dev/という公開URLが発行される
• スマートフォンや別のブラウザから公開URLを開ける
• トップページ、記事一覧、記事詳細が表示される
• GitHubへ新しい変更を送ると、Cloudflare Pagesで新しいデプロイが始まる

以上を確認できれば、自分のブログサイトを作成し、インターネットへ公開するという今回のゴールは達成です。

次回からは、「はじめてのAI」や「仕事で使う」をテーマに、読者が同じ操作を試せる記事を追加します。独自ドメインは、ブログ名と運営方針が固まった段階で改めて検討します。

制作中の失敗と、人が操作する必要があった理由は、AIとブログを作って分かった、人がやるべきことにまとめています。

そもそもなぜAIを学びながら発信することにしたのかは、AIを学びながら、発信してみることにしたに書いています。