View on GitHub

gemini-github-pages

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

自分のPCでGemini CLIを使う

Gitの準備とローカル操作（Mac/Windows）

まずはPC上でGitを使えるようにして、GitHubに自分のファイルをアップロードできるようにします。

1. ターミナルを開く

Macの場合
  • 標準の 「ターミナル」 アプリを使います Terminal
  1. Finderで「アプリケーション → ユーティリティ → ターミナル」を開く または Spotlight検索（⌘+Space） で「ターミナル」と入力して起動します
  2. 黒い（または白い）ウィンドウが開きます
  3. ここで以降のコマンドを入力します
Windowsの場合
  • おすすめ：Gitをインストールすると一緒に入る Git Bash を使うと便利です （黒い画面にLinux風のコマンドが使える）
  1. Git for Windows をダウンロードしてインストール
  2. スタートメニューで 「Git Bash」 を検索して起動 （黒いウィンドウが開きます）
  3. ここで以降のコマンドを入力します

PowerShellで使う場合（標準のターミナル）

  1. スタートメニューで 「PowerShell」 を検索して起動
  2. git --version が表示されれば、以降のコマンドはそのまま使えます
  3. 公開鍵の表示は cat の代わりに type を使えます
    • 例：type $env:USERPROFILE\.ssh\id_ed25519.pub
  4. ssh や ssh-keygen コマンドが見つからない場合は、Windowsの「OpenSSH クライアント」を有効化してください（管理者権限）
    • 設定 → アプリ → オプション機能 → OpenSSH クライアントを追加
    • または PowerShell（管理者）で：Add-WindowsCapability -Online -Name OpenSSH.Client~~~~0.0.1.0

Windows Terminalで使う場合（複数シェルをまとめて管理）

  1. Microsoft Storeから Windows Terminal をインストール（入っていればOK）
  2. タブのメニュー（∨）から PowerShell または Git Bash を選択
  3. 選択したシェル上で本資料のコマンドを実行します

コマンドプロンプト（cmd.exe）で使う場合

  1. スタートメニューで 「コマンド プロンプト」 を起動
  2. 基本的に同じコマンドで操作できます
    • cat の代わりに type を使用（例：type %USERPROFILE%\.ssh\id_ed25519.pub）

このように囲われた文字はコマンドになります。Mac/Windowsでターミナルが開けたら、ターミナル上でこのコマンドを入力、もしくはコピー＆ペーストし、Enterキーで実行しましょう。

このように囲われた部分がコマンドです。

2. Gitがインストールされているか確認

git --version

3. SSHキーを作成してGitHubと接続

SSHキーとは

  • SSH（Secure Shell）は、インターネット越しに安全にサーバーとやりとりするための仕組みです

  • SSHキーは「合鍵ペア」のようなもので、

    • 秘密鍵 → あなたのPCに保管（絶対外に出さない）
    • 公開鍵 → GitHubに登録してOK

  • GitHubは「この公開鍵と合う秘密鍵を持っている人だけを信頼する」しくみ

  • これにより、毎回パスワードを入力せずに、安全に接続できるようになります

SSHキー作成

ssh-keygen -t ed25519 -C "あなたのメールアドレス"

⚠️注意事項⚠️

この点に注意して、SSHキーを安全に管理してください。

公開鍵をコピー

cat ~/.ssh/id_ed25519.pub

（WindowsのGit Bashでも同じコマンドでOK）

GitHubに登録

  1. GitHub → 右上プロフィール → Settings
  2. 左メニューの「SSH and GPG keys」をクリック
  3. New SSH key を押す GitHub SSH
  4. Title：わかりやすい名前（例：My Laptop）
  5. Key：コピーした公開鍵を貼り付け
  6. Add SSH key を押す

4. 接続テスト

ssh -T git@github.com

5. Gitのユーザー情報を設定

git config --global user.name "あなたの名前"
git config --global user.email "あなたのメールアドレス"

GitHubでリポジトリを作成

