↓ メインコンテンツへスキップ

生成AIと作る個人ブログ

·4801 文字·10 分
著者
MZGen
AIやデジタルツールを試し、実際に使って分かったことや、うまくいかなかったことを記録しています。
生成AIと作る個人ブログ

Macで個人ブログを始めようとすると、記事を書く前にHugoの導入、GitHub認証、サイト設定、公開先の準備などが必要です。Cloudflareの管理画面やアクセス解析の設定も加わると、慣れていない人には作業の全体像が見えにくくなります。

私は、共有した作業フォルダーのファイル編集やターミナル実行、ブラウザー操作を支援するChatGPT Workを使い、Macの環境準備からCloudflare Workers、Google Analyticsの設定、サイトのデザイン調整まで進めました。この作業環境では、会話で相談するだけでなく、手順書や設定ファイルを確認し、ファイルを編集して、ターミナルやブラウザーで実際の結果を確かめられます。アカウントへのログインや認証は本人が行い、その後の設定作業をWorkと進めました。

この記事では、その作業を具体例で振り返ります。サイト構成を選んだ理由は別記事「個人ブログをHugoとCloudflareで運営する構成にした理由」にまとめたため、ここではChatGPT Workとの共同作業に焦点を当てます。

今回使った構成と費用
#

記事はMarkdownで書き、Hugoでサイトに変換します。Blowfishがページ表示を担当し、GitHubで記事と設定を管理します。GitHubのmainブランチへの更新をきっかけに、Cloudflare Workers Buildsがビルドとデプロイを行い、Workers Static Assetsがサイトを配信します。

今回の構成を無料枠内で使う場合、ブログ基盤に必要な継続費用は抑えられます。独自ドメインを使うため、通常の直接費用の中心はドメインの取得・更新料です。HugoとBlowfishはオープンソース、GitHub Freeでは個人用のプライベートリポジトリを使え、Cloudflare Workers Static Assetsは静的ファイルのリクエストと保存に追加料金がかかりません。

Cloudflare Workers Buildsには現行の無料枠として月3,000分のビルド時間、1回20分の上限があります。利用量や選ぶ機能によって有料プランが必要になる場合は、追加費用が発生します。料金・上限は変わるため、利用開始時にWorkers Buildsの料金と上限とWorkers Static Assetsの料金を確認してください。

ChatGPT Workの契約はブログの公開に必須ではありません。すでに契約しているAIを制作支援にも利用すれば、調査や設定、画像制作を自分で進めやすくなり、制作外注や有料テーマに頼らずに済む場面があります。AIの契約を新たに追加する場合は、その料金も別途考慮します。今回の考え方は「全部無料」ではなく、ドメインを基本費用として始め、必要になった時点で有料サービスを検討するものです。

Macの準備から公開設定までをWorkで進める
#

作業は一つの大きな依頼で済ませず、段階ごとに進めました。Workが共有されたファイルを読み、次の作業と確認箇所を整理し、私が選択や認証を行い、変更後の表示を確かめます。

1. Mac上にHugoプロジェクトを作る
#

最初にHomebrew、Git、Hugo Extended、Node.jsの状態を確認し、Hugoのバージョンを調べました。その後、ブログ用フォルダーを用意してHugoサイトを作成し、GitHub CLIの認証を確認しました。BlowfishをGit submoduleで取得する際、履歴全体の取得が途中で切れるエラーが起きました。GitHubの認証エラーとは分けて調べ、取得する履歴を最新コミットだけに絞る浅い取得(--depth 1)に切り替えて解決しました。

こうした作業では、AIが必要なコマンドと手順を示し、実行結果を読みながら次の手順を選べます。コマンドを一度に大量に実行するのではなく、バージョンやエラーを一つずつ確認してから進むため、どこで止まったかを把握しやすくなりました。

2. Cloudflareの管理画面を設定する
#

Cloudflareのブラウザー画面では、GitHubリポジトリとの接続、Workers Buildsのビルド・デプロイ設定、Hugoのバージョン指定、独自ドメインの接続などを進めました。画面上の項目を確認し、今回のHugoプロジェクトに合う値を整理して設定します。

ログイン画面が表示されない、画面が閉じてしまうといった場面では、Workにブラウザーの状態を確認してもらい、ログインページを開き直して作業を継続しました。アカウントへのログインや認証は本人が行いますが、ログイン後の画面確認や設定値の入力・確認はWorkに支援してもらえます。

3. Google Analyticsを整理して設定する
#

Google Analyticsは以前の設定が途中のまま残っていたため、それをそのまま使わず、現状を確認して設定をやり直しました。古いプロパティを整理してゴミ箱へ移し、新しいGA4プロパティとWebデータストリームを作成し、測定IDを確認しました。Hugo側では本番用設定に測定IDを置き、ローカルプレビューで計測しないように分けています。Cloudflare Web Analyticsも有効にし、公開後の参照状況を見られるようにしました。

このように、ブラウザーで扱うサービス設定も、何を作成したか、どの値をどこへ入れたかを作業ドキュメントに残せます。後日、設定を見直すときや別のブログを構築するときにも役立ちます。

要望を画面の変化に変えた例
#

構築後の調整では、希望する見た目を日常の言葉で伝え、Workが設定やテンプレートを調べて変更し、ローカルプレビューで確認しました。

目次をスクロール中も表示する
#

記事の目次は、当初アイキャッチ画像の横に表示されても、本文を下へスクロールすると見えなくなりました。そこで、次のように見た目と動きを伝えました。

