【無料でできる!】 GeminiCLIを使ってWebサイトを公開してみよう

この記事では「Gemini CLIのインストールはできたけど、これから何をしたらいの？」という方向けに、Webサイトの作成から公開までの手順をなるべく丁寧に解説していきます！

初心者の方にとっては手順が結構難しいのですが、、一度覚えると繰り返し作業なのでぜひ挑戦していただけると嬉しいです…！

事前準備として
① GeminiCLIのインストール
② GitとGitHubのセットアップ
が終わっていることが前提なので、まだの方は以下の記事から準備をお願いします。

① GeminiCLIのインストール

② GitとGitHubのセットアップ

GeminiCLIを使ったWebサイトの作成

作業はVSCodeというアプリを使って行います。WindSurfやCursorといった類似のテキストエディタでも同じ流れで行えますので、すでに使い慣れたものがあればそちらで進めていただいても大丈夫です。

1. 拡張機能のインストール

まずはじめに、作成したwebサイトの確認を簡単にするために一つ拡張機能をインストールしておきます。

左メニューの「拡張機能」を選択し、検索バーに「live server」と入力してください。その結果の中から、画像のような「Live Server」という項目を選択してインストールをしましょう。

インストールが完了すると、VSCode左下のバーの部分に「Go Live」というボタンが追加されます。これで準備OKです。

2. 作業用のフォルダを作成

大前提として、プログラムを作るときにはファイル管理がめちゃめちゃにならないよう、毎回決まった場所にプログラム用のフォルダを作るのがオススメです。

ぼくの場合はPCのユーザ名のフォルダ以下に「code」というフォルダを作って、その中にフォルダを新たに作成してからプログラムの作成を進めています。

このとおりでなくても良いので、どこか1つ作業用フォルダを決めて、そこに空のフォルダを作成してみてくださいね！

例）"code"フォルダの中に、今回作業するための"my-lp"フォルダを作成

C:Users/[ユーザ名]
 ┗ code
    ┣ my-lp # LPサイト用プログラム
       ⋮    # 他のプログラムを作るたびに空フォルダを作成

3. 作成した空フォルダを開く

フォルダ作成が完了したらVSCodeのメニューから「ファイル」>「フォルダを開く」を選択して、作成した空のフォルダを開いてください。

　「エクスプローラー」画面の上部に開いたフォルダ名が表示されていればOKです。（すべて大文字で表示されますが気にせずで）　

4. GeminiCLIの起動

続いて、VSCodeのメニューから「ターミナル」>「新しいターミナル」を選択してみましょう。

画面下にターミナルが表示されるので、以下のコマンドを実行してGeminiCLIを起動します。ここでエラーが出る場合は、事前準備の記事を参考にインストール作業を行ってみてくださいね。

gemini

5. サイト作成の指示を行う

ここからようやく作成開始！…なのですが、作成時の指示によってプログラム全体の構成が変わってくるので、最初の指示がかなり重要になってきます。

ウェブサイトを作成する方法も様々あるのですが、個人レベルで作成するものの多くはシンプルな構成で実現可能です。そのため個人的には「HTMLで作ってください」という一文を入れるのがとてもオススメです。

また、GeminiCLIは新しいプログラムを作り始めるときに新たにフォルダを作成してから作業を開始してくれるんですが、今回の流れではとても邪魔です。笑

そのため、これらを加味して今回の手順では以下のような指示文を使っていきます。

●●するサイトをHTMLで作ってください。フォルダを新たに作る必要はありません。

ぼくの手元の例としてはAIプログラミング学習コミュニティのLPを作成する想定でこちらのような指示を行っていきます。

AIプログラミング学習コミュニティのLPをHTMLで作ってください。フォルダを新たに作る必要はありません。

画面としてはこのよう見た目ですね。

実行してしばらく待っていると、途中で選択肢が表示される場面があります。

