作ったものを、
世界に置く。

01

なぜ履歴を残すのか

ファイルを直していると、必ず「昨日の状態に戻したい」瞬間が来ます。そのときのために、フォルダを複製して名前を付けていく方法があります。site_旧、site_修正版、site_本当に最終。誰もが一度は通る道ですが、すぐに破綻します。

Git は変更の履歴を記録しておく道具です。区切りのいいところで「ここまでを 1 つの記録にする」と宣言していくと、あとからその地点に戻ったり、どこで壊れたのかを探したりできます。ひとりで作るときでも十分に元が取れます。

02

Git を使えるようにする

ここからはターミナル（Windows なら Git Bash やターミナル、macOS ならターミナル.app）を使います。1 行ずつ打って Enter、それだけです。まず入っているか確かめましょう。

git --version
# git version 2.51.0 のように出れば入っています

何も出ずにエラーになったら、git-scm.com からインストールしてください。macOS なら xcode-select --install でも入ります。入ったら、最初の 1 回だけ次の設定をします。

# 記録に残る名前とメールアドレス。GitHub と同じものにしておくと分かりやすい
git config --global user.name "Your Name"
git config --global user.email "you@example.com"

# 最初のブランチ名を main にする（昔は master でした）
git config --global init.defaultBranch main

# 設定できたか確認する
git config --global --list

03

リポジトリを作る

履歴を記録する対象のフォルダをリポジトリと呼びます。作りたいサイトのフォルダへ移動して、git init と打つだけです。

# サイトのフォルダへ移動する（パスは自分のものに置き換えてください）
cd ~/Documents/my-site

# ここを Git の管理下に置く
git init

# 今どうなっているかを見る
git status

.git という隠しフォルダが 1 つできます。ここに履歴のすべてが入ります。このフォルダを消すと履歴も消えますので、触らないでください。逆に言えば、Git をやめたくなったら .git を消すだけで元のただのフォルダに戻ります。

記録しないものを決める（.gitignore）

フォルダの中には、履歴に入れたくないものが混ざります。macOS が勝手に作る .DS_Store、エディタの設定、そしてパスワードや API キーです。.gitignore という名前のファイルを作り、そこに書いたものは Git が最初から見なくなります。

# OS が勝手に作るもの
.DS_Store
Thumbs.db

# エディタの設定
.vscode/
.idea/

# 秘密の値。絶対に履歴へ入れない
.env
*.key

# ライブラリを入れたときに増えるもの
node_modules/

04

add と commit

Git がややこしく感じるのは、ファイルの置き場所が 3 つあるからです。ここさえ掴めば、あとの操作はほとんど暗記が要りません。

作業ツリー

いま編集しているフォルダそのもの。保存しただけのファイルはここにいます。Git はまだ何も記録していません。

ステージ

次のコミットに入れるものを並べておく台。git add でここに載せます。3 つ直したうち 2 つだけを記録する、といった選び方ができます。

リポジトリ

確定した履歴。git commit で、台に載っているものがまとめて 1 つの記録になります。

# 何が変わったかを確認する。迷ったら、いつでもこれ
git status

# 台に載せる。ファイル名を指定するか、. で全部
git add index.html
git add .

# 台に載っているものを 1 つの記録にする
git commit -m "トップページの見出しを書き直した"

# 直したら、また add して commit。この繰り返しです

コミットメッセージの書き方

メッセージは未来の自分への手紙です。凝る必要はありませんが、何をしたのかが一行で分かるようにします。

• 「何を」ではなく「何のために」。index.html を修正 より 問い合わせ先の電話番号を新しい番号に変えた。
• 1 コミット 1 目的。配色の調整と誤字修正を混ぜると、あとで片方だけ戻せません。
• 日本語で構いません。読むのは自分です。update と fix だけが並ぶ履歴より、ずっと役に立ちます。

05

履歴を読む

記録したものは、いつでも取り出せます。よく使うのは、一覧を見る log と、変えた中身を見る diff の 2 つです。

# 履歴を 1 行ずつ、新しい順に
git log --oneline

# a1b2c3d 問い合わせ先の電話番号を新しい番号に変えた
# 9f8e7d6 トップページの見出しを書き直した
# 4c5b6a7 最初のコミット

# まだコミットしていない変更を、行単位で見る
git diff

# 台に載せたあとの変更を見る
git diff --staged

# あるコミットの中身を見る（先頭の 7 文字で足ります）
git show 9f8e7d6

git log や git diff の表示が長いときは画面が固まったように見えますが、閲覧モードに入っているだけです。q を押せば抜けられます。ここで慌てて閉じてしまう人がとても多いので、覚えておいてください。

06

元に戻す

Git を使う最大の理由がこれです。戻し方は「どこまで進んでしまったか」で変わります。まだコミットしていないなら git restore、もうコミットしたなら git revert です。

# 編集を捨てて、最後のコミットの状態に戻す
git restore style.css

# フォルダ全部を戻す
git restore .

# add したのを取り消す（台から降ろすだけ。編集内容は残る）
git restore --staged style.css

# 2 つ前のコミットの時点の中身を取り出す
git restore --source=HEAD~2 style.css

# コミットそのものを取り消す（打ち消すコミットが 1 つ増える）
git revert 9f8e7d6

checkout ではなく restore と switch

古い記事では、ここで git checkout というコマンドが出てきます。間違いではありませんが、checkout は「ファイルを戻す」と「ブランチを移動する」というまったく別の仕事を 1 つで兼ねていたため、とても分かりにくいコマンドでした。

そこで Git 2.23（2019 年）で役割が 2 つに分けられました。いまから覚えるなら、こちらだけで十分です。

