🟢 はじめに
みなさんは、一生懸命作ったポートフォリオのソースコード、どうやってバックアップしていますか？
パソコンが突然壊れたら…と想像すると怖いですよね😱
わたしは、ソースコードのバックアップと、就職活動で企業の担当者さんに作品を見てもらうための方法として、GitHub（ギットハブ）を活用しています。
今回は、わたしが実際にポートフォリオ（今回は「Lumapuyo」というパズルゲームを例にします！）をGitHubに公開した手順を、 初心者の方にも分かりやすいように、例え話を交えながらご紹介します🔰
🧐 GitとGitHubってどんな関係？
コマンドを打つ前に、少しだけイメージを共有します。
ローカル（自分のパソコン）：
あなたの手元の「作業机」💻
GitHub：
インターネット上にある「みんなが見れる展示室」と「大きな倉庫」
リポジトリ：
作品を入れておく「専用の箱」📦
これからやる作業は、「手元の作業机にある作品を、きれいに箱詰めして、インターネット上の展示室に送り出す」というイメージです🚚
📦 STEP1: GitHubに「空の箱（リポジトリ）」を作ろう！
まずは下準備として、GitHub上にソースコードを入れるための「空の箱」を用意します。
GitHubの画面右上から「New repository」をクリックして、以下の設定をします。
1️⃣ Repository name: xxxx （作品名。今回はシンプルにアプリの名前などにします）
2️⃣ Public を選択（企業の人にも見てもらうため、公開設定にします👀）
3️⃣ ❌ Add a README file: チェックを外したまま（OFF）にしてください！
🤔 なぜREADMEは作らないの？（よくある落とし穴）
理由は「あとで自分のパソコン側から送る時に、中身がぶつかって（競合して）エラーになるのを防ぐため」です。
最初は完全な空箱を作っておくのが、一番スムーズな流れです。
🌟 余裕があれば：Description（説明文）を書こう
どんな作品か、英語で一言添えておくと親切です。
例：JavaScript puzzle game focused on game feel and UX design
※ .gitignore や License も一旦OFFでOKです。
まずは「中身のコード」を見てもらうことが最優先！
ライセンス（無難なのはMIT License）や除外設定は、後からでも追加できます。
👉 設定を終えて作成すると、「リポジトリのURL（送り先の住所）」（https://github.com/あなたのユーザー名/作品名.git）が発行されます。
これをコピーしておきましょう📋
💻 STEP2: 自分のパソコンからGitHubへソースコードを送ろう！
ここからはいよいよ、黒い画面（ターミナル）での作業です⌨️
自分のポートフォリオがあるフォルダをターミナルで開きましょう。
フォルダを右クリックして「ターミナルで開く」を選びます。
※VSCodeを使っているなら、ターミナルを開くだけでOKです。
ターミナルが開いたら、順番にコマンドを入力していきます。
① ローカルでGitを初期化する
git init
【例えるなら】：「このフォルダは、これからGitで管理するよ！」という宣言です。
これで普通のフォルダが、管理フォルダに変身します。
② ファイルを箱に詰める準備をする
git add .
【例えるなら】：フォルダの中身（ソースコード）を、すべてダンボールに梱包する作業です📦 （.gitignoreファイルを作っておくと、送らなくていい不要なファイルを除外できます）
③ コミットしてラベルを貼る
git commit -m "Initial commit"
【例えるなら】：梱包したダンボールにガムテープで封をして、「これは最初の完成版だよ」というメモ（ラベル）を貼る作業です📝
この作業で「セーブポイント」が作られます。
④ 送り先の住所（GitHubのURL）を登録する
git remote add origin https://github.com/xxxxxxxx/作品名.git
【例えるなら】：先ほどSTEP1でコピーしたGitHubのURLを、送り状の「お届け先」として登録する作業です🏠
これでパソコンとGitHubが繋がりました！
⑤ GitHubへプッシュ（発送）
git branch -M main git push -u origin main
【例えるなら】：準備完了！実際に宅急便でインターネット上の展示室（GitHub）へ発送する作業です🚚
これでGitHubの画面を更新（リロード）すると、あなたのソースコードが公開されているはずです！
⚠️ もしエラーが出たら？（よくあるミス）
もし、STEP1でうっかりGitHub側で「README」などを作ってしまい、最後の git push で赤いエラーが出てしまった場合…。
これは「手元の箱」と「GitHubの箱」の中身が違うせいで、Gitが「どっちが正しいの！？」とパニックになっている状態です。
そんな時は、落ち着いて以下のコマンドを入力してみてください。
git pull origin main --allow-unrelated-histories
これは、「GitHubにあるものを、手元のパソコンに取り込んで合体させる」という解決のおまじないです。
合体させた後、もう一度 push すれば無事に送れるようになると思います👍
🎁 おまけ：GitHub PagesでWebサイトとして公開しよう！
ソースコードを見せるだけでなく、実際にブラウザ上で動くポートフォリオを見てもらいたいですよね？
静的なサイト（HTML/CSS/JavaScriptだけで動くサイト）なら、GitHubの機能を使って無料でWeb公開できます。
【やり方】
GitHubのリポジトリ画面の Settings（設定） を開く。
左メニューの Pages をクリック。
Branch の部分を None から main に変更し、フォルダを / (root) にして Save を押す。
数分待つと、上部に 「https://あなたのユーザー名.github.io/リポジトリ名/」 というURLが表示されます。
ポートフォリオサイトの公式URLとして活用できます。
📝 まとめ
いかがでしたか？
「箱を用意して、詰めて、ラベルを貼って、送る」という流れをイメージすると、少し身近に感じられると思います😊
ぜひこの手順を見ながら、あなたの素敵なポートフォリオをGitHubに公開してみてくださいね！
同じように「ソースコードをGitHubに公開するやり方がわからない🤯」と悩んでいる方の参考になれば幸いです🙌
