Webページを公開しながらGitコマンドとGitHubを学ぶ

2025年2月12日 最終更新日時 : 2025年2月16日 山崎講師山崎講師
『GitHub Pagesで学ぶGit入門』〜静的サイト運用を通じてGitの基本を身につける〜

第1章: GitHub Pagesとは？

1-1. GitHub Pagesとは？

GitHub Pages（ギットハブ・ページズ）は、GitHubが提供する無料の静的サイトホスティングサービスです。HTML、CSS、JavaScriptを含む静的なファイルをGitHubのリポジトリにプッシュするだけで、簡単にウェブサイトを公開できます。

この研修ではチームのWebサイトを管理運営するために使います。

GitHub Pagesを利用すると、サーバーを用意せずに無料でサイトを公開できるため、初心者でも簡単にウェブサイト運用を始めることができます。

1-2. GitHub Pagesを使うメリット

GitHub Pagesの主なメリットを挙げると、以下のような点があります。

(1) 無料で利用可能

GitHubの無料アカウントがあれば、誰でもGitHub Pagesを利用できます。サーバー費用は一切かかりません。

(2) 簡単にデプロイ（公開）できる

ファイルをGitHubリポジトリにプッシュするだけで、自動的にウェブサイトが更新されます。FTPを使う必要はありません。

(3) バージョン管理が簡単

Gitを使ってコードの履歴を管理できるため、過去のバージョンに戻すことも容易です。

GitHub Pagesではできないこと

  • JavaやPythonなどのサーバーサイド処理（動的なサイトには不向き）
  • データベースの利用（MySQLやPostgreSQLを使うことはできません）

1-4. GitHub Pagesの基本構成

今回は、以下の方法でGitHub Pagesを利用します。

(1) ユーザー/オーガナイゼーションサイト

  • リポジトリ名を username.github.io にすると、自動的に https://username.github.io/ で公開される。
  • 1つのGitHubアカウントに1つだけ作成可能。

公開ブランチの選択

GitHub Pagesでは、サイトを公開するためのブランチを以下のいずれかに設定できます。

  • main または master ブランチ
  • gh-pages ブランチ（特定の用途向け）
  • docs/ ディレクトリ（プロジェクトのドキュメント公開用）

次の章では、GitHub Pagesを始めるための準備を進めていきます。

第2章: GitHub Pagesを始める準備（Windows編）

GitHub Pages を使うには、GitHubアカウントの作成と、ローカル環境でのGitの設定が必要です。本章では、Windows環境でコマンドラインを使って準備する方法を説明します。

2-1. GitHubアカウントを作成する

GitHub Pagesを利用するには、GitHubのアカウントが必要です。以下の手順でアカウントを作成しましょう。

  1. GitHubの公式サイト にアクセスする。
  2. 「Sign up」をクリックし、ユーザー名、メールアドレス、パスワードを入力する。
  3. 画面の指示に従ってアカウントを作成し、メールの確認を行う。

2-2. Gitのインストール

Gitは、GitHubとのやり取りに必要なツールです。Windows環境では、Git for Windowsをインストールします。

  1. Git for Windowsの公式サイト にアクセスし、「Download」ボタンをクリックする。
  2. ダウンロードしたインストーラーを実行し、基本的にデフォルト設定のままインストールを進める。
  3. インストールが完了したら、Git Bashというアプリケーションを起動する。
  4. 以下のコマンドを実行して、Gitが正しくインストールされたか確認する。
git --version

出力例

git version 2.47.1.windows.2

Bashとは？

Bash（Bourne Again Shell）は、UNIXやLinuxで最も広く使われているシェルの一つです。シェルとは、ユーザーがコンピュータと対話するためのインターフェースであり、コマンドを入力すると、それを解釈し、オペレーティングシステムに処理を実行させる役割を担います。

Bashは、従来のBourne Shell（sh）を拡張したもので、1989年にGNUプロジェクトの一環として開発されました。現在では、多くのLinuxディストリビューションで標準シェルとして採用されており、macOSでもデフォルトのシェルとして使われていました（macOS Catalina以降はZshが標準）。

