この記事はこんな方におすすめです：
・GitやGitHubの使い方を実際に手を動かして学びたい
・ローカルからリモートへの一連の流れを試してみたい
・ポートフォリオの「土台づくり」として、第一歩を踏み出したい
上記に当てはまる方に向けて、初心者がGitの環境構築から、GitHub Pages を活用して静的サイトを公開するまでの体験談をまとめました。
はじめに・なぜやろうと思ったか
今回この記事を書くきっかけになったのは、GitやGitHubの基本操作を試してみたい、開発環境を一通り整えてみたいという思いからでした。
WSLの導入、Ubuntuのセットアップ、SSH鍵の作成、Gitのユーザー設定――
これらを順番に手を動かして試す中で、「練習用として、静的なWebサイトを一度公開してみよう」というゴールを設定しました。
とはいえ、やってみると意外とつまずくポイントも多く、うまくいかないこともありました。
しかし最終的にはGitHub Pagesを使うことで、驚くほど簡単に自分のWebサイトを公開できました。
この記事では、初心者の私がGitの環境を整え、静的サイトをGitHub Pagesで公開するまでの流れを紹介します。
具体的に行った手順
WSLのインストール（PowerShell）
まず、Windows上でLinuxを動かすために WSL（Windows Subsystem for Linux） を導入します。
PowerShellを管理者権限で起動し、以下のコマンドを実行：
wsl --installこのコマンドを実行することで、WSLとUbuntu（LTS版）がまとめてインストールされます。（Ubuntuがインストールされなかったら、Microsoft Storeから、一番最新のUbuntu(LTS)をインストールするようにしてください。）
もしすでにWSLが導入されている場合は、次のステップに進んでください。
Ubuntuの起動とユーザー設定
インストール後、しばらくすると自動的にUbuntuが起動します。（起動しなかったら、自分で実行するようにしてください。）
初回起動時には、Linux側のユーザー名とパスワードを設定するよう求められます。
ここで設定するのは、Ubuntuの中で使うユーザー情報です（Windowsとは別）。
Ubuntuが起動できたら、まずはパッケージを最新状態にします：
sudo apt update && sudo apt upgrade -yこれで、システムの基盤が整いました。
Gitのインストールと初期設定
次に、Gitをインストールします。Gitは、コードの変更履歴を管理するバージョン管理ツールで、GitHubを使うには必須です。
sudo apt install -y git curl build-essentialその後、Gitに自分の名前とメールアドレスを設定します：
git config --global user.name "あなたの名前"
git config --global user.email "you@example.com"この設定は、各コミットに「誰が変更したのか」を記録するためのものです。
これらを設定した後、
git config --listと入力して、ちゃんと出力されればOKです。
GitHubとの接続
GitHubに安全に接続するため、SSH鍵を使います。以下のコマンドで鍵を生成します。
ssh-keygen -t ed25519 -C "you@example.com"途中でパスフレーズを聞かれますが、空でも設定してもOKです。
作成された公開鍵（~/.ssh/id_ed25519.pub）の中身をGitHubに登録します：
- GitHubのプロフィール画像 → Settings → SSH and GPG keys
- 「New SSH key」ボタンをクリック
- タイトルをつけて、公開鍵を貼り付けて保存
登録後、接続をテストします：
ssh -T git@github.com成功すれば、「Hi ユーザー名! You’ve successfully authenticated…」と表示されます。
ここまでで、ローカルPCからGitHubへ接続してコードを送れる状態になりました。
コラム：ed25519とは？
SSH鍵の作成時に指定した「ed25519」は、楕円曲線暗号（Elliptic Curve Cryptography）の一種です。
従来よく使われていた RSAに比べて、より短い鍵長で高いセキュリティを実現でき、高速で安全性も高いのが特徴です。
そのため、最近ではGitHubをはじめ、多くのサービスで ed25519 の利用が推奨されています。
GitHubでリポジトリを作成し、ローカルにクローン
GitHubとSSH接続ができるようになったら、次はコードを置く「リポジトリ」を作成します。
- GitHubにログインし、右上の「＋」→「New repository」をクリック
- リポジトリ名（例：
my-website）を入力 - 「Initialize this repository with:」のチェックは外したまま（空の状態にする）
- 「Create repository」ボタンをクリック
作成後、表示されるSSH用のURLをコピーします（例：git@github.com:ユーザー名/portfolio.git）
Ubuntuのターミナルで、任意のディレクトリに移動してから以下を実行することによって、リポジトリをローカルにクローン（複製）します。
git@github.com:あなたのユーザー名/my-website.git
cd my-websiteこれで、リモートの空リポジトリがローカルにコピーされました。
VSコードでのファイル作成
リポジトリディレクトリに入った状態で、以下のコマンドを実行すると、 VS Code を起動することができます。
code .VS Codeが開いたら、まずはシンプルなWebページ用に以下の2つのファイルを作成します：
index.htmlstyle.css
内容は最低限のものでOKです。今回はGeminiを使って生成した自己紹介用のHTMLとCSSを使いました。
例：index.html の一部（抜粋）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>こんにちは、ぼちペンです</h1>
<p>これはGitの練習として作った静的サイトです。</p>
</body>
</html>Gitでのコミット・プッシュ(GitHubへのアップロード)
ファイルを作成したら、Gitで変更を記録してGitHubにアップロードします。
- ファイルをステージ（追跡対象に追加）：
git add . - コミット（変更の確定）：
git commit -m "ウェブサイトの骨組を作成" - GitHubにプッシュ（アップロード）：
git push origin main
これで、ローカルで作成したファイルがGitHub上に反映されました！
GitHub Pagesの設定と公開
ファイルをGitHubにプッシュできたら、次はいよいよそのページをインターネット上に公開します。
GitHub Pagesを使えば、特別なサーバーやドメインを用意しなくても、HTMLを公開するだけでURLが発行されます。
以下の手順で、GitHub Pagesを公開することができます。
- GitHubで該当のリポジトリを開く
- 「Settings」タブをクリック
- サイドバーの「Pages」を選択（下の方にあります）
- 「Source」の項目で以下を設定：
- Branch：
main - Folder：
/ (root)
- Branch：
- 「Save」をクリック
設定が完了すると、上部にURLが表示されます。
※反映には数分かかることがあります。
つまずいたポイント／学んだこと
今回の流れの中で、いくつか「初心者の私がつまずいた」ポイントがありました。
その体験と対応方法を紹介します。
GitHub Pagesの設定場所がわかりにくい
最初、GitHub Pagesの設定をしようとしたとき、リポジトリの設定ではなく「GitHub全体のアカウント設定」から探してしまい、見つけられませんでした。
対処：
GitHub Pagesの設定は、リポジトリの「Pages」の設定からできます。
index.htmlがルートにないとページが表示されない
当初は、srcディレクトリの中に index.html を置いていました。
その状態では GitHub Pages にアクセスしても「404 Not Found」と表示されてしまいます。
対処：index.html は リポジトリのルート（トップ階層）に置く必要があります。
その後、mvコマンドで移動して対応しました。
GH007エラー（メール設定エラー）
最初のGit設定で、自分のメールアドレスを登録していたところ、git push の際に GH007エラーが発生しました。
GitHubの設定でメールアドレスを非公開にしていたため、GitHub側が「本人かどうか判断できない」として弾いてしまいました。
対処：
GitHubのプロフィール設定で表示されていた noreply アドレスを使って、次のように設定を更新しました。
git config --global user.email "your-github-username@users.noreply.github.com"その後、git commit --amend で修正すべきでしたが、今回は簡易的に git push -f（強制プッシュ）で対応しました。
Live ServerがWSL環境でうまく使えなかった
VS Codeの拡張機能「Live Server」を使ってローカルでHTMLを確認しようとしましたが、WSL環境とのネットワークの関係でブラウザに表示されず、戸惑いました。
対処：
今回は無理にLive Serverを使わず、GitHub PagesにpushしてWeb上で確認する流れに切り替えました。
公開されたサイトの紹介
一連の手順を経て、最終的にGitHub Pagesで自分のWebページを公開することができました。
実際に公開されたページはこちらです。
🔗 https://bpen-dev.github.io/portfolio/
このページは、生成AI（Gemini）を使ってほんの数プロンプトで作成したものです。
ですので、見た目としてはかなりシンプルで、内容も練習用のものに近いです。
今回の目的は「見た目の整ったポートフォリオを作ること」ではなく、
GitやGitHubの基本操作、環境構築の一連の流れを試してみることにありました。
とはいえ、ブログとは別にポートフォリオサイトがあるというのは、それだけでもちょっとした達成感があります。
まとめと今後の展望
今回は、GitやGitHubの基本操作を学ぶ一環として、WSL環境を構築し、静的なWebページをGitHub Pagesで公開するまでの流れを体験しました。
正直なところ、もともとは「HTMLを公開したい！」という明確な目的があったわけではなく、手を動かしてみる中で、一連の開発フローを学びたいというのが動機でした。
今回公開したページ自体はシンプルな内容ですが、
これを起点として、ポートフォリオを少しずつ育てていけたらいいなと思っています。
たとえば：
- 小さなWebアプリを作って掲載する
- JavaScriptで動きを加える
- 簡単なフォームや自己紹介ページを追加する
そんなふうに、自分の成長にあわせてページも進化させていけたら楽しいですね。
これからGitやGitHubに挑戦してみたい方の参考になればうれしいです！
コメント