「右に表示された目次を、本文やアイキャッチ画像とは無関係に、スクロール中もフロートで常に見えるようにしたい」

WorkはBlowfishの既存テンプレートと設定を調べ、標準設定だけでは希望する追従動作にならないと判断しました。layouts/_default/single.html で本文と目次を左右に分け、assets/css/custom.css で目次に position: sticky を設定しています。PCでは右側、狭い画面では縦並びになるようにし、表示を見て調整しました。

アイキャッチ画像の切れと幅を直す
#

記事ページの画像が上下で切れていないかを確認し、「画像全体を表示し、本文幅に合わせる」と依頼しました。CSSを調整して画像を切り抜かずに表示し、作成寸法を1200×675pxに統一しました。公開テスト記事の画像も作り直し、今後のサイト設定一覧と運営手順に寸法を追記しました。

日本語の文字数表示を修正する
#

トップページの記事カードに「116文字」と出た際、本文の量と合わないと気づきました。原因を調べると、Hugoで日本語向けカウントが有効になっていませんでした。設定ファイル(config/_default/hugo.toml)に hasCJKLanguage = true を追加してビルドし直すと、本文は3,753文字、読了時間は8分と表示されました。この変更も設定一覧と構築手順に記録しました。

記事や画像、運営資料を作る
#

Workには、テスト記事とタイトル入りアイキャッチ画像の作成、ブログ構成を説明する記事の下書き、サイトアイコンの作成なども依頼しました。画像はサイトで決めた寸法に合わせ、記事の下書きはdraft状態にして公開前に確認できるようにしています。

また、初期構築手順、日々の運営手順、複数ブログで使う設定一覧テンプレート、ai2log.com固有の設定一覧を継続して更新しました。質問や設定変更から得られた情報を、その場だけの会話で終わらせず、後から再利用できる記録に変えています。

ChatGPT WorkでGPT-6 Lunaを使う利点
#

今回のようにMacのコマンド作業、ブラウザー設定、記事や画像の編集、手順書の更新を何日も続ける作業では、前提や決定事項を保ちながら進められることが重要です。GPT-6 Lunaを使うと、この規模のブログ構築と運用準備を続けるのに十分な作業量を確保でき、調査から変更、確認までを同じ作業の流れで進めやすいと感じました。

同じ設定を何度も説明し直す手間が減り、決めた画像サイズや公開ルールを後続作業にも引き継げます。モデルを選ぶだけで正確さが決まるわけではありませんが、GPT-6 Lunaで作業を継続し、変更箇所・ビルド結果・ブラウザー表示を確認する進め方は、設定や記事の取り違えを抑える助けになりました。

Redditで見つけた近い事例
#

今回の経験だけでなく、RedditにもHugoと生成AIを組み合わせた利用者の報告があります。Hugoテーマを調整している利用者は、ChatGPTを使って変更方法を学び、試しながら実装した一方、回答に誤りがあり自分で見つけて直した経験も書いています。別の返信者はBlowfishのフッターやメニュー、色をAIと一つずつ調整したと述べています。Hugoを学びながらAIでテーマを調整した事例

2026年9月の投稿では、利用者がデザインを考え、AIにHugoのポートフォリオサイトを実装させた事例が共有されました。同じ投稿への返信には、既存テーマへAIで機能を足したものの、後からコードが複雑になったという経験もあります。AIを使ってHugoのポートフォリオを作った事例

また、Hugo利用者の相談スレッドには、ChatGPTにレイアウトや構文を聞き、GitHubへのpushをCloudflareの再ビルドにつなぐ運用例があります。Hugo・GitHub・Cloudflareの運用についての事例

Redditの投稿は個人の経験談で、機能の保証や成功率を示す調査ではありません。今回の作業と重なる点は、AIに作業を頼むだけでなく、希望を小さく具体化し、実際の表示を確認し、誤りや複雑さを人が見直していたことです。これは今回のブログ構築でも役立った進め方でした。

構築後はAIと手動を組み合わせて運営する
#

ChatGPT Workで構築しても、記事や画像、設定は自分のMacのHugoプロジェクトとGitHubに残ります。AIサービスの契約がなくても、VS CodeなどでMarkdownを書き、Hugoでプレビューし、GitHubへ変更を反映できます。GitHubの更新を受けたCloudflareがビルドと公開を行うので、日々の運用は「記事を書く・確認する・公開する」という自分で把握できる手順です。

AIは必要なときに、記事の構成、設定の調査、エラーの原因確認などを頼む補助役として使えます。すべてをAIに任せる方法と、すべてを一人で行う方法の二択ではなく、判断は自分で持ちながら、時間のかかる調査や変更をWorkに分担する形が実用的でした。

まとめ
#

個人ブログの初期構築では、Macの環境準備、GitHubとCloudflareの連携、Analytics設定、デザイン調整など、記事を書く以外にも多くの作業があります。ChatGPT Workでは、共有したプロジェクトや手順書を参照しながら、ターミナル作業、ブラウザー設定、画像制作、記事作成、動作確認を一続きで進められました。

このブログではGPT-6 Lunaを使い、長期にわたる作業を続けながら、設定とドキュメントをそろえてきました。無料枠を使うブログ基盤ではドメイン費用が主な直接費用となり、AIサービスの契約は任意です。構築後は自分で運営でき、AIは必要なときに追加できる支援手段として残ります。

参考資料
#