この研修でよく使うBashコマンド10選
コマンド説明例
lsファイル・ディレクトリの一覧を表示ls -l
cdディレクトリを移動cd /home/user
pwd現在のディレクトリを表示pwd
mkdir新しいディレクトリを作成mkdir new_folder
rmファイル・ディレクトリを削除rm -rf my_folder
cpファイル・ディレクトリをコピーcp file1 file2
mvファイル・ディレクトリを移動または名前変更mv old.txt new.txt
grep文字列を検索grep "error" logfile.txt
chmodファイル・ディレクトリの権限を変更chmod 755 script.sh
echoテキストを出力echo "Hello, World!"

まずはこの10個を押さえておけば、この研修での基本的なBash操作はスムーズに行えます。

2-3. SSHキーをGitHubに登録する（推奨）

リモートリポジトリへのアクセス方法には、HTTPSとSSHの2種類がありますが、SSHを設定しておくと毎回パスワードを入力する手間が省けるため、SSHの設定を推奨します。

  1. Git Bashを開き、以下のコマンドを実行する。 ※your-email@example.com はGitHubに登録したメールアドレスに変更してください。
ssh-keygen -t rsa -b 4096 -C "your-email@example.com"
  1. Enterを押してデフォルトの保存場所を選択し、パスフレーズは空のままEnterを押す。
  2. SSHキーをクリップボードにコピーする。 
clip < ~/.ssh/id_rsa.pub
  1. GitHubのSSHキー設定ページにアクセスし、「New SSH Key」をクリックする。
  2. 「Title」にわかりやすい名前をつけ、「Key」にコピーしたSSHキーを貼り付けて「Add SSH key」をクリックする。
  1. 以下のコマンドを実行し、GitHubとの接続を確認する。 
ssh -T git@github.com

成功すると以下のようなメッセージが表示される。

Hi username! You've successfully authenticated, but GitHub does not provide shell access.

2-4. Gitの初期設定をする

Gitを使う前に、ユーザー名とメールアドレスを設定しておきます。

git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"

設定内容を確認するには、以下のコマンドを実行します。

git config --global --list

2-5. 新しいリポジトリを作成する

  1. GitHubにログインし、右上の「＋」ボタンをクリックして「New repository」を選択する。
  1. リポジトリ名を your-username.github.io に設定する。（例: yamada-taro.github.io）
  1. 「Public（公開）」を選択し、「Create repository」をクリックする。
  2. 画面に表示されたリモートリポジトリのURLをコピーする。

お仕事で使うリポジトリはPublicにしない

GitHubでリポジトリをパブリックにすると、機密情報の流出（APIキーやパスワードの公開）、脆弱性の露出（攻撃者による悪用）、ライセンス違反（著作権侵害のリスク）といった危険性があります。対策として、プライベートリポジトリの活用が重要です。GitHubを安全に利用するために、公開する情報の選定は慎重に行いましょう。

2-6. ローカルリポジトリを作成し、GitHubに接続する

  1. Git Bashを開く。
  2. 作業用のディレクトリに移動し、ローカルリポジトリを作成する。 
cd /c/pleiades/workspace
mkdir github-pages 
cd github-pages
git init
  1. GitHubのリポジトリをローカルに関連付ける。 ※ your-username の部分は自分のGitHubアカウント名に置き換えてください。
git remote add origin git@github.com:your-username/your-username.github.io.git
  1. origin が正しく追加されているか確認する。 
git remote -v

出力例:

origin git@github.com:your-username/your-username.github.io.git (fetch)

origin git@github.com:your-username/your-username.github.io.git (push)

2-7. 初回のコミットとプッシュ

リポジトリができたら、試しにindex.html を作成し、GitHub Pagesにアップロードしてみます。

  1. index.html を作成する。 
echo "<h1>Hello, GitHub Pages</h1>" > index.html
  1. Gitに追加し、コミットする。 
