「完全無料」Webサイト構築入門 (2) — GitHubへの保存とリポジトリ管理

クイックステップ：本章のゴール

「ローカルのコードをGitHubに保存」することを完了させる。

ローカルPCでWebサイト表示に成功したら、次はコードをGitHubに保存する。GitHubにアップロードすることで、プログラムのバックアップになるだけでなく、次章で解説する「自動デプロイ（Webへの公開）」が可能になる。

1. 事前準備：Gitをインストールする (Windows)

コードをGitHubへ送信するには、Gitというツールが必要である。Windowsには標準で搭載されていないため、まずはインストールを行う。

公式サイトからダウンロード Git for Windowsにアクセスし、「Download」ボタンをクリックする。
インストーラーを実行 ダウンロードした .exe ファイルを開く。
- 設定項目がたくさん出てくるが、すべてデフォルト（Next連打）でよい。
インストールを確認 ターミナル（PowerShellなど）を開き、以下のコマンドを入力してバージョンが表示されれば完了である。
Terminal window
```
git --version
```

Gitを始めて使う場合、自分の名前とメールアドレスを登録する必要がある（GitHubのアカウントと同じものを推奨する）。

git config --global user.name "あなたの名前"
git config --global user.email "あなたのメールアドレス"

単なる保存場所としてだけでなく、以下の重要な役割がある。

バックアップ: PCが壊れてもコードを失わない。
変更履歴の管理: 「昨日の状態に戻したい」が簡単にできる。
CI/CD （自動デプロイ）: GitHubにコードを載せる（Pushする）だけで、自動的にWebサイトが更新される仕組み（GitHub Actions）が使える。

まずは、GitHub側に保存箱（リポジトリ）を用意する。

GitHubにログイン GitHubにアクセスしてログインする（アカウントがない場合は作成する）。
新規リポジトリの作成 画面右上の「+」アイコンから「New repository」を選択する。
リポジトリ情報を入力
- Repository name: my-math-site（入門(1)で作ったフォルダ名と同じにすると分かりやすい）
- Public / Private: どちらでも構わないが、Privateでよい。
- Initialize this repository with: 何もチェックを入れない（空のリポジトリを作る）。
「Create repository」をクリック作成後、URL（https://github.com/ユーザー名/my-math-site.git）が表示されるので、これをコピーしておく。

コードを送信する前に、GitHubに送る必要のないファイル（自動生成される大きなファイルなど）を整理する。これを行うのが .gitignore ファイルである。

Astroプロジェクトを作成した時点で、最初から用意されている。

例えば、以下のフォルダはGitHubに送るべきではない。

作成したリポジトリに、PC上のコードを送信する。ターミナルでプロジェクトのディレクトリ（my-math-site）に移動し、以下の手順でコマンドを実行する。

ファイルをステージングに追加 すべてのファイルをGitの管理対象（送信待ち状態）にする。
Terminal window
```
git add .
```
コミット（保存）を実行 現在の状態に名前をつけて保存する。
Terminal window
```
git commit -m "first commit"
```
リモートリポジトリを登録 GitHub上のリポジトリと紐付ける。
Terminal window
```
git remote add origin https://github.com/あなたのユーザー名/my-math-site.git
```
※コピーしたURLを使用すること。
メインブランチ名を確定
Terminal window
```
git branch -M main
```
GitHubへ送信 （Push）
Terminal window
```
git push -u origin main
```

ブラウザでGitHubのリポジトリページをリロードする。 PCの中にあった src フォルダや astro.config.mjs などのファイルが表示されていれば、無事にクラウドへの保存が完了である！

A: GitHubのパスワードではなく「Personal Access Token」が必要な場合がある。または、GitHub Desktop等のGUIツールを使うと認証がスムーズになることがある。

A: git reset コマンドで取り消すことができる。また、.gitignore が正しく設定されているか（node_modules が含まれていないか）を再確認すること。

A: はい、GitHubは現在 Privateリポジトリも無料 で作成・使用可能である。コードを公開したくない場合はPrivateを選ぶとよい。

入門(3)：GitHub Actionsによる自動デプロイ設定 GitHubと忍者ホームページを繋ぎ、コードを更新するだけでサイトが自動更新される魔法の仕組みを作りましょう。

他の記事を探す