Help us understand the problem. What is going on with this article?

Cloud9で作成したソースコードをGitHubに保存する手順

More than 1 year has passed since last update.

cloud9-git-01.png

はじめに

Cloud9を利用しているGit初心者向けに、Cloud9で作成したソースコードをGitHubに保存する手順を解説します。

前提条件

  • Cloud9のアカウント、ワークスペースは作成済み
  • GitHubアカウントは作成済み

もくじ

 1. Cloud9で作成したソースコードをGitHubに保存

  1-1. 【Cloud9】ローカルリポジトリを作成
  1-2. 【Cloud9】ソースコードをコミット
  1-3. 【GitHub】リポジトリを作成
  1-4. 【Cloud9】リモートリポジトリを登録
  1-5. 【Cloud9】ソースコードをプッシュ

 2. Cloud9で修正したソースコードをGitHubに反映

  2-1. 【Cloud9】ソースコードの修正
  2-2. 【Cloud9】ソースコードをコミット
  2-3. 【Cloud9】ソースコードをプッシュ

 3. GitHubで修正したソースコードをCloud9に反映

  3-1. 【GitHub】ソースコードの修正
  3-2. 【GitHub】ソースコードをコミット
  3-3. 【Cloud9】ソースコードをマージ

準備

操作は画面下部のターミナルで実施します。

cloud9-git-02.png

操作できるターミナルがない場合は+ > New Terminalで新しいターミナルタブを用意できます。

cloud9-git-03.png

1. Cloud9で作成したソースコードをGitHubに保存

1-1. 【Cloud9】ローカルリポジトリを作成

gitでのバージョン管理をはじめるためにgit initコマンドでローカルリポジトリ(保管場所)の作成&初期化を実施します。

$ git init

Initialized empty Git repository in /home/ubuntu/workspace/.git/

ローカルリポジトを作成するとプロンプトにmasterと表示されます。
これは現在の作業ブランチを表しています。

cloud9-git-04.png

1-2. 【Cloud9】ソースコードをコミット

git statusでコマンドでリポジトリの状態を確認できます。

以下の例では

  • 現在のブランチはmasterです
  • まだコミットされてません
  • 追跡対象になってないファイル(README.md,hello-world.html)があります
  • git addコマンドでファイルをコミット対象に含めることができます

と表示されてます。

$ git status

On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        README.md
        hello-world.html

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

ソースコードをコミット対象にするためにgit add <filename>コマンドを実行します。

$ git add README.md
$ git add hello-world.html

補足
- filenameにワイルドカードを指定して、git add *とすることも可能です

ステータス確認を行うと、git addコマンドで指定したファイルがコミット対象になったことがわかります。

$ git status

On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

        new file:   README.md
        new file:   hello-world.html

git commit -m <message>コマンドでコミットを実行します。

[message]部分にはどのような変更を行ったかを記述しますが、最初のコミットではfirst commitinitial commit初回コミットなどとしても問題ありません。

$ git commit -m "first commit"

[master (root-commit) 8c9db4c] first commit
 2 files changed, 88 insertions(+)
 create mode 100644 README.md
 create mode 100644 hello-world.html

ステータス確認を行うと、(コミットが実行された後に)変更されたファイルがない状態であることがわかります。

$ git status

On branch master
nothing to commit, working tree clean

1-3. 【GitHub】リポジトリを作成

Cloud9でバージョン管理の準備が整ったので、今度はGitHubでソースコードを保存する準備を行います。

GitHubでソースコードの保管場所(リポジトリ)を用意するために+ > New repositoryを選択します。

cloud9-git-05.png

Create a new repositoryページでRepository name(リポジトリ名)を入力してCreate repository(リポジトリを作成)ボタンをクリックするとGitHub上にソースコードの保管場所(リポジトリ)が作成されます。

cloud9-git-06.png

補足:
Githubの無償アカウントで作成できるのはPublicリポジトリのみです。
Publicリポジトリの内容は誰でも閲覧することができるため、秘密の情報(パスワードなど)をソースコードに直接記述しないように注意が必要です

リポジトリ作成直後はページ上にソースコードの保存に利用するURLが表示されてます。
このURLを利用してCloud9からGitHubにソースコードを送ります。

cloud9-git-07.png

1-4. 【Cloud9】リモートリポジトリを登録

Cloud9からGitHubにソースコードを送るために、Cloud9のターミナル上でgit remote add <name> <url>コマンドを実行します。

補足:
nameはローカルリポジトリ上でのリモートリポジトリの名称(呼び名)になります。
慣例的にoriginと名付けることが多いです。

urlにはGitHubで作成したリポジトリのURLを指定します。

