View on GitHub

gemini-github-pages

Gemini-CLIとGitHub Pagesを使ったウェブサイト構築の講義資料

Gemini CLIでWebサイトを作成する

Gemini CLIのインストールが完了したら、実際にWebサイトを作っていきましょう。

Geminiに依頼する

Gemini CLIに対する入力と、ターミナル上で入力するコマンドを区別するため、今後、Gemini CLIに対する入力にはuser>を先頭に付けて記述します。

user> ここにGeminiへのメッセージ、プロンプトが入ります。

では、早速GeminiにHTMLファイルを作ってもらいましょう。

user> このリポジトリは、GitHub Pagesで公開する自分のWebサイトです。シンプルなHTMLを作成してください。

Gemini HTML

Gemini CLIがHTMLファイルを作成すると同時に、以下のような表示が出てくると思います。 これは、Gemini CLIがコマンドを実行する際に、実行するコマンドについてユーザーに許可を求めています。

Gemini Confirmation

Gemini CLIのコマンド実行時の確認と許可

Gemini CLIは、ファイルの作成・編集・削除など多くの操作を代わりに実行します。誤操作を防ぐため、実行前に「何をどう変えるか」を表示し、内容を確認してから許可を求めます。

1. Yes, allow once             # 今回の変更だけ実行する
2. Yes, allow always           # 同種の操作を、このセッション中は常に許可する
3. Modify with external editor # 外部エディターで自分で編集する
4. No, suggest changes (esc)   # 今回は実行せず、代案を提案する

通常は1の「Yes, allow once」を選ぶのが安全です。選択すると、表示された内容どおりにファイルが作成・更新されます。

Gemini Suggest

4. No, suggest changes (esc)を選択した時の様子。入力受付状態になり、Gemini CLIに対する変更を提案できます。

⚠️許可を出す際の注意

削除系コマンド(rmrm -rf など)は特に注意してください。これらに対しては、原則allow alwaysを選ばないことを強く推奨します。内容に不安がある場合は4. No, suggest changesを選び、何をするコマンドかを尋ねるか、別案を提案しましょう。迷ったときは都度allow onceを選ぶと安全です。

HTMLファイルを確認する

作成したHTMLページの内容を確認してみましょう。 ターミナルで以下のコマンドを入力してください。

python3 -m http.server 5500

HTTP

ブラウザーで開く をクリックすると、現状のHTMLファイルが確認できます。 もしくはターミナル上のhttp://0.0.0.0:5500/を、Macであれば⌘+クリック、WindowsであればCtrl+クリックで開くことができます。

このPythonコマンドでは簡易なWebサーバーを立ち上げ、今いるフォルダの中身をHTTPで配信しています。


HTMLファイルをコミットする

Gitでは「変更を記録する」作業をコミットと呼びます。ここでは、Gemini CLIが作成したindex.htmlをGitHubへアップロードするまでの流れを説明します。

まず、gitコマンドを入力するために新しいターミナルのウィンドウを作成しましょう。(Gemini CLIの入力欄の先頭に!を付けることでもコマンド実行は可能です)

ターミナルの右上の「+」を押します。

codespace-bash

bashと表示されて新しい画面になったことを確認します。ここで以下のgitコマンドを入力します。

bash-new

  1. 変更内容を確認する

    git status
    
    • 追加・更新されたファイルが赤字で表示されていればOKです。
    • まだリポジトリを作成していない場合はgit initで初期化しておきましょう。
  2. ステージに追加する

    git add index.html        # 1つだけ追加
    

    もしくは

    git add .                 # 現在のディレクトリ以下をまとめて追加
    

    git statusをもう一度実行すると、追加したファイルが緑色に変わります。これで「コミット候補」になりました。

  3. コミットを作成する

    git commit -m "Add initial index.html"
    
    • -mオプションで「何をしたか」を1行で書きます。
    • 後から見返すときに分かりやすいよう、内容を簡潔にまとめましょう。
  4. リモート(GitHub)へ反映(プッシュ)する

    git push -u origin main
    
    • -uを付けておくと、次回以降はgit pushだけで済みます。

    • GitHubでリポジトリを開き、index.htmlがアップロードされていれば成功です。

ここまでの流れのおさらい

git add .
git commit -m "Add initial site"
git push -u origin main

ポイント

  • add → commit → push の3段階を覚えれば、基本操作はほぼカバーできます。
  • こまめなコミットは「戻れるポイント」を増やせるので、失敗しても安心です。

Gemini CLIを使ってGit操作を行う

Gitは バージョン管理において必ず覚えておきたい操作 ですが、 毎回 git add . → git commit → git push して、毎回コミットメッセージを書くのも正直面倒です。 そこで、Git操作にもGemini CLIを使ってみましょう。


1行でpushまでを丸投げ

user> 変更を確認してpushしてください

Gemini-git-add

git statusという変更を確認するコマンドを実行しようとしています。1. Yes, allow onceを選択し続行します。

Gemini-commit-push

その後、Geminiの提案に従ってallowしていくと、簡単にpushまで完了できます。

ポイント Gemini CLIは*「ユーザーの意図 → 具体的なGitコマンド」*を橋渡ししてくれます。 コマンドの暗記やタイプミスに悩まされず、作業スピードも向上します(が、最低限add、commit、pushは覚えましょう)

これで Git の日常的な “ルーチン作業” はほぼ Gemini CLI にお任せできます。 浮いた時間と集中力を コンテンツの制作やデザインの改善 に充てましょう。


次へ → GitHub Pages へデプロイ 目次へ → ホーム