サイト開設

Cursor で作成したサイトを GitHub に反映するまでを徹底解説（コマンドも）

更新:約 17 分で読めます

STEP2 では、Cursor の Terminal から git init、git remote add origin を実行し、サイトのフォルダを GitHub のリポジトリに紐づけるところまでをやりました。

このページでは、引き続き git コマンドを実行していきリポジトリに反映します。

前回の記事はこちらです。

【STEP2】GitHub とは？からアカウント登録、リポジトリ作成、Cursor との連携までを徹底解説

git status で、変更されたファイルを確認する

git status については STEP2 で下記のように説明しました。

**status**：パソコンの中で変更したファイルや保存状況を確認する
「どのファイルを変更したっけ？」と Git に聞いたら、「このファイルが変更されたよ」と教えてくれるイメージ。

上記の説明で「変更」と言っていますが、初めて GitHub に反映するフォルダの場合は基本的に全てのファイルが対象となります。

なお、.gitignore というファイルがある場合、その中で指定されたファイルは GitHub に送られません。（STEP2 ではまだ作っていません）

では、下記をコピーして、Terminal で実行してみてください。

git status

すると、下記のように表示されると思います。 Cursor の Terminal で git status した結果の画面

On branch main

No commits yet

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

nothing added to commit but untracked files present (use "git add" to track)

これは、作成したサイトのフォルダが今どんな状態なのかを教えてくれています。

  • On branch main 　「あなたは現在 main ブランチにいます」という意味です。 　ブランチ（branch）とは、リポジトリの中の作業用の場所みたいなものだと思ってください。 　STEP2 で GitHub リポジトリを作成しましたが、それと同時に main というブランチが自動的に作成されています。 　今は main ブランチしかないので、On branch main となっています。

  • No commits yet 　「まだ一度もコミットしていません」という意味です。

  • Untracked files 　「Git が管理していない・把握していないファイルがあります」という意味です。 　パソコンの中には、css/ や index.html などのサイトを構成するファイルがありますが、まだ GitHub リポジトリに反映していないためこのように表示されます。 　なお、私の場合は上記に記載の5つのファイルとフォルダになっていますが、これは Cursor が生成してくれたものなので、人によって数もファイル名も異なる可能性があります。

  • (use "git add <file>..." to include in what will be committed) 　「commit の対象に含めるなら、このファイルたちを add してね」という意味です。 　STEP2 で説明した通り、add → commit → push の順に実行します。

  • nothing added to commit but untracked files present (use "git add" to track) 　「commit するものは何も追加されていませんが、Git で管理されていないファイルがあります（管理するなら add してね）」という意味です。

git add で、記録するファイルを選ぶ

git status を実行した結果、add してねとのことでしたので、git add していきます。

なお、STEP2 では git add については下記のように説明しました。

**add**：変更したファイルの中から、Git に記録するものを選ぶ
「このファイルの変更内容を記録する準備をしてね」と Git に伝えたら、「わかった！準備しました！」と Git が対応して返信してくれるイメージ。

git add では、どのファイルを Git で管理するのか（commit するのか）を指定する必要があります。

  1. 全部を Git で管理するには git add .

add の後ろに「半角スペース」と「半角ドット」がついています。

これは、Terminal で指定されたフォルダ内のファイルや変更内容を、すべて commit の対象にします。（初回は未登録のファイルも含みます）

たとえば下記のようなケースで使います。

  • 今回のように、初めて GitHub に変更内容を送る場合
  • GitHub に反映した後にローカルで加えた変更について、変更したファイル全ての変更内容を送る場合

一方で、git add index.html post.html のように、特定のファイルを指定することもできます。

ファイルを指定する場合は、下記のようなケースです。

  • ファイルを2つ修正したが、そのうち1つはまだ未完成で1つだけ先に GitHub に反映したい場合
  • ファイルを2つ修正したが、そのうち1つは別のサイト用のファイルであり反映先の GitHub リポジトリが別であるという場合