1. GitHubで新しいリポジトリを作成

  1. GitHubにログインし、https://github.com/login にアクセスしてログイン
  2. ログイン後、https://github.com/new にアクセス
  3. New repository のページが表示されます
  4. Repository name：任意の名前を入力（例：my-site）GitHub-Create
  5. 他の設定はデフォルトのままでOK（READMEは作成しなくてOK。Choose visibilityもPublicのまま）
  6. Create repository をクリック

作成が完了したら、以下のような画面になります。いったんページはこのままにしておいて、次のステップに進みます。

GitHub Setup

2. ローカルにリポジトリを作成し、GitHubのリポジトリと紐づける

  1. ターミナル上でコマンドを打ってリポジトリを作成する
mkdir my-site # my-siteという名前のディレクトリを作成
cd my-site # my-siteのディレクトリに移動
echo "# my-site" >> README.md # README.mdというファイルを作成し、"my-site"という行を入れる
git init # そのディレクトリをGit管理する初期化コマンド
git add README.md # README.mdをGit管理する
git commit -m "first commit" # Git管理に追加した変更をコミットする（記録をつける）
git branch -M main # デフォルトブランチ名をmainに変更
git remote add origin git@github.com:<あなたのアカウント名>/my-site.git # GitHub上のリポジトリに紐づける
git push -u origin main # GitHub上のリポジトリに、ローカルでの変更を適用する
補足：💡mkdir, cd, echoコマンドの詳細

mkdir

  • mkdirは「make directory」の略で、新しいディレクトリ（フォルダ）を作成するコマンドです
  • 例：mkdir my-site は「my-site」という名前のディレクトリを作成します

cd

  • cdは「change directory」の略で、現在のディレクトリを変更するコマンドです
  • 例：cd my-site は「my-site」というディレクトリに移動します

echo

  • echoは指定した文字列を出力するコマンドです
  • 例：echo "# my-site" >> README.md はREADME.mdというファイルに# my-siteという行を追加します

Node.jsのインストール手順

Gemini CLIをインストールするために、Node.jsという実行環境が必要になります。 Node.jsはJavaScriptをパソコン、サーバー上で実行するための環境で、Gemini CLIなどのツールをインストールする際も使用されます。

Mac

方法1: 公式インストーラー（初心者向け）

  1. 公式サイトへアクセス https://nodejs.org/

  2. 推奨版（LTS）をダウンロード（macOS Installer）

  3. インストーラーを実行 → すべてデフォルトでOK

  4. 確認（ターミナル）

    node -v

    v22.15.0のようにバージョンが表示されればインストールされています。

Windows

  1. 公式サイトへアクセス https://nodejs.org/

  2. 推奨版（LTS）をダウンロード 緑色の "LTS" ボタンをクリック

  3. インストーラーを実行

    • すべて「Next」でOK（特別な設定不要）
    • "Add to PATH" にチェックが入っていることを確認

  4. インストール確認 コマンドプロンプト（または PowerShell）で

    node -v

    バージョンが表示されればOK

方法2: Homebrew（Macに慣れている方向け）

  1. Homebrewインストール済みか確認（なければ公式）

  2. ターミナルで

    brew install node

  3. 確認

    node -v
補足：💡JavaScriptとNode.jsの関係

1. JavaScriptとは？

  • プログラミング言語のひとつ
  • 本来はブラウザの中で動くために作られた
  • Webページに動きをつける、フォームの入力チェック、アニメーションなどで活躍

2. Node.jsとは？

  • JavaScriptをブラウザの外で動かせるソフトウェア（ランタイム環境）
  • Google Chromeの「V8 JavaScriptエンジン」を利用
  • サーバーやパソコン上でJavaScriptを直接実行できる

3. 関係を一言でいうと

JavaScript：言語そのもの
Node.js：その言語をパソコンやサーバーで動かすための実行環境

Gemini CLIのインストール

以下のコマンドを実行してインストール

npm install -g @google/gemini-cli
補足：💡npmとは？

npmとは？

  • Node Package Managerの略
  • Node.jsのためのパッケージ管理ツール
  • JavaScriptのライブラリやツールを簡単にインストール、管理、共有できる
  • コマンドラインから利用可能で、npm installコマンドでパッケージをインストール

Gemini CLIの実行