git add . 
git commit -m "初回のコミット"
  1. GitHubにアップロードする。 
git push -u origin main

初回のプッシュでは、main ブランチがない場合は git push -u origin master とする。

GitHubでファイルがプッシュされたことが確認できます。

2-8. GitHub Pagesの有効化

  1. GitHubのリポジトリページにアクセスする。
  2. 「Settings」→「Pages」に移動する。
  3. 「Branch」の設定を main にし、「Save」をクリックする。
  4. 数分待つと、https://your-username.github.io/ にアクセスできるようになる。

これで、GitHub Pagesの準備が完了しました。次章では、Gitの基本コマンドを学びながら、実際にサイトを更新・運用する方法 を学びます。

第3章: GitHub Pages運用で必要な基本コマンドを習得

GitHub Pagesを運用するためには、ローカルで変更を加え、それをGitHubにアップロード（プッシュ）する という流れを理解することが重要です。本章では、サイトの更新を行う際に必要な基本的なGitコマンドを学びます。

3-1. Gitリポジトリをクローンする (git clone)

GitHub上に作成したリポジトリをローカル環境にダウンロードするには、git clone を使用します。既にローカルリポジトリがある場合は、このステップは不要です。

git clone git@github.com:your-username/your-username.github.io.git

成功すると、カレントディレクトリにリポジトリのフォルダが作成されます。

cd your-username.github.io

3-2. 変更内容を確認する (git status)

ファイルを編集したり新規作成した後、変更内容を確認するには git status を実行します。

git status

出力例:

On branch main
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
modified: index.html

このコマンドを使うことで、どのファイルが変更されたのかを確認できます。

3-3. 変更をステージングする (git add)

ファイルを変更・追加したら、それをGitの管理対象にする必要があります。git add を使って、変更をステージング（準備）します。

git add .

または、特定のファイルだけ追加する場合は以下のようにします。

git add index.html

git status を実行すると、追加されたファイルが「staged」と表示されます。

3-4. 変更をコミットする (git commit)

変更内容をリポジトリに記録するには git commit を実行します。

git commit -m "トップページの見出しを変更"

ポイント:

  • -m "メッセージ" で、変更内容を簡潔に記述する。
  • コミットはGitの履歴に記録されるため、後で変更履歴を追跡できる。

3-5. GitHubにアップロードする (git push)

コミットした変更をGitHubに反映するには、git push を実行します。

git push origin main

※ main ではなく master がデフォルトのブランチになっている場合は、git push origin master を使用してください。

成功すると、GitHub Pagesサイトが自動的に更新されます。

3-6. GitHubの最新の状態を取得する (git pull)

別のPCで作業したり、他のメンバーがリポジトリを更新した場合は、最新の状態を取得する必要があります。

git pull origin main

これにより、リモートリポジトリ（GitHub）上の最新の変更がローカルに反映されます。

3-7. よくあるエラーとその対処法

(1) git push でエラーが出る

error: failed to push some refs to 'git@github.com:your-username/your-username.github.io.git'

解決策:

git pull origin main --rebase
git push origin main

これは、リモートとローカルの履歴が異なる場合に発生するため、git pull --rebase で解決できます。

(2) git clone でパーミッションエラー

Permission denied (publickey).
fatal: Could not read from remote repository.

解決策: SSHキーが正しく設定されていない可能性があるため、以下のコマンドで確認してください。

ssh -T git@github.com

SSHキーを登録していなければ、再設定が必要です。

まとめ

  • git clone でリポジトリを取得
  • git status で変更を確認
  • git add で変更をステージング
  • git commit -m "メッセージ" で変更を記録
  • git push origin main で変更を反映
  • git pull origin main で最新の状態を取得

この章で学んだ基本操作を使えば、GitHub Pagesサイトの更新をスムーズに行える ようになります。次章では、ブランチを使った開発 について学んでいきます。

第4章: ブランチを使った開発に慣れる