名前を見れば何をするコマンドか分かる、というのが新しい方の良いところです。restore は復元、switch は切り替え。他人の記事で checkout を見かけたら、この表で読み替えてください。

07

GitHub に置く

ここまでの履歴は、あなたのパソコンの中にしかありません。GitHub はその控えをインターネット上に預けておく場所です。パソコンが壊れても残りますし、次章の Netlify はここを見て公開してくれます。

1. アカウントを作る

   github.com で登録します。個人利用は無料です。

2. 空のリポジトリを作る

   右上の ＋ から New repository。名前を付けて Create。README や .gitignore を追加するチェックは外しておくと、この後がすんなり進みます。

3. 手元のフォルダと結びつける

   作成後の画面に出るコマンドをコピーするだけです。下に同じものを載せています。

4. 送る

   git push で、履歴がまるごと GitHub に上がります。

# 送り先に origin という名前を付けて登録する（URL は自分のものに）
git remote add origin https://github.com/username/my-site.git

# ブランチ名を main にそろえる
git branch -M main

# 送る。-u は「次からは git push だけでいいよ」という意味
git push -u origin main

# 2 回目以降は、これだけ
git push

なお GitHub Pages という、GitHub だけで公開できる仕組みもあります。それでも本稿で Netlify を使うのは、公開ディレクトリの指定やフォームの受け取り、独自ドメインの設定といった「その次」が、画面から迷わず触れるためです。

08

ブランチで試す

ブランチは履歴の枝分かれです。「うまくいくか分からないけど試したい」ときに、本線を汚さずに作業できます。最初は、この 3 つの流れだけ覚えれば足ります。

# 1. 枝を作って、そこへ移る
git switch -c fix-header

#    ここで好きなだけ編集して、add と commit を繰り返す

# 2. 本線に戻る
git switch main

# 3-a. うまくいったので取り込む
git merge fix-header
git branch -d fix-header

# 3-b. やっぱりやめる場合は、枝ごと捨てる
git branch -D fix-header

いま自分がどの枝にいるかは git branch で確認できます。ブランチを移る前には、必ずコミットを済ませておいてください。中途半端な編集を抱えたまま移ろうとすると、Git が止めてくれます。

09

Netlify で公開する

Netlify は、置いたファイルをそのまま Web サイトとして配信してくれるサービスです。このガイドで作ってきたようなビルドの要らない静的サイトとは、とりわけ相性がいい組み合わせです。無料の枠で個人サイトは十分に運用できます。

いちばん簡単な方法：フォルダを落とす

アカウントを作り、管理画面の指定された枠にフォルダごとドラッグ＆ドロップするだけです。数秒で https://ランダムな名前.netlify.app という URL が発行され、もう世界中から見られます。Git を通しません。まず公開の感触を掴みたいときは、これで十分です。

おすすめ：GitHub とつなぐ

一度つないでおくと、git push するたびに公開サイトが自動で更新されます。手作業でのアップロードが消えてなくなるので、慣れたらこちらへ移ってください。

1. Netlify に登録する

   netlify.com で、GitHub アカウントを使ってサインアップするのがいちばん早道です。

2. Add new site → Import an existing project

   GitHub を選び、公開したいリポジトリを一覧から選びます。

3. ビルドの設定を答える

   Build command は空欄のまま。Publish directory は、index.html が置いてある場所を指定します。ルートに置いてあるなら . のままで結構です。

4. Deploy を押す

   1 分ほどで公開されます。以降は push するだけで、Netlify が勝手に取りに行って更新します。

設定をファイルとして残しておくこともできます。リポジトリのルートに netlify.toml を置くと、管理画面での指定より優先されます。チームで共有するときや、設定をコードとして履歴に残したいときに便利です。

# ビルドの設定
[build]
  publish = "."

# 見つからなかったときに出すページ
[[redirects]]
  from = "/*"
  to = "/404.html"
  status = 404

サイト名は Site configuration から変更でき、https://好きな名前.netlify.app にできます。独自ドメインを持っているなら Domain management から追加してください。HTTPS の証明書は自動で用意され、更新も自動なので、こちらですることはありません。

10

公開したあと

ここまで来れば、日々やることは 3 行になります。直して、記録して、送る。それだけで公開中のサイトが更新されます。

# 毎日の流れは、この 3 つの繰り返し
git add .
git commit -m "営業時間の表記を直した"
git push

# あとは Netlify が勝手に公開してくれる

• 反映されないときは、まず再読み込み。ブラウザが古いファイルを覚えています。Shift を押しながら再読み込みすると、覚えている分を無視して取り直します。
• Netlify の Deploys 画面を見る。公開が成功したか、失敗したかが一覧で分かります。日時が更新されていなければ、push が届いていません。
• 公開前に確認できます。ブランチを push すると、本番とは別の URL でプレビューが作られます。試したいときに便利です。
• 404.html を置いておく。存在しない URL を開かれたときに、トップへ戻る道を用意しておけます。

11

つまずきやすい所

最初のうちに引っかかるのは、だいたい決まっています。ほとんどは手元では動くのに、公開すると動かないという形で現れます。

12

次の一歩

これで、書いたものを人に見せられるようになりました。ここから先は、必要になったときに 1 つずつ足していけば十分です。

• プルリクエスト — 変更を「提案」として見せ、確認してから取り込む仕組み。共同作業の中心です。
• Issue — やることリスト。ひとりでも、思いついた改善をここに溜めておけます。
• GitHub Actions — push をきっかけに、点検やビルドを自動で走らせる仕組み。
• Netlify Forms — お問い合わせフォームを、サーバーを書かずに受け取れます。
• 独自ドメイン — 年に千数百円ほどで、自分の名前の URL にできます。