View on GitHub

gemini-github-pages

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

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

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

Geminiに依頼する

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

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

注: 上の user> は資料上の記法です。実際のGemini CLIには user> を付ける必要はありません。

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

user> このリポジトリは、GitHub Pagesで公開する自分のWebサイトです。index.htmlを新規作成し、シンプルな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に対する変更を提案できます。

⚠️許可を出す際の注意

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

HTMLファイルを確認する

作成したHTMLページの内容を確認してみましょう。 まずはじめに、新しいターミナルの画面を作成します。

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

codespace-bash

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

bash-new

ターミナルで以下のコマンドを入力してください。

python3 -m http.server 5500

HTTP

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

このPythonコマンドでは簡易なWebサーバーを立ち上げ、今いるフォルダーの中身をHTTPで配信しています。 停止するには、サーバーを起動しているターミナルで Ctrl + C を押してください。

【トラブルシュート】

Gemini CLIとターミナルの切り替え

Gemini CLIに自然言語で依頼をする場所と、ターミナルでコマンドを入力する場所は異なります。

npmやnodeと表示されることがあるタブがGemini CLI（対話用）で、bashと書かれているタブが通常のターミナル（コマンド実行用）です。 user>と先頭に書かれている文書/指示はGemini CLIに入力し、それ以外のコマンドはターミナル上で入力、実行します。

Gemini NPM Gemini CLIが開かれている状態

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

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

まず、gitコマンドを入力するために、先ほど作成したターミナルの画面で以下を入力します。

bash-new

  1. 変更内容を確認する

    git status
    • 追加・更新されたファイルが赤字で表示されていればOKです。

  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がアップロードされていれば成功です。

    • pushに失敗する場合は、リモートが設定されているか（git remote -v）と、ブランチがmainであるかを確認してください。

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

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を使ってみましょう。

まずは適当なファイルの変更をする

Codespacesの左側のファイルエクスプローラーを開き、先ほど作成されたHTMLファイルをクリックして開きます。

Change Title

おそらく、 <title></title>で囲われた部分があると思います。

その部分を手動で以下のように変更します。（「私のWebページ」の部分は他の内容でもよいです）

<title>私のWebページ</title>

これで変更は完了です。次に、Gemini CLIで変更をGitで管理しましょう。

1行でpushまでを丸投げ

次のように依頼をすると、今回のファイルの変更を、一連の流れでgit add, git commit, git 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 へデプロイ 目次へ → ホーム