GitHub Pagesを運用する際、ブランチを活用することで、変更をすぐに本番環境に反映させず、テスト環境で確認してから公開 することができます。本章では、ブランチを使った開発の基本を学びます。

4-1. ブランチとは？（GitHub Pagesでの活用例）

ブランチ（Branch） とは、現在のプロジェクトとは別に独立した作業領域を作成する機能です。
ブランチを活用することで、本番環境（mainブランチ）に影響を与えずに、新機能を開発・テスト することができます。

GitHub Pagesにおけるブランチの使い方

  • main（または master）ブランチ → 本番サイト
  • feature-〇〇 ブランチ → 新機能や修正を試すためのテスト環境

例:

  1. main ブランチには現在公開中のページがある。
  2. feature-new-design というブランチを作成し、新デザインのテストを行う。
  3. 動作確認が終わったら main ブランチにマージして、サイトを更新する。

4-2. 新しいブランチを作成する (git branch)

新機能を追加する場合、新しいブランチを作成します。

(1) 現在のブランチを確認

git branch

出力例:

* main

* がついているブランチが現在の作業ブランチです。

(2) 新しいブランチを作成

git branch feature-new-design

作成されるだけで、まだ切り替わっていません。

(3) 作成したブランチに切り替える

git switch feature-new-design

4-3. ブランチをマージする (git merge)

新しいブランチで変更を加えた後、それを main に統合（マージ）します。

(1) main に戻る

git switch main

(2) feature-new-design をマージ

git merge feature-new-design

これで main に feature-new-design の変更が統合されます。

4-4. コンフリクト（競合）が発生したときの解決方法

マージ時に、同じファイルの同じ部分を複数のブランチで編集していた場合、コンフリクト（競合） が発生します。

(1) コンフリクトが発生した場合

Auto-merging index.html
CONFLICT (content): Merge conflict in index.html

(2) ファイルを開き、「<<<<<<<」「=======」「>>>>>>>」を探す

例:

<<<<<<< main
<h1>現在のサイトデザイン</h1>
=======
<h1>新しいデザイン</h1>
>>>>>>> feature-new-design
  • <<<<<<< main → main の変更内容
  • ======= → feature-new-design の変更内容
  • >>>>>>> feature-new-design → マージ対象のブランチ

(3) 手動で修正し、変更を確定

git add index.html
git commit -m "コンフリクトを解決"

4-5. 不要になったブランチを削除する (git branch -d)

ブランチの作業が終わったら、不要なブランチは削除できます。

(1) ローカルブランチを削除

git branch -d feature-new-design

(2) リモートブランチを削除

git push origin --delete feature-new-design

まとめ

  • git branch でブランチを作成
  • git switch <ブランチ名> でブランチを切り替え
  • git merge で main に統合
  • コンフリクトが発生したら手動で修正
  • 不要なブランチは削除

次章では、履歴の変更や復元 について学びます。

第5章: 履歴の変更や復元を学ぶ

Gitの強力な機能の一つに、過去の変更履歴を管理し、必要に応じて元に戻す ことができる点があります。本章では、履歴の確認方法や、間違えた変更を元に戻す方法を学びます。

5-1. コミットの履歴を確認する (git log)

Gitでは、すべてのコミット（変更の記録）が履歴として保存されています。これを確認するには git log を使用します。

git log

出力例:

commit 4a5e2f3b6c8d9e1f2a3b4c5d6e7f8g9h0i1j2k3l
Author: Your Name <your-email@example.com>
Date: Sun Feb 12 12:34:56 2025 +0900

サイトのデザインを更新

履歴を簡潔に表示

変更履歴を簡潔に一覧表示するには、--oneline オプションをつけます。

git log --oneline

出力例:

4a5e2f3 サイトのデザインを更新
3b2c1d0 ナビゲーションバーを追加
2a1b9c8 フッターの修正

5-2. 直前のコミットを修正する (git commit --amend)

コミットメッセージを間違えた場合、--amend オプションを使って修正できます。

git commit --amend -m "修正後のメッセージ"

