🎯 はじめに

Webサイトを作るとき、「せっかく作ったHTMLやCSSをインターネット上で公開したい！」と思ったことはありませんか？
Live serverなどの拡張機能を使えば簡単にローカルで見れはしますが、
他の人へ見せつける（？）ことはできないですよね。

そんなときに便利なのが GitHub Pages です！

GitHub Pages を使えば、無料で自分のHTMLやCSSを世界に向けて公開 できます。

この記事では 初心者向けのハンズオン形式 で、GitHub Pages を使って HTMLとCSSのWebページを公開する手順 を解説します！

📌 手順の概要

リポジトリの準備（GitHubにプロジェクトを作成する）
HTML・CSSファイルの準備（サンプルコードあり）
GitHub Pages の設定（デプロイ方法）

1. リポジトリの準備

まずはGitHubに 新しいリポジトリ を作成します。

✅ リポジトリを作成する

GitHubにログインし、右上の + ボタン → New repository をクリック。
リポジトリ名 を入力（例: my-first-website）。
「Public（公開）」 を選択。
「Initialize this repository with a README」にはチェックを入れない。
Create repository ボタンをクリック。

🎉 これでGitHub上に リポジトリが作成されました！

2. HTML・CSSファイルの準備

次に、公開するHTMLとCSSのファイルを準備しましょう。
今回は簡単のためにこちらでサンプルファイルを準備したので、こちらをご利用ください。

✅ 初心者向けのサンプルコード

📌 index.html（Webページのメインファイル）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub Pages 初公開！</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>GitHub PagesでWebサイトを公開しよう！</h1>
    <p>これは初心者向けのGitHub Pages公開サンプルです。</p>
</body>
</html>

📌 style.css（Webページのデザイン）

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 50px;
    background-color: #f4f4f4;
}
h1 {
    color: #333;
}

この2つのファイルを 以下のように に配置してください。

※フォルダ名は何でもよいです。

✅ ファイルをGitHubにアップロード

※注意！以下画像のように、ターミナルの語尾（カレントディレクトリ）が作ったフォルダと同じ名前になっていることを確認してください

蒸気を確認したらターミナルで以下のコマンドを実行し、GitHubにアップロードしましょう。

git init  # リポジトリを初期化（1回だけ実行）
git add .
git commit -m "Add initial HTML and CSS files"
git branch -M main
git remote add origin https://github.com/あなたのGitHubユーザー名/my-first-website.git
git push -u origin main

📌 これで GitHubにファイルがアップロード されました！

3. GitHub Pages の設定

最後に GitHub Pages の設定 を行い、サイトを公開します！

✅ GitHub Pages を有効化する

GitHubのリポジトリページを開く。
Settings タブをクリック。
左サイドバーの Pages をクリック。
Branch の main を選択し、Save をクリック。

🎉 設定完了！ 数分後にWebサイトが公開されます。

4. 公開URLを確認する

GitHub Pagesが有効になると、Settings > Pages に 公開URL が表示されます。

例：

https://あなたのGitHubユーザー名.github.io/my-first-website/

このURLを開けば、作成したHTMLファイルが 世界中の誰でも閲覧できるWebサイト になっています！🌍✨

🎉 まとめ

✅ GitHubでリポジトリを作成する
✅ HTML・CSSファイルを作成し、GitHubにアップロードする
✅ GitHub Pages を有効化し、Webサイトを公開する

これで あなたの作ったWebページが世界に公開されました！ 🚀

📝 参考リンク