では、下記をコピーして、Terminal で実行してください。

今回は、ファイルを指定せず、「半角スペース」「半角ドット」をつけて、全てのファイルを対象にしています。

git add .

特にメッセージは表示されませんが、問題なく実行できているはずです。

もう一度、git status で状況を確認してみましょう。

git status で再度状況を確認する

git status

git add した後に git status すると、下記のように表示が変わっていると思います。 Cursor の Terminal で git add 後に git status した結果の画面

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
        new file:   あなたのファイル名
        new file:   あなたのファイル名

また、new file: あなたのファイル名 の文字が緑色になっていますね（git add する前は赤色でした）

  • Changes to be committed: 　これは、「コミット予定の変更」という意味です。 　git commit すると、緑色で表示されていたファイルがパソコンの中（Git の履歴）に記録されます。

  • (use "git rm --cached <file>..." to unstage) 　これは、「もしステージから外したいなら git rm –cached を使ってね」という意味です。 　わかりやすく言うと、git add したファイルをコミット対象から外せます。 　git rm --cached index.html post.html という風にファイルを指定して実行します。 　その後に git status すると、Changes to be committed の new file:～ からそれらのファイルが表示されなくなります。 　そして、Untracked files: として再度表示されることになります。

選んだファイルの変更内容を、git commit でパソコン内に記録する

git commit については、STEP2 で下記のように説明しました。

**commit**：選んだファイルの変更内容をパソコンの中に記録する
　「準備した変更内容を記録してね」と Git に伝えたら、「記録しました！」と Git が対応して返信してくれるイメージ

git add で commit するファイルを選びました。

それらのファイルの変更内容を、パソコンの中へ保存するのが git commit です。

では、下記を Terminal で実行してください。

git commit -m "サイトの初回公開"

-m の後ろの “サイトの初回公開” は、この変更内容につけるメモです。

-m は message の略です。

例えば、

○○の記事を追加
トップページのデザインを変更

など、あとから commit 履歴を見返した時に、その commit では「何を変更したのか」が分かるような名前を付けます。

今回は初めて GitHub に反映するので、「サイトの初回公開」としました。

実行すると、下記のような表示になります。 Cursor の Terminal で commit した結果の画面

[main (root-commit) xxxxxxx] サイトの初回公開
x files changed, XXXX insertions(+)
create mode 100644 あなたのファイル名
create mode 100644 あなたのファイル名
create mode 100644 あなたのファイル名

  • main 　保存先のブランチです。

  • (root-commit) 　これは、そのリポジトリへの最初の commit の時にだけ表示されるものです。

  • xxxxxxx の部分に表示される文字列は「コミットID」です。 　コミットIDとは、コミットした時に Git が自動で付ける一意の識別文字列です。 　「一意」なので、基本的には同じIDが別の人のコミットや自分の別のコミットにつくことはありません。

  • x files changed, XXXX insertions(+) 　x 個のファイルに変更があり、それらのファイルに合計で xxxx 行が追加された、という意味です。 　x の部分には実際には数字が入ります。

  • create mode 100644 あなたのファイル名 create mode 6ケタの数字 は、今回の commit で新しく Git で管理されるようになったファイルの、種類や権限（モード）を表していますが、特に覚えることも気にすることもしなくて大丈夫です。 なお、簡単にだけ説明すると、100644 という数字は前3桁と後ろ3桁にそれぞれ意味があり、前3桁はファイルの種類、後ろ3桁はファイルのアクセス権限を表します。 じゃあファイルの種類が 100 ってどゆこと？ 644 の権限の意味は？がどうしても気になる場合は調べてもらえればよいですが、ここでは割愛します。

パソコン内に記録したファイルの変更を、git push で GitHub のリポジトリに反映する

ここまでで、変更内容はパソコンの中には保存されました。

しかし、まだ GitHub には送られていません。

そこで最後に使うのが git push です。

STEP2 では下記のように説明しました。

**push**：記録した変更内容をオンライン上の GitHub へ送る