注意: 既に git push した後に --amend すると、履歴が書き換わるため、他の人と作業している場合は避けましょう。

5-3. 変更を取り消す (git reset / git restore)

(1) ステージングした変更を取り消す (git restore --staged)

git add したけれど、まだコミットしていない場合は、以下のコマンドでステージングを解除できます。

git restore --staged index.html

(2) ワークツリーの変更を元に戻す (git restore)

編集したファイルをコミットせずに元の状態に戻したい場合は、以下を実行します。

git restore index.html

注意: この操作をすると、変更が完全に消えるので慎重に！

5-4. 過去のコミットに戻る (git reset)

(1) 直前のコミットを取り消す（履歴ごと削除）

git reset --hard HEAD~1

→ 直前のコミットを削除し、変更も完全に消去。

(2) 直前のコミットを取り消し、変更を残す

git reset --soft HEAD~1

→ コミットだけを取り消し、変更内容はそのまま保持。

(3) 過去の特定のコミットに戻る

git reset --hard <コミットID>

→ 指定したコミットの状態に完全に戻す。

5-5. 誤った変更を取り消す (git revert)

git reset は履歴を書き換えるため、公開リポジトリでは git revert の方が安全 です。

git revert <コミットID>

特徴:

  • git reset は履歴を消す
  • git revert は「元に戻すコミット」を新しく作成する

5-6. 変更を一時的に退避する (git stash)

作業途中の変更を一時的に保存し、あとで再開したい場合は git stash を使います。

git stash

一時保存した変更を復元するには、以下のコマンドを実行します。

git stash pop

まとめ

  • git log で履歴を確認
  • git commit --amend で直前のコミットを修正
  • git restore で未コミットの変更を取り消し
  • git reset で過去のコミットに戻す（履歴を書き換える）
  • git revert で過去の変更を元に戻す（履歴を残す）
  • git stash で作業内容を一時保存

次章では、GitHub Pagesを使って実際にサイトを公開・運用する方法 を学びます。

第6章: GitHub Pagesを使ったサイト運用の実践

Gitの基本操作を学んだところで、実際にGitHub Pagesを利用してウェブサイトを運用する方法を学びます。本章では、HTMLファイルを公開する手順から、サイトの更新方法、運用のポイント まで解説します。

6-1. GitHub Pagesでサイトを公開する

(1) index.html を作成する

まず、ローカルリポジトリ内に index.html を作成します。

echo "<h1>Welcome to GitHub Pages!</h1>" > index.html

(2) Gitでファイルを追加してコミット

作成したファイルをGitHubにアップロードするために、以下の手順を実行します。

git add index.html
git commit -m "初めてのGitHub Pagesサイト"

(3) GitHubにプッシュ

git push origin main

(4) GitHub Pagesを有効化

  1. GitHubにログインし、対象のリポジトリページを開く。
  2. 「Settings」 → 「Pages」 に移動。
  3. 「Branch」を main に設定し、「Save」をクリック。
  4. 数分後、https://your-username.github.io/ にアクセスするとサイトが表示される。

6-2. サイトを更新する

サイトの内容を変更したい場合、index.html を修正し、再び git commit と git push を行います。

echo "<h1>Updated GitHub Pages!</h1>" > index.html
git add index.html
git commit -m "サイトの内容を更新"
git push origin main

この操作を行うと、数分後にGitHub Pagesのサイトが自動で更新されます。

6-3. CSSやJavaScriptを追加する

サイトをデザインするために、style.css や script.js を追加できます。

(1) CSSファイルの作成

mkdir assets
echo "body { font-family: Arial, sans-serif; background-color: #f0f0f0; text-align: center; }" > assets/style.css

(2) JavaScriptファイルの作成

echo "document.addEventListener('DOMContentLoaded', function() { alert('Welcome to GitHub Pages!'); });" > assets/script.js

(3) index.html にCSSとJSを適用

index.html を編集し、以下のコードを追加します。

<link rel="stylesheet" href="assets/style.css">
<script src="assets/script.js"></script>

