はじめに

VibeCodingを活用し、Web開発の知識がほとんどない状態から、できるだけコードに触れずにブログサイトを構築した過程をまとめました。
Web技術がほとんど分からない状態でも、AIツールを活用すれば簡単にブログサイトが作れるという内容です。 叩いたコマンドの記載はないので、実際に試す際はそれぞれの公式ドキュメントを参照してください。もしくは、お手持ちのAIに聞いてみてください。

利用したAIツール:

  • Gemini CLI（主に実装・自動化で活用）
  • GitHub Copilot（軽い質問や手動編集時の補完に使用）
  • ChatGPT（参考URLの調査などに活用）

成果物

先に完成したサイトを見てみましょう。
作成したブログサイト
GitHubリポジトリ
（説明の都合で、実際のサイトのコミット履歴とは異なる部分があります）

技術選定（人間）

静的サイトジェネレーターにはZolaを選び、ホスティングはGitHub Pagesを利用しました。
Markdownで書けるならJekyllやHugoでも良かったのですが、Rust製という理由でZolaを選びました（あ、私Rustが好きです）。ビルド速度も速いらしいですが、小規模サイトでは体感差はほぼありません。テーマの好みや使いやすさで選ぶのが一番だと思います。GitHub Pagesは、リポジトリを公開するだけで簡単にホスティングできる点が魅力でした。

HugoやJekyllでも同様のことができるので、気に入るテーマが見つかるものを選ぶのが良いと思います。

リポジトリ作成（人間）

ゼロから作るのは手間だったので、Zolaのテーマをクローンし、LiveDemoサイトを参考にたたき台を作成しました。

  1. Zolaのテーマを選定
  2. テーマをローカルにクローン
  3. LiveDemo用コンテンツを削除（Gemini CLIで自動化）
  4. サイト名などを自分用に変更
  5. テーマのGit履歴を削除し、git initで新規リポジトリ化
  6. GitHubで{Username}.github.ioリポジトリを作成
  7. リモートを追加し、ローカルからプッシュ

ここまででサイトのベースが完成します。

ローカル環境構築（Gemini CLI）

Gemini CLIの--yoloオプションで、RustやZolaのセットアップも自動化できました。コマンドはZola公式ドキュメントを参照すればOKです。

  • https://www.rust-lang.org/tools/install
  • https://www.getzola.org/documentation/getting-started/cli-usage/

これでローカルでビルド・プレビューできる環境が整いました。

GitHub Actionsで自動デプロイ（Gemini CLI）

GitHub Actionsの設定ファイルもGemini CLIの--yoloで、公式ドキュメントに沿って進めてもらいました。

  • https://www.getzola.org/documentation/deployment/github-pages/

ビルド自体は問題なく進みましたが、GitHub Pagesの公開ブランチ設定を間違えて（masterに設定していたが、自動デプロイ先のgh-pagesが正解だった）、1時間ほど悩みました。人間が何かするときは公式ドキュメントをよく読み、落ち着いて設定しましょう（でないとAIより頭が悪いのがばれます）。

  • https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site

これで最小構成のサイトが自動デプロイできるようになりました。

Tips：
長い細かい指示出しが面倒なときは、参考サイトを示して「このサイトのように作って」と指示すると、AIが必要なコードを生成してくれる確率が上がります。

コンテンツ管理用リポジトリ追加（Gemini CLI）

コンテンツとホスティングを分離したかったので、管理用リポジトリを新たに作成しました。
publicディレクトリの変更を検知し、GitHub Actionsでホスティング用リポジトリにMarkdownをコピー＆デプロイする仕組みもGemini CLIで自動生成できました。

サイト機能の追加（Gemini CLI + GitHub Copilot）

ここからは欲しい機能をAIに指示して追加していきました。

  • 目次の自動生成
  • 見出しへのアンカーリンク
  • コードブロックのコピペボタン
  • コードブロックのシンタックスハイライト

指示→コード生成→修正→テスト（今回は人力）を繰り返し、納得いくまで改善しました。Web開発未経験でも、普段見ているサイトの機能をどんどん追加できるのが楽しかったです。

Tips:
一般的な話ですが、機能実装は小さく小さく作っていくと確実です。大きな機能を一気に実装しようとすると、バグが出たときに原因を特定しづらくなります。小さな単位で実装し、テストを繰り返すことで、問題の切り分けが容易になります。
例えばコピペボタンを追加する場合、まずはボタンの表示だけ実装し、次にクリック時の動作を追加するなど、段階的に進めると良いと思います。

作成してみて分かったこと

  • AIの提案で学びが増える: CopilotやGeminiの提案を読むことで、知らなかったWeb技術への理解が(チョット)深まりました。
  • 今後の機能実装のハードルが下がる: VibeCodingで知識ゼロから機能追加できるので、今後もAIを活用してサイトを育てていこうと思えます。
  • 更新のハードルが下がる: Markdownで書いてプッシュするだけなので、思いついたときにすぐ記事を追加できます。

まとめ

VibeCodingとAIツールを活用すれば、Web開発初心者でも維持費ゼロのブログサイトを簡単に構築・運用できます。

  • AIツールの活用: Gemini CLIやGitHub Copilotで、面倒な設定や自動化、機能追加もスムーズ。
  • 静的サイトジェネレーターの選択: ZolaでMarkdownベースのシンプル運用と高速ビルド。
  • GitHub Actionsによる自動デプロイ: 手作業を減らし、更新のたびに自動公開。
  • コンテンツとホスティングの分離: 管理しやすく、拡張や運用も柔軟。
  • 機能追加もAIで効率化: 目次やアンカーリンク、コピペボタンなども短時間で実装。

今後もAIツールを活用しながら、必要な機能追加やデザイン調整を行い、自分だけのブログを育てていきたいと思います。

この記事が、これからVibeCodingやAIツールでWebサイトを作りたい方の参考になれば幸いです。