自分のプロフィールページをGitHubに公開しよう

💻 この課題はPCで実際にコードを書いて取り組みましょう
1

プロジェクトフォルダを作ろう

ターミナルを開いて、プロフィールページ用のフォルダを作り、Gitリポジトリを初期化しましょう。

mkdir my-profile
cd my-profile
git init

以下のように表示されれば成功です：

Initialized empty Git repository in .../my-profile/.git/
💡 ヒント
mkdir でフォルダを作り、cd で移動してから git init を実行します。「Initialized empty Git repository」と表示されれば成功です。

参考: Git レッスン2: はじめてのGit操作

2

プロフィールHTMLを作ろう

VS Code で index.html を作成し、自分のプロフィールを書きましょう。以下の内容を含めてください：

  • <h1> で自分の名前（ニックネームでもOK）
  • <p> で自己紹介の文章
  • <ul> と <li> で好きなものリスト
💡 ヒント
から始めて、 の中に

で名前、

で自己紹介、

    で好きなものリストを書きましょう。

参考: HTML レッスン2: 文字を表示しよう

3

git status で状態を確認しよう

ファイルを作ったら、Gitの状態を確認してみましょう。

git status

以下のように赤い文字で表示されるはずです：

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        index.html

これは「新しいファイルがあるけど、まだGitに記録されていない」という意味です。

赤い文字で表示されるファイルが、まだ追跡されていないファイルです。

次のステップで git add して記録対象に追加します。

💡 ヒント
赤い表示は「まだ git add されていない」という意味です。次のステップでステージに追加します。

参考: Git レッスン2: はじめてのGit操作

4

add して commit しよう

ファイルをステージに追加して、最初のコミットを作りましょう。

git add .
git commit -m "プロフィールページを作成"

コミットが成功すると、以下のように表示されます：

[main (root-commit) xxxxxxx] プロフィールページを作成
 1 file changed, XX insertions(+)

git status で「nothing to commit, working tree clean」と表示されれば、全ての変更が記録されています。

git log --oneline でコミット履歴を確認してみましょう。

💡 ヒント
git add . で全ファイルをステージに追加し、git commit -m "メッセージ" で記録します。メッセージは「何をしたか」がわかるように書きましょう。

参考: Git レッスン2: はじめてのGit操作

5

GitHubにリポジトリを作ろう

GitHubで新しいリポジトリを作成し、ローカルと接続しましょう。

  1. GitHubにログインし、右上の「+」→「New repository」をクリック
  2. Repository name に my-profile と入力
  3. 「Add a README file」のチェックを外す
  4. 「Create repository」をクリック

作成後、ターミナルで以下を実行します：

git remote add origin https://github.com/ユーザー名/my-profile.git
git branch -M main

git remote -v で接続先が正しく登録されたか確認できます。

URL のユーザー名部分は自分の GitHub ユーザー名に置き換えてください。

git branch -M main はメインブランチの名前を「main」に設定するコマンドです。

💡 ヒント
GitHubでリポジトリを作るとき、「Add a README file」のチェックは外してください（チェックすると push でエラーになります）。

参考: Git レッスン3: GitHubに公開

6

push して公開しよう

いよいよGitHubにコードを送信します！

git push -u origin main

push 成功時の出力例:

Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 320 bytes | 320.00 KiB/s, done.
To https://github.com/ユーザー名/my-profile.git
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

認証を求められたら:

GitHubのパスワードではなく Personal Access Token が必要です。

GitHub → Settings → Developer settings → Personal access tokens → Generate new token で作成できます。

スコープは repo にチェックを入れてください。

成功したら、GitHubのリポジトリページ（https://github.com/ユーザー名/my-profile）をブラウザで開いてみましょう。

index.html が表示されていれば完成です！🎉

おめでとうございます！自分のコードをGitHubに公開できました。これがプログラマーとしての第一歩です。

発展課題:

・CSSファイルを追加してデザインを整え、再度 git add . → commit → push してみよう

・GitHub Pages（Settings → Pages → Source: main）で実際のWebページとして公開してみよう

・README.md を追加して、リポジトリの説明を書いてみよう

💡 ヒント
git push -u origin main でローカルの main ブランチをGitHubに送信します。GitHubのリポジトリページをリロードして、index.html が表示されれば成功です！

参考: Git レッスン3: GitHubに公開

🎯

⚠️ つまずいたら