(4) Gitに追加してプッシュ

git add .
git commit -m "CSSとJavaScriptを追加"
git push origin main

6-4. よくあるトラブルと対処法

(1) サイトが更新されない

  • git push した後、数分待ってからページをリロードする。
  • キャッシュを削除（Ctrl + Shift + R）。

(2) CSSやJSが読み込まれない

  • assets/ ディレクトリのパスが正しいか確認。
  • https://your-username.github.io/assets/style.css に直接アクセスして存在を確認。

(3) 404 Not Found エラー

  • GitHub Pagesの設定で「Branch」が正しく設定されているか確認。

まとめ

  • index.html を作成し、GitHub Pagesで公開する。
  • git add → git commit → git push でサイトを更新。
  • CSSやJavaScriptを追加し、見た目や機能を強化。
  • カスタムドメインを設定すれば、独自のURLで公開可能。

次章では、GitHub Pagesの運用をさらに効率化するテクニック を紹介します。

第7章: 実践演習と応用テクニック

GitHub Pagesの基本的な使い方を学んだところで、より効率的にサイトを運用するためのテクニックを紹介します。本章では、実践演習を交えながら、プロジェクトの管理方法や、チーム開発でのGitの活用方法 について学びます。

7-1. GitHub Pagesを使ったポートフォリオサイトの作成

GitHub Pagesはポートフォリオサイトや自己紹介ページを作るのに最適です。
簡単なポートフォリオサイトを作成し、公開するまでの手順を実践します。

(1) プロジェクトの準備

mkdir portfolio
cd portfolio
git init

(2) 基本的なファイルの作成

echo "<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
    <link rel='stylesheet' href='style.css'>
</head>
<body>
    <h1>Welcome to My Portfolio</h1>
    <p>GitHub Pagesを使って簡単に公開できます！</p>
</body>
</html>" > index.html

echo "body { font-family: Arial, sans-serif; text-align: center; }" > style.css


(3) GitHubにプッシュ

git add .
git commit -m "ポートフォリオの初回コミット"
git remote add origin git@github.com:your-username/portfolio.git
git push -u origin main

(4) GitHub Pagesの設定

  • GitHubリポジトリの「Settings」→「Pages」で main を選択し、公開する。

7-2. チーム開発でのGitの活用（Fork・Pull Requestの基本）

複数人でプロジェクトを進める場合、ForkとPull Request（PR） を活用すると、スムーズに共同作業ができます。

(1) 他のリポジトリをForkする

  1. GitHubのプロジェクトページを開く。
  2. 「Fork」ボタンをクリックし、自分のアカウントに複製する。

(2) ローカルにクローンする

git clone git@github.com:your-username/forked-repo.git

(3) ブランチを作成して変更を加える

git switch -c feature-update
echo "h1 { color: blue; }" >> style.css
git add .
git commit -m "タイトルの色を青に変更"
git push origin feature-update

(4) Pull Requestを作成する

  1. GitHubのリポジトリページを開く。
  2. 「Compare & pull request」ボタンをクリック。
  3. 変更内容を記入し、「Create pull request」をクリック。

7-3. GitHub Pagesを効率的に運用するためのベストプラクティス

(1) 変更はブランチを使って管理

  • 直接 main で作業せず、feature-〇〇 ブランチで作業してからマージする。

(2) コミットメッセージを明確に

  • git commit -m "ボタンのデザインを変更" のように、具体的な内容を書く。

(3) .gitignore を活用

  • 不要なファイルをコミットしないように .gitignore を設定する。
echo "node_modules/" >> .gitignore
git add .gitignore
git commit -m ".gitignore を追加"
git push origin main

(4) GitHub Issuesでタスク管理

  • 「Issues」機能を活用して、修正・改善点を管理する。

(5) 定期的に不要なブランチを削除

  • git branch -d でローカルの不要ブランチを削除。
  • git push origin --delete feature-old-branch でリモートブランチも削除。