軽く内容を見つつ2つ目の「● Yes, allow always」を選択すればOKです。上下矢印キーで選んでENTERで決定しましょう。

何度か同様に「Yes, …」を選んでいくとメッセージの表示が止まり、最終的に入力欄が表示されたら処理完了です。

この時点で左メニューの「エクスプローラー」画面を開いて「index.html」のようなファイルが作成されていればOKです。

6. Webサイトの確認

サイトの確認のために先ほどインストールした拡張機能を利用します。VSCode右下の「Go Live」をクリックしてみてください。

すると自動でウェブページが表示され、AIが作成したサイトの見た目を確認することができます。

7. コードの修正と確認

一発で思い通りのサイトが出てくることは基本ないと思うので、ここからは追加で指示を行っていきます。

指示内容は作成したもの次第で自由に行っていただいてOKですが、例えば以下のように追加で指示を行っていきます。こちらのようにざっくりでも良いですし、具体的なイメージがあればそれを伝えたほうが確実です。

途中で許可を求められたら、先ほどと同じように「● Yes, allow always」を選択しながら進めていきましょう。プログラムが修正されると、先ほどと同じURLでリアルタイムで変更内容が反映されます。

このように、指示→確認を繰り返しながら、自分が思い描いたWebサイトを作っていきましょう！

Webサイトの公開

サイトの見た目が出来上がったらいよいよ公開です。今回はGitという仕組みで履歴情報を保存して、それをGitHubというサービスにアップロードする手順で紹介していきます。

公開はGitHub Pagesという仕組みを使って行いますが、事前準備がまだの方はこちらの記事からざっくりの内容理解と環境構築をお願いします。

1. Gitの履歴を保存

Gitの履歴の管理は実はVSCode上から行うことができます。左メニューの「ソース管理」を選択して、「リポジトリを初期化する」というボタンをクリックしてみましょう。

これによって、Gitの履歴を管理するための箱（＝リポジトリ）が作成されます。

作成された時点ではこのように「変更」という欄に今回作成されたindex.htmlが表示されています。

VSCode上では「変更」と「ステージ」の2つの状態があり、デフォルトだと「変更」の部分に今回作成したHTMLファイルが表示されています。

Git履歴を保存するときには「変更」からは直接行うことができず、一度「ステージ」に移動する必要があります。

VSCode内の「変更」の部分にマウスを持っていくと+ボタンが表示されるので押してみましょう。これによって「変更」→「ステージ」にファイルを移すことができます。

「ステージされている変更」という欄にファイルが移動したことを確認しましょう。

イメージとしてはこちらのような流れになります。

続いて、ボタンの上にテキストエリアがあるので、履歴に保存するためのメッセージを入力しましょう。あとから自分が見返したときになんとなく分かる内容であれば何でもOKです。

メッセージを入力した後、「コミット」ボタンを押しましょう。

コミットとはGitの履歴情報を保存する作業のことを指し、画像としてはこんなイメージです。

成功するとファイルが表示されていた欄が空欄になります。それと同時に画面下部に履歴メッセージが表示されているはずです。

これによって、リポジトリという箱の中に履歴情報が追加されました。

ここまでで「自分のパソコン内にGitの履歴情報を保存する」という作業まで完了しました、次はGitHubというサービスにアップロード作業を行います。

2. GitHubに履歴をアップロード

それでは参考記事でインストールした「GitHub Desktop」を開きましょう。

【 初めて開く場合 】

初めて開く場合はTOP画面に大きなボタンが4つ表示されるので、一番下の「Add an Existing Repository from your Local Drive …」を選択してください

【 2回目以降 】

一度使用したことがある場合は、前回開いていたプロジェクトが表示されているはずなので、メニューの「File」>「Add Local Repository …」を選択してください。

その後「Choose」から先ほど作成したフォルダを選択して「Add Repository」をクリックしましょう。これによって先ほど保存したGit履歴情報が読み込まれます。