ローカルでの環境構築お疲れ様でした。ターミナル上でgeminiと入力して、Gemini CLIを起動しましょう

gemini

このような画面が出たら成功です。

VS Codeのインストールとコードの確認

今後コードの生成はGemini CLIがやってくれますが、手動で変更したい部分も出てきます。そこで、コードエディターであるVS Codeをインストールしましょう

  1. 公式サイトへアクセス https://code.visualstudio.com/

  2. ダウンロード お使いのOSに合わせたインストーラーをダウンロードしてください

  3. インストーラーを実行 ダウンロードしたインストーラーを実行し、画面の指示に従ってインストールを完了させます

  4. VS Codeを起動 インストールが完了したら、VS Codeを起動します

  5. リポジトリを開く

    • メニューから「ファイル」→「フォルダーを開く」を選択します
    • 先ほど作成したリポジトリのフォルダー（例：my-site）を選択し、「フォルダーを選択」をクリックします VSCode Open

  6. VS Codeの画面構成

    • GitHub Codespacesと同様に、左側にファイル管理、中央にコードエディター、下部にターミナル等がデフォルトで配置されています。 VSCode Screen

HTMLファイルをブラウザで表示する

HTMLファイルが作られていることが確認できたら、実際にブラウザー上でどんな見た目か確認してみましょう。

HTML Browser

WindowsでHTMLファイルをブラウザーで開く方法

  1. エクスプローラーでファイルを探す

    • エクスプローラーを開き、作成したHTMLファイル（例：index.html）が保存されているフォルダーに移動します

  2. ファイルをダブルクリック

    • HTMLファイルをダブルクリックすると、デフォルトのブラウザーでファイルが開きます

  3. 右クリックメニューから開く

    • HTMLファイルを右クリックし、「プログラムから開く」→「ブラウザー名」を選択して開くこともできます

MacでHTMLファイルをブラウザーで開く方法

  1. Finderでファイルを探す

    • Finderを開き、作成したHTMLファイル（例：index.html）が保存されているフォルダーに移動します

  2. ファイルをダブルクリック

    • HTMLファイルをダブルクリックすると、デフォルトのブラウザーでファイルが開きます

  3. 右クリックメニューから開く

    • HTMLファイルを右クリックし、「このアプリケーションで開く」→「ブラウザー名」を選択して開くこともできます

共通の方法

これらの方法で、作成したHTMLファイルを簡単にブラウザーで確認することができます

HTMLをGitHub上のリポジトリにpush

pushとは

pushとは、ローカルで行った変更をリモートリポジトリ（GitHubなど）に送信する操作のことです。これにより、他の開発者と変更を共有したり、リモートリポジトリを最新の状態に保つことができます

pushの方法

  1. 変更をステージングする

    • まず、ローカルで行った変更をステージングエリアに追加します
    git add .

  2. 変更をコミットする

    • ステージングエリアに追加した変更をコミットします
    git commit -m "変更内容の説明"

  3. リモートリポジトリにプッシュする

    • コミットした変更をリモートリポジトリにプッシュします
    git push origin main
    • mainはプッシュしたいブランチ名です。必要に応じて他のブランチ名に置き換えてください

これで、ローカルの変更がリモートリポジトリに反映されます。プッシュすることで、他の開発者と変更を共有し、プロジェクトを共同で進めることができます

Gemini CLIを使ったGitの操作

変更があるたびに、ターミナルにgit add .やgit commitを毎回入力するのは面倒です。そこで、そのようなGitの操作もすべてGemini CLIにお任せしてみましょう。

user> いまある変更をすべてpushしてください。

Gemini Push

すると、Gemini CLIが現在の変更を確認するGitコマンドgit statusを実行し、現状を確認した上でadd、commit、pushまで行ってくれます。

⚠️注意⚠️ git push等は慎重に行いたいコマンドなので、allow alwaysにせず、allow onceで毎回確認するのがよいでしょう。

GitHub上でpushできているか確認

pushが完了したら、GitHub上のリポジトリに正しく追加できているか確認してみましょう。先ほどGitHub上で作成したリポジトリに、index.htmlがあれば成功です。

GitHub my-site 目次へ → ホーム