まとめ

  • ポートフォリオサイトを作成し、GitHub Pagesで公開。
  • ForkとPull Requestを活用し、チーム開発をスムーズに進める。
  • GitHub Actionsを使えば、自動デプロイが可能。
  • .gitignore を活用し、不要なファイルを管理。
  • Issuesやブランチ管理を適切に行い、プロジェクトを整理。

次章では、よくあるトラブルとその解決方法 について詳しく解説します。

第8章: Gitトラブルシューティング

GitHub Pagesを運用していると、さまざまなエラーや問題に直面することがあります。本章では、よくあるGitのトラブルとその解決方法 を紹介します。

8-1. git push でエラーが出る

(1) error: failed to push some refs to …

エラーメッセージ:

error: failed to push some refs to 'git@github.com:your-username/your-repo.git'

原因:

  • リモートリポジトリの内容がローカルと異なる。

解決策:
まず、リモートリポジトリの変更を取得してからプッシュします。

git pull origin main --rebase
git push origin main

8-2. git clone でSSH接続エラー

(1) Permission denied (publickey)

エラーメッセージ:

Permission denied (publickey).
fatal: Could not read from remote repository.

原因:

  • SSHキーが正しく登録されていない。
  • git@github.com で接続していない。

解決策:
SSHキーが正しく登録されているか確認。

ssh -T git@github.com

成功例:

Hi your-username! You've successfully authenticated, but GitHub does not provide shell access.

もし認証に失敗する場合、以下の手順でSSHキーを登録してください。

ssh-keygen -t rsa -b 4096 -C "your-email@example.com"
clip < ~/.ssh/id_rsa.pub

GitHubの「Settings」→「SSH and GPG keys」に追加する。

8-3. git merge でコンフリクトが発生する

(1) CONFLICT (content): Merge conflict in index.html

エラーメッセージ:

Auto-merging index.html
CONFLICT (content): Merge conflict in index.html

原因:

  • 同じファイルの同じ部分が異なるブランチで編集されている。

解決策:

  1. index.html を開き、<<<<<<< から >>>>>>> の間を確認。
  2. 手動でどちらの変更を残すか決めて編集。
  3. 編集後、コンフリクトを解決。
git add index.html
git commit -m "コンフリクトを解決"
git push origin main

8-4. GitHub Pagesのサイトが更新されない

(1) 404 Not Found エラー

原因:

  • index.html がリポジトリにない。
  • GitHub Pagesのブランチ設定が間違っている。

解決策:

  1. index.html がリポジトリ内にあるか確認。
  2. GitHubの「Settings」→「Pages」を開き、正しいブランチ（通常は main）が選択されているか確認。

(2) CSSやJSの変更が反映されない

原因:

  • ブラウザのキャッシュが残っている。

解決策:

  • Ctrl + Shift + R で強制リロード。

8-5. git reset を誤って実行してしまった

(1) コミットを誤って削除 (git reset --hard)

解決策:
コミットを削除した場合、git reflog を使うと復元できる。

git reflog

出力例:

4a5e2f3 HEAD@{0}: reset: moving to HEAD~1
3b2c1d0 HEAD@{1}: commit: 重要な修正を追加

戻したいコミットにリセット:

git reset --hard 3b2c1d0

まとめ

  • git push のエラー → git pull --rebase で解決。
  • SSH接続エラー → ssh-keygen でキーを再設定。
  • マージコンフリクト → git merge 後に手動修正。
  • GitHub Pagesのサイトが更新されない → Settings > Pages の設定を確認。
  • git reset --hard で履歴を削除 → git reflog で復元。

Webページを公開しながらGitコマンドとGitHubを学ぶは以上です。

セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク

投稿者プロフィール

山崎講師
山崎講師代表取締役
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
対象読者
新入社員
前の記事
Gitを活用したシステム開発のストーリー
2025年2月11日
次の記事
Javaの Scanner クラスを使うときに、一度 Scanner のインスタンスを作成して close() した後、再度 Scanner を作成すると、文字列が入力できなくなることがあります
2025年2月12日