このような画面が表示されるので「Publish Repository」を選択しましょう。ここからGitHubへのアップロード作業を行うことができます。

「Publish Repository」というダイアログが表示されるので、Name（名前）を入力していきましょう。

Nameの部分には好きな名前をつけることができますが、GithubPagesという機能を使って公開するときのURLとして使用されるので、URLの後半で使用したい名前を入力しましょう。

https://[アカウントID].github.io/[Nameの部分]

例えば画像の例の場合は

https://munakata-eng.github.io/souri-lp

のようになります。他の方に共有するようなものであればなるべくシンプルなものが良いですね。

また、「Keep this code private」のチェックですが、通常はチェックを入れて他の人から見えないようにするのがオススメなのですが、今回のようにGitHub Pagesという機能を使うときはチェックを外して公開状態にする必要があります。

最後に「Publish Repository」をクリックすると手元のPC内のGit履歴情報が、GitHubというサイトにアップロードされます。

この作業を行うことで、自分のPC内のGit履歴情報が、GitHubにアップロードされました。

3. GitHub Pagesで公開

いよいよサイト公開です。まずGitHub https://github.com/ にアクセスしてログインしましょう。

いま作成したプロジェクトはTOPページ左側のテキストエリアからキーワード入力で探すことができます。クリックして開きましょう。

画面上部の「Settings」を開いて左側のメニューの「Pages」を選択するとGitHub Pagesの画面が開かれます。

Branchの欄、「None」と書かれたところをクリックして「main」を選んでください。

「main」の右側に「Save」ボタンが表示されるので、そのままクリックすればOKです。公開されるまで1分ほど少し時間差があるので待ちましょう。

1〜2分くらい待った後、ページをリロードして、画面上部にYour site is live at ...のような表示がでれば公開完了です。「Visit site」をクリックしてページを確認しましょう。

先ほど手元で確認したものと同じページが表示されれば完了です。このページは誰でも閲覧可能なものになっているので、URLを共有することで他の方にも見てもらえます！

4. コードの変更時のサイト反映方法

一度公開したけど後から修正したい、というときに備えて変更手順も紹介していきます。

VSCodeに戻って、GeminiCLIに変更内容を指示してみましょう。

プログラムが変更されたときには、「Go Live」ボタンを押して開かれたページ（ローカル環境）で一度見た目を確認することをおすすめします。問題なければ次の手順に進みましょう。

修正時の反映にもGitを使用します。左メニューの「コード管理」を開きましょう。

「変更」欄に表示されていたファイルの「＋」ボタンをクリックして、「ステージされている変更」へ移動させてください。

その後、テキストエリアにメッセージを入力して「コミット」をクリックしたら履歴情報の保存が完了です。

コミットボタンを押すと、先ほどまで表示されていなかった「変更の同期」というボタンが表示されるようになっているので押してみましょう。このボタンを押すことでGitHubに変更内容がアップロードされます。

GitHub Pagesの仕組みでは、変更がGitHubにアップロードされると自動でサイトの内容が更新されるようになっています。「変更の同期」を押してから2~3分ほど経ってから公開URLを確認して、変更が反映されていれば無事完了です。

手順としては以上です。特にGitとGitHubまわりで新しい用語や手順がたくさん出てきて非常に難しいとは思いますが、、ぜひ何度か試してみてやり方を覚えていただけると嬉しいです！

最後にちょっと宣伝

Discordというサービスを使ってAIプログラミング学習コミュニティを運営しています！今回のようなGeminiCLIといったAIツールの情報交換や質問回答、たまにボイスチャットでお話なんかもしています。

アカウントさえあれば無料で参加できますので、お気軽に参加してみてくださいね！参加はこちらから↓↓

さらに有料コミュニティ部分では、体系的に学べる教材、メンバー限定の相談チャンネル、週1回のライブ配信会など行っていますので、よろしければそちらもご検討いただけると嬉しいです😊

コミュティの詳細はこちら↓↓