このページでは、STEP1 で Cursor に作ってもらったサイトのファイルを GitHub（ギットハブ） に保存し、Cursor と連携するところまでやります。
前回の記事はこちらです。
【STEP1】Cursor のインストールから AI と最初のサイトを作るまで｜初心者向け AI サイト開設講座
STEP1 の段階では、サイトはまだ自分のパソコンの中だけにあります。
この状態でも練習はできますが、今後、本格的に開発を進めていく場合に、パソコンが壊れたり、ファイルを間違えて消しちゃったりすると大変困ります。
そこで今回は、サイトのファイルをオンライン上で安全に保存・管理できるようにします。
その保存先が GitHub というサービスです。
「オンラインにファイルを保存する」というのが少し怖く感じる人もいるかもしれません。
しかし、そういうものなんだなとご認識いただければいいです。
そして、また別のサービスを使うのか、と構える必要もありません。
最初にやることは、ざっくり言うと サイトの保存先を作って、Cursor からそこへ送る だけです。
1. GitHub とは？
GitHub は、コードやファイルをオンライン上で保存・管理できるサービスです。
サイトで使うファイル（HTML、CSS、JavaScript、Markdown など。今は覚えなくていいです） を GitHub に保存しておくと、次のようなメリットがあります。
- サイトのファイルをオンライン上にバックアップできる
- 変更履歴が残り、いつどういう更新をしたのか等が管理・把握できる
- パソコンが壊れた場合、別のパソコンから最新の状態で作業再開できる
- 開発に失敗して最新版のサイトが壊れておかしくなってしまっても、簡単に前の状態に戻せる
- Cursor や Vercel（STEP4 で説明） など、他のサービスと連携しやすい
今回のシリーズでは、この GitHub を サイトの保存場所 として設定します。
次の STEP3 では、その保存場所に、実際に保管していきます。
そして STEP4 では、GitHub に保存したファイルを使って、インターネット上に公開して誰でも見れる状態にします。
つまり、
Cursor でサイトを作る
↓
GitHub に保存する
↓
GitHub に公開したファイルでインターネット上に公開する（誰でも見れる状態になる）という流れです。
2. Git と GitHub の違い
ここで少しだけ、ややこしい名前を整理しておきます。
Git
GitHub の名前にも入っている Git は、ファイルの変更履歴を管理する仕組みです。
例えば、
- いつ
- どのファイルを
- どのように変更したか
を記録できます。
サイトの記事を書いたり、デザインを直したりした時に「この変更を記録しておこう」と残すための仕組み自体のことを指します。
GitHub
GitHub は、その Git の仕組みを利用し、Git の履歴をオンライン上に保存できるサービスです。
実は、GitHub 以外にも Git の仕組みを利用したサービスはあります。
Git = 変更履歴を管理する仕組み
GitHub = その仕組みを使って、変更履歴をオンラインに保存する場所というざっくりのイメージを持ってもらうだけで大丈夫です。
この記事に通りに、必要な作業を順番に進め進めていけばさらにイメージが深まっていくと思います。
3. Git の仕組み
Git は「変更履歴を管理する仕組み」と説明しました。
では、実際にはどのように変更履歴を管理しているのでしょうか。
Git では、「コマンド」というものを使って「変更を記録するファイルを選ぶ」「選んだファイルをオンライン（GitHub）へ送る」といったいろいろな操作を行います。
「コマンド」とは、私たちが Git を操作したい時に送る「指示」のようなものです。
「～してね」ということを、決められた言葉で伝えます。
今回の記事で最初に覚えておきたいコマンド（決められた言葉）は、次の4つです。
- status：パソコンの中で変更したファイルや保存状況を確認する 「どのファイルを変更したっけ？」と Git に聞いたら、「このファイルが変更されたよ」と教えてくれるイメージ。
- add：変更したファイルの中から、Git に記録するものを選ぶ 「このファイルの変更内容を記録する準備をしてね」と Git に伝えたら、「わかった！準備しました！」と Git が対応して返信してくれるイメージ。
- commit：選んだファイルの変更内容をパソコンの中に記録する 「準備した変更内容を記録してね」と Git に伝えたら、「記録しました！」と Git が対応して返信してくれるイメージ
- push：記録した変更内容をオンライン上の GitHub へ送る 「（パソコンの中に）記録した変更内容を（オンライン上の）GitHub に送ってね」と Git に伝えたら、「（オンライン上の）GitHub に送りました！」と Git が対応して返信してくれるイメージ。
この4つが分かれば、まずは十分です。
4. commit と push をもう少し詳しく
commit（コミット） と push（プッシュ） の違いがつかみづらい方もいるかもしれません。
別の表現も使いながらそれぞれについてもう少し説明します。
commit
commit は、今の変更内容を「パソコンの中に」「ここまで保存」と記録する作業です。
ゲームで言うと、物理的なゲームソフトに保存する「セーブデータ」みたいなものですね。
セーブするとゲームソフトにセーブデータが作成されるように、commit するとパソコンに変更内容が記録されます。
push
push は、commit した内容を GitHub に送る作業です。
自分のパソコンの中に保存した変更内容を、オンライン上の GitHub にアップロードする感じです。
ゲームで言うと、物理的なゲームソフトに保存した「セーブデータ」を、オンラインのあなたのゲームアカウントにも保存する、みたいなイメージです。
そうすると、ゲームソフトが壊れて同じものを買ったり、別のゲーム機で同じゲームを遊んだりするときでも、オンライン上のセーブデータを読み込めば続きからプレイできます。
これが、「commit はパソコン内に保存」「push はオンライン上（GitHub）に保存」という両者の違いです。
（Cursor、Git、GitHub、commit、push など英単語が続々と出てきますが、使っているうちに勝手に覚えるので覚えようとしなくて大丈夫）
5. GitHub アカウントを作成する
まずは GitHub のアカウントを作成します。
①GitHub にアクセスする
GitHub 日本語公式サイト にアクセスします。
「サインアップ」ボタンをクリックします。
②アカウント登録（サインアップ）する
案内に沿って、アカウント登録します。
- Google アカウントで登録する方は「Continue with Google」ボタンをクリック。
- Apple アカウントで登録する方は「Continue with Apple」ボタンをクリック。
- メールアドレスで登録する方は、各種情報を入力して「Create Account」ボタンをクリック。
Username は、GitHub 上で表示される名前です。
Username のルールとして、半角の「英数字・ハイフン(-)」のみ使用でき、ハイフンで開始または終了することはできません。
あとから変更することもできますが、あなたの GitHub アカウントの URL にも使われるため、最初から分かりやすい名前にしておくのがおすすめです。
GitHub Copilot は AI によるコード補完サービスですが、Cursor に同様の機能があるため本記事では設定しません。
Email Preferences は、GitHub のアップデートやお知らせをメールで受け取りたい方はチェックをつけます。
③メール認証を済ませる（メールアドレスで登録した場合）
メールアドレスで登録した場合、GitHub から確認メールが届いたら、メール内の案内に従って認証を完了します。
メールで届いた数字のコードを GitHub の画面に入力するだけです。
ここまで終われば、GitHub アカウントの準備は完了です。
なお、Google や Apple アカウントでログインして登録した場合は、通常、メール認証はないかと思います。
6. 新しいリポジトリを作成する
次に、サイトのファイルをの変更内容を保存する場所を GitHub 上に作ります。
この保存場所のことを リポジトリ（Repository） と呼びます。
「リポジトリ」という言葉がちょっと難しいですが、今は GitHub 上のフォルダ・箱 くらいに考えて大丈夫です。
①リポジトリ作成画面 を開く
GitHub にログインした状態で、トップページ にアクセスしてください。
緑色の「New」ボタンをクリックして、新しいリポジトリ作成画面を開きます。
②リポジトリ名 を入力する
Repository name には、サイト用の名前を入力します。
例えば次のような名前です。
my-blog
my-site半角の「英数字・ハイフン・アンダーバー」が使えます。
短くて覚えやすい名前するのが推奨です。
「Discription」は特に記入不要です。
③公開範囲を選ぶ
リポジトリには、公開範囲があります。
- Public：誰でも見られる
- Private：自分や招待した人だけが見られる
ここ（Choose Visibility）は Private を選んでください。
④Add README、Add .gitignore、Add license は全て Off または NO ～ にする
Add README は Off にする。
README は、このプロジェクトの説明を書くためのファイルです。
例えば、
- このプロジェクトは何をするものなのか
- 使い方
- 開発者向けの説明
などを書きます。
今回は自分のサイトを管理するためのリポジトリですし、公開範囲が「Private」なので、今は README を追加する必要はありません。
Add .gitignore は No .gitignore にする。
.gitignore は、GitHub に送らないファイルを指定するための設定ファイルです。
例えば、
- 一時的に作成されるファイル
- パソコンごとの設定ファイル
など、GitHub で管理すべきでないファイルの変更内容を、誤って GitHub に送らないようにできます。
あとで Cursor に .gitignore を作成してもらうため、ここでは追加しません。
Add license は No License にする。
license（ライセンス）は、このソースコードを他の人がどのような条件で利用できるかを示すものです。
Add license は、そのライセンスファイルを追加するための設定です。
今回は自分のサイトを管理することが目的であり、公開範囲を「Private」にするのでライセンスは不要です。
入力できたら「Create repository」をクリックします。
7. 作成したリポジトリの詳細画面を確認する
「Create repository」をクリックすると、画面が切り替わり https://github.com/ユーザー名/リポジトリ名 のような URL になります。
例えば、ユーザー名が sample-user、リポジトリ名が my-blog の場合は、次のようになります。
https://github.com/sample-user/my-blogこれは、あなたがいま作成したリポジトリに関する情報が表示された画面です。
今は、「リポジトリの情報が書かれた画面があるんだな」くらいの認識で大丈夫です。
この画面は、あとで Cursor と GitHub を連携する際に使います。
8. Cursor で作成したサイトを Git で管理するための初期設定をする
ここからは、Cursor と GitHub を連携するために、Cursor 側で作業をしていきます。
①Cursor にログインする
STEP1 でインストールした Cursor デスクトップに既にログイン済みの方は、この説明は飛ばして次に進んでください。
ログインされていない方は、Cursor を起動して、ご自身がサインアップした方法でログインしてください。
②Terminal を開く
Terminal（ターミナル）とは、パソコンに指示を出す画面、とイメージしてもらえればと思います。
Git の仕組み で説明した git add や git commit などの指示は、この Terminal で行います。
ようやくここで、2つの点が1つの線で繋がった感覚になったんじゃないでしょうか。
Terminal は下記画像の赤枠の部分をクリックすると開くことができます。
もし、上記の画像と異なる場合は、「View」メニューをクリックして「Terminal」を選択すれば大丈夫です。
なお、Terminal を開くと、Windows の方は「powershell」、Mac の方は「zsh」や「bash」と表示されていると思います。
Window の Terminal プログラムは「Powershell」という名前、Mac の Terminal プログラムは「Zsh」や「Bash」という名前、というだけですので、気にしないでください。
③Terminal で行う指示の対象に、サイトのフォルダを指定する
Terminal でパソコンに指示を出す際には、具体的にパソコンの中のどのフォルダに対する指示なのか、を指定する必要があります。
Terminal の画面を確認してみてください。
下記のような表示がされていると思います。
Windows の場合：PS C:\Users\ユーザー名\Projects\サイトのフォルダ名>
Mac の場合：user@hostname:~/Projects/サイトのフォルダ名$※「Projects」は私の Cursor が勝手に作成しただけなので、他の名前になっている人や、ユーザー名の直下にサイトのフォルダがある人もいるかもしれません。
これは、すでにどのフォルダ内で指示を実行するのか指定されている状態です。
なので、ここでは実際に作業は必要ありませんが、Terminal ではフォルダの指定が必要だ、ということは覚えておくとよいです。
④Terminal で「git init」コマンドを実行する
Git の仕組みでは説明しませんでしたが、最初に git init というコマンドを実行します。
これは、このサイトのフォルダを Git で管理できるようにするための初期設定 です。
まだ GitHub のリポジトリとは接続されません。
まずは、「このフォルダは Git で変更履歴を管理していくよ」と Git に教える作業だと思ってください。
一度設定してしまえば、今回のサイトにおいては git init を今後行うことはありません。
それでは、下記をそのままコピーして、Terminal に張り付けて Enter を押してください
git init
下記のように表示されていれば成功です。
Initialized empty Git repository in C:/Users/パソコンのユーザー名/Projects/サイトのフォルダ名/.git/
Initialized とは「初期化しました」という意味です。
これで、このサイトのフォルダを Git で管理する準備が整いました。
次に、GitHub で作成したリポジトリと接続していきます。
⑤Terminal で「git remote add origin」コマンドを実行してリポジトリに接続する
このコマンドも git init と同じく一度だけ行いますので、Git の仕組みで説明しませんでした。
git init しただけでは、まだ GitHub のリポジトリと接続されていません。
言い換えると、「このサイトのファイルを、GitHub のどのリポジトリへ送ればよいのか」という情報を、まだ Git は知りません。
そこで git remote add origin というコマンドを使って、このサイトのフォルダを GitHub のリポジトリ（保存場所）と接続（紐づけ）します。
まず 「## 7. 作成したリポジトリの詳細画面を確認する」で確認したリポジトリのトップページを開いてください。
リポジトリのトップページの開き方がわからない方は、下記の URL の「ユーザー名」と「リポジトリ名」を、ご自身のものに置き換えてアクセスしてください。
https://github.com/ユーザー名/リポジトリ名この画面で HTTPS が選択されていることを確認し（左の赤枠）、表示されている URL をコピーします（右の赤枠）。
続いて Cursor の Terminal に戻り、次のように入力します。
git remote add origin https://github.com/ユーザー名/リポジトリ名.gitgit remote add origin の後ろに半角スペースを入れ、先ほどコピーした URL を貼り付ければよいです。
実行すると、何も表示されずに次の入力待ちになると思います。
エラーが表示されなければ成功です。
このコマンドは、「このサイトは、この URL の GitHub リポジトリで管理します」と Git に教えるための設定です。
これで、GitHub に変更内容を送るための準備が整いました。
以上で「8. Cursor で作成したサイトを Git で管理するための初期設定をする」が完了です。
丁寧を意識しすぎて想定以上に長くなりすぎたので、STEP2 はここまでにします。
STEP3 では、いよいよパソコンの中にあるサイトのファイルを、GitHub に反映していきます。
9. よくある質問
Q. GitHub は無料で使えますか？
はい。
今回のように個人でサイトを管理する用途であれば、無料で十分使えます。
Q. リポジトリは Public にするとだめですか？
誰に見られてもよいのであれば Public でもいいと思いますが、GitHub や Git の仕組みに慣れないうちは Private をお勧めします。
エンジニアの方などでない限り プログラムを公開したいと思う人はあまりいないのでは、とも思っています。
Public にする場合、個人情報、秘密のメモ、API キー、パスワードなどを入れている場合は絶対に公開しないでください。
そもそも、パスワードなどの秘密情報は GitHub に保存しないのが基本です。
Q. コマンドがよくわからず、実行するのが怖いです
めちゃくちゃ分かります。
Cursor も GitHub もよくわからない英語ばっかりなのがもう怖いですよね。
でも今は、とりあえず作ってみたサイトを、とりあえず作った GitHub の箱に入れてみる、だけなので恐れる必要はありません。
エラーが出たらむしろ学べるチャンスだと思って、一から記事を見直すなり、Cursor にこんなエラーが出た、どういうこと？どうすればいい？と聞いて教えてもらいましょう。
10. まとめ
これで、STEP1 で作成したサイトを GitHub に紐づけることができました。
今回やったことは、次の通りです。
- GitHub アカウントを作成した
- サイト用のリポジトリを作成した
- サイトフォルダをリポジトリに紐づけた（Cursor 内の Terminal から）
STEP3 ではさっそくサイトのファイルを GitHub に反映してきます。
今はまだ「このフォルダ内のファイルは、このリポジトリで管理するよ」という紐づけをしただけです。
11. 次の記事はこちら
👉 【STEP3】Cursor で作成したサイトを GitHub に反映するまでを徹底解説（コマンドも）｜初心者向け AI サイト開設講座
※執筆中です
12. このシリーズの記事
- 【STEP1】Cursor のインストールから AI と最初のサイトを作るまで｜初心者向け AI サイト開設講座
- 【STEP2】GitHub とは？からアカウント登録、リポジトリ作成、Cursor との連携までを徹底解説｜初心者向け AI サイト開設講座（この記事）
- 【STEP3】Cursor で作成したサイトを GitHub に反映するまでを徹底解説（コマンドも）｜初心者向け AI サイト開設講座
- 【STEP4】Vercel でサイトを無料公開する方法
- 【STEP5】Astro で高速なWebサイトを作る方法
- 【STEP6】Markdown で記事を書く方法