AIが生成した「HTML/CSSコード」は持っているけれど、どうやってインターネットに公開すればいいかわからない、という初心者の方へ。

世界中のエンジニアに利用されているプラットフォーム GitHub の無料機能「GitHub Pages」を使えば、あなたのWebサイトを驚くほど簡単に公開できます。

この手順書では、インターネット初心者の方でも迷わないように、具体的な5つのステップで解説します。

私は Gemini 3 で生成したWebサイトを公開していきます。公開されたサイトは最下部に掲載しています。

【 発売1週間ほどで重版決定 】

書籍「AIでゼロからデザイン」好評発売中

Amazon 売れ筋ランキング
商業デザイン売上 1位 を記録（10/15 調べ）

STEP 1: GitHubアカウントの作成

まず、Webサイトのファイルを管理し、無料で公開するための基盤となるGitHubアカウントを作成します。

1-1

GitHub公式サイトにアクセスし、「Sign up」（サインアップ）をクリックします。

1-2

画面の指示に従い、メールアドレス、パスワード、そしてユーザー名を設定します。

1-3

登録を完了します。

STEP 2: Webサイト用リポジトリ（保管場所）の作成

次に、お手持ちのHTML、CSSファイルをアップロードするための専用の「箱」（リポジトリ）を作成します。

2-1

GitHubにログインし、画面右上の「+」アイコンから「New repository」を選択します。

2-2

以下の設定を行います。

• Repository name (リポジトリ名): 公開を簡単にするため、あなたのユーザー名と完全に一致させ、末尾に.github.ioを付けた名前にします。

  • 例: ユーザー名が sampleuser なら、リポジトリ名は sampleuser.github.io

• Public: 必ず「Public」（公開）を選択します。

• Initialize this repository with: 「Add a README file」にチェックを入れます（任意）。

2-3

「Create repository」をクリックして作成を完了します。

STEP 3: Gitのインストールとローカルでの準備

GitHub Pages へファイルをアップロードするには、お手元のPCでGitというソフトウェアを使い、コマンドライン（ターミナル）で操作するのが最も効率的でプロフェッショナルな方法です。

このステップでは、Gitのインストールと、Webサイトのファイルをアップロード可能な状態にするための準備を行います。

3-1

Gitのインストール

まだGitをPCにインストールしていない場合は、以下の手順で導入してください。

インストール後、ターミナル（WindowsならGit BashまたはPowerShell、Macならターミナル）を開き、以下のコマンドを入力してGitが正しくインストールされているか確認しましょう。

git --version

バージョン情報が表示されれば成功です。

3-2

作業フォルダ（ローカルリポジトリ）の準備

Webサイトのファイル（index.html、style.cssなど）をアップロードするために、PC内に専用の作業フォルダを作成し、そこにすべてのファイルをまとめます。

1. PCの好きな場所に、新しいフォルダを作成します。（例: my-website）

2. この新しいフォルダの中に、お手持ちのWebサイトを構成するすべてのファイル（index.html、CSSフォルダ、画像ファイルなど）をコピーして入れます。

3. ターミナルを開き、cdコマンドを使って、先ほど作成したフォルダへ移動します。

   1. 例 (Windows/Mac共通):

cd [作成したフォルダのパス]

3-3

Gitの初期設定（git init）

フォルダへ移動したら、そのフォルダをGitで管理するための初期設定を行います。この操作により、そのフォルダがローカルリポジトリとして機能し始めます。

ターミナルで以下のコマンドを実行します。

git init

このコマンドを実行すると、「Initialized empty Git repository in ...」といったメッセージが表示されます。これで、このフォルダ内の変更履歴をGitが追跡できるようになります。

3-4

リモートリポジトリの登録

次に、作成したローカルフォルダと、STEP 2でGitHub上に作ったリポジトリ（例: sampleuser.github.io）を紐づけます。

GitHubのリポジトリページへアクセスし、緑色の「Code」ボタンをクリックして表示される HTTPSのURL をコピーしてください。

コピーしたURLを使って、ターミナルで以下のコマンドを実行します。

git remote add origin [コピーしたGitHubのHTTPS URL]

# 例
git remote add origin https://github.com/sampleuser/my-website.git

これで、ローカルの変更を「origin」という名前で登録したGitHubの場所へ送る（プッシュする）準備が整いました。

STEP 4: コマンドラインによるファイルのコミットとプッシュ

このステップでは、ローカルフォルダに入れたあなたのWebサイトファイル（index.htmlなど）を、GitHub上のリモートリポジトリへアップロード（プッシュ）します。

関連 note

4-1

Webサイトのファイルをステージングする（git add）

ローカルフォルダ内のすべての変更されたファイル（今回は新しく追加したHTMLやCSSなど）を、Gitが記録する準備リスト（ステージングエリア）に入れます。

ターミナルで以下のコマンドを実行します。

git add .

. (ドット) は「このフォルダ内のすべてのファイル」を意味します。

4-2

変更を記録する（git commit）

ステージングエリアに入れたファイルの状態を確定し、変更履歴としてローカルに記録します。この記録を「コミット」と呼びます。

git commit -m "Initial website files upload"

• -m "..." は、そのコミットがどのような変更だったかを説明するメッセージです。今回は「ウェブサイトファイルの初回アップロード」という意味のメッセージを付けました。

4-3

ブランチ名を修正する（git branch -M main）

GitHub Pagesで公開設定をする際、主要なブランチ名が「main」である必要があります。古いシステムでは「master」が使われていましたが、現在の標準に合わせてブランチ名を修正します。

git branch -M main

4-4

GitHubへファイルを送信する（git push）

いよいよ、ローカルに記録したコミットを、インターネット上のGitHubリポジトリへ送信（プッシュ）します。

git push -u origin main

• origin はステップ3で設定したGitHubリポジトリの名前、main は送信先のブランチ名です。

• このコマンドを実行すると、GitHubのユーザー名とパスワード（またはPersonal Access Token）の入力を求められる場合があります。

プッシュが完了したら、GitHubのWebサイトへアクセスし、リポジトリ内にあなたのHTMLやCSSファイルがアップロードされていることを確認してください。

STEP 5: GitHub Pagesの公開設定と確認

ファイルがGitHubに届いたので、最後にこのファイルをWebサイトとして公開するための設定を行います。

5-1

Pages設定画面へ移動

1. GitHubであなたのリポジトリページを開きます。

2. ページ上部にある「Settings」タブをクリックします。

3. 左側のメニューから「Pages」を選択します。

5-2

公開ブランチの選択

「Build and deployment」セクションを確認します。

1. 「Source」が「Deploy from a branch」になっていることを確認します。

2. 「Branch」セクションのドロップダウンメニューで、main を選択します。

3. その右のフォルダパスは「/ (root)」が選択されていることを確認し、「Save」ボタンをクリックします。

5-3

Webサイトの確認

設定を保存すると、GitHubが数分かけてファイルを公開サーバーにデプロイします。

1. 5分ほど待ってから、「Pages」の画面をリロード（再読み込み）します。

2. ページ上部に「Your site is live at https://[あなたのユーザー名].github.io/…」という緑色のメッセージと、公開された URL が表示されます。

3. 表示されたURLをクリックして、あなたのWebサイトが世界中に公開されているかを確認してください。

これで、Gitコマンドを使ったプロフェッショナルな方法で、Webサイトの無料公開が完了しました！

🔽 今回公開したサイト

【 発売1週間ほどで重版決定 】

書籍「AIでゼロからデザイン」好評発売中

Amazon 売れ筋ランキング
商業デザイン売上 1位 を記録（10/15 調べ）