「（パソコンの中に）記録した変更内容を（オンライン上の）GitHub に送ってね」と Git に伝えたら、「（オンライン上の）GitHub に送りました！」と Git が対応して返信してくれるイメージ。

つまり、

git add
↓
記録する準備

git commit
↓
パソコン内に保存

git push
↓
GitHub に保存

という流れになります。

では、下記を実行してください。

git push -u origin main

初めて push を実行する場合は、GitHub のログイン画面や認証画面が表示されることがあります。

その場合は、画面の案内に従って GitHub にログインしてください。

少し待つと、下記のように表示されます。 Cursor の Terminal で push した結果の画面

To https://github.com/ユーザー名/リポジトリ名.git
...
branch 'main' set up to track 'origin/main'.

これで、パソコン内に保存した変更内容が GitHub に送られました。

なお、-u は最初の一度だけ付ければ大丈夫です。

2回目以降は、基本的に git push だけで GitHub に反映できます。

GitHub 側で反映されているか確認する

最後に、本当に GitHub に反映されているか確認します。

GitHub を開き、STEP2 で作成したリポジトリのページへアクセスしてください。

画面を更新すると、Cursor で作成したファイルが一覧で表示されているはずです。 Cursor の Terminal で push した結果の画面

例えば、今回のシンプルなサイトの場合は、

css
js
index.html

などのファイルやフォルダが表示されます。

ファイルが表示されていれば成功です。

ファイル名は AI が作ったサイトの種類によって変わります。

大事なのは、Cursor の中にあったサイトのファイルが GitHub 上にも表示されていることです。

これで、サイトのファイルは

  • パソコンの中
  • GitHub

の両方に保存されている状態になりました。

今後サイトを書いたりデザインを変更したりした時も、

git status
↓
git add
↓
git commit -m "コミットメモ（変更内容など）"
↓
git push

という流れで GitHub を更新していきます。

新しいページを作る、既存のページを修正する、など更新があるたびに行うようになりますので、すぐに慣れます。

次から変更した時の流れ

一度 GitHub への push ができたら、次回以降は基本的に下記の流れになります。

ファイルを変更する
↓
git add .
↓
git commit -m "変更内容のメモ"
↓
git push

この、GitHub に push するまでの一連の作業も Cursor にお願いすればやってくれるのですが、少なくとも慣れるまでは自分でやることをお勧めします。

なお、Cursor に依頼する場合は、必要な修正が終わったあとに次のように伝えます。

今変更した内容を確認して、問題なければ分かりやすいメッセージで commit し、GitHub に push してください。
初心者にも分かるように、何を変更したか説明してください。

すると、Cursor が変更内容を確認して GitHub へ反映してくれます。

何が変更されたのかも説明してくれます。

よくある質問

Q. commit メッセージは英語で書かないとダメですか？

日本語でも大丈夫です。

ただ、短く分かりやすく書くのがおすすめです。

例えば、

トップページを作成
プロフィール文を修正
記事を追加

のような感じで問題ありません。

まとめ

これで、STEP1 で作ったサイトのファイルを GitHub に保存できました。

今回やったことは、次の通りです。

  • git status で変更されたファイルを確認した
  • git add で記録するファイルを準備した（commit 対象ファイルの選択）
  • add したファイルを git commit でパソコン内に記録した（push 対象ファイルの確定）
  • GitHub に push した（パソコン内に記録した最新の状態を、GitHub に同期）

ローカル（パソコンの中）で作業した内容を、オンライン（GitHub）で管理できるようになった状態です。

次は、GitHub に保存したサイトをいよいよインターネット上に公開していきます。

次の記事はこちら

GitHub にサイトを保存できたら、次はサイトを簡単に公開・管理できるサービス Vercel を使ってサイトを無料で公開します。

👉 【STEP4】Vercel でサイトを無料公開する方法

このシリーズの記事

#GitHub#Cursor#初心者向け#サイト
← ブログ一覧に戻る