以下のコマンドを実行すると「Cloud9上のローカルリポジトリでは リモートリポジトリ(https://github.com/xxx/xxx.git) をoriginという名前で登録するよ」という意味になります。

$ git remote add origin https://github.com/xxx/xxx.git

登録したリモートリポジトリの情報はgit remotegit remote -vコマンドで確認できます。

$ git remote
origin
$ git remote -v

origin  https://github.com/xxx/xxx.git (fetch)
origin  https://github.com/xxx/xxx.git (push)

1-5. 【Cloud9】ソースコードをプッシュ

git push <repository> <branch>コマンドを実行して、Cloud9上のソースコードをGitHubに送信します。

補足:
repositoryにはリモートリポジトリの名称(本投稿内ではorigin)を指定します。
branchにはローカルのブランチ名(本投稿内ではmaster)を指定します。

コマンドを実行するとGitHubのUserName,Passwordを聞かれるので入力します。

$ git push origin master
Username for 'https://github.com': xxx
Password for 'https://xxx@github.com': xxx

Counting objects: 4, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 1.34 KiB | 1.34 MiB/s, done.
Total 4 (delta 0), reused 0 (delta 0)
To https://github.com/xxx/xxx.git
 * [new branch]      master -> master

GitHubでリポジトリページを確認すると、Cloud9上で作成したソースコードが閲覧できるようになってます。

cloud9-git-08.png

2. Cloud9で修正したソースコードをGitHubに反映

2-1. 【Cloud9】ソースコードの修正

Cloud9上でソースコードを修正します。

cloud9-git-10.png

前回コミット時との差分はgit diffコマンドで確認することができます。

$ git diff

diff --git a/hello-world.html b/hello-world.html
index 3ace1d0..272d7bf 100644
--- a/hello-world.html
+++ b/hello-world.html
@@ -54,7 +54,7 @@ var myText = document.getElementById("helloText");
 myButton.addEventListener('click', doSomething, false)

 function doSomething() {
-       myText.textContent = "hello, world!!";
+       myText.textContent = "hello, GitHub!!";
 }
 </script>

2-2. 【Cloud9】ソースコードをコミット

新しいファイルを追加した場合は、git add <filename>コマンドを実行します。

$ git add <filename>

新しいファイルを追加してない場合はgit commit-aオプションをつけることで、変更されたファイルを対象にしてコミットを実行することが出来ます。

$ git commit -am "表示テキストを修正"

[master 9e5fb52] 表示テキストを修正
 1 file changed, 1 insertion(+), 1 deletion(-)

2-3. 【Cloud9】ソースコードをプッシュ

ソースコードのプッシュは初回と同様です。

$ git push origin master
Username for 'https://github.com': xxx
Password for 'https://xxx@github.com': xxx

Counting objects: 3, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 369 bytes | 369.00 KiB/s, done.
Total 3 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To https://github.com/xxx/xxx.git
   8c9db4c..9e5fb52  master -> master

GitHubのリポジトリページを見ると修正内容が反映されています。

cloud9-git-11.png

branchページでは過去の変更を閲覧することができます。

cloud9-git-12.png

3. GitHubで修正したソースコードをCloud9に反映

3-1. 【GitHub】ソースコードの修正

簡易な修正であれば、GitHub上でソースコードを修正することも可能です。
README.mdの修正だけであればGitHub上で修正を済ませてしまうケースが多いです。

GitHub上で対象のファイルを開いてEdit this file(鉛筆マーク)ボタンをクリックすると編集モードになります。

cloud9-git-20.png

3-2. 【GitHub】ソースコードをコミット

ファイルの修正が完了したら、画面下部のフォームでCommit Changesボタンをクリックすることで修正内容が保存されます。

cloud9-git-21.png

cloud9-git-22.png

3-3. 【Cloud9】ソースコードをマージ

Cloud9(ローカルリポジトリ)にGitHub(リモートリポジトリ)の修正内容を反映するためにはgit pull <name> <branch>コマンドを実行します。

補足:
repositoryにはリモートリポジトリの名称(本投稿内ではorigin)を指定します。
branchにはローカルのブランチ名(本投稿内ではmaster)を指定します。

$ git pull origin master

remote: Counting objects: 3, done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 3 (delta 1), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), done.
From https://github.com/xxx/xxx
 * branch            master     -> FETCH_HEAD
   9e5fb52..f8b32ff  master     -> origin/master
Updating 9e5fb52..f8b32ff
Fast-forward
 hello-world.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

Cloud9上の操作を行わずにソースコードの変更が行われたため、変更を反映してよいかを確認するダイアログが表示されます。今回はGitHubからpullしたソースコードが最新のためUse Remoteボタンをクリックします。

cloud9-git-23.png

Cloud9上でソースコードを確認するとGitHub上の変更が反映されてることがわかります。

cloud9-git-24.png

NaokiIshimura
Ruby on Rails Engineer.
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした