【初心者向け】Spring Tool Suite から GitHub に Push する手順（Windows）

# はじめに

Spring Tool Suite（STS）でプロジェクトを GitHub に Push（アップロード）するまでの手順をメモを残しておきます。
環境は、Windows です。

＜参考サイト＞
[Eclipseで一通り基本的なGitを使ってみる](https://www.takaiwa.net/2012/10/eclipsegit.html)
[STSで作成したプロジェクトをGitHubにアップロード（連携,push）する方法](https://confrage.jp/sts%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92github%E3%81%AB%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%EF%BC%88%E9%80%A3/)
[STSで作成したSpringプロジェクトのGitHub連携メモ](https://qiita.com/ecoyamas/items/33a85dd40a0ffb06b9ae)

# 1. サンプルプロジェクトの作成

サンプルとして、適当にプロジェクトを作成します。
![2021-08-07 092622.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/90365ee5-1967-8736-baf7-ba7aa5a7a680.png)
![2021-08-07 092533.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/c09da71f-2aaa-7d6d-a067-6565b17cc404.png)
<details><summary>（参考）記載したコード</summary><div>
特に不要なところですが、一応、記載したコードを載せておきます。
Spring Tool Sweet（STS）のメニューから、「File」→「New」→「Spring Starter Project」でプロジェクト作成。
選択したライブラリは、「Spring Web」と「Thymeleaf」のみです。

**① コントローラー**

```/src/main/java/com/example/demo/SampleController.java
package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping
public class SampleController {
	@GetMapping
	public String index() {
		return "index";
	}
}
```

**② HTML ファイル**

```/src/main/resources/templates/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h2>Hello World!</h2>
</body>
</html>
```
</div></details>

# 2. ローカルリポジトリの作成

プロジェクト名を右クリックして、「Team」→「Share Project」を選択します。
![2021-08-07 092915.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/a3ae86fd-5e3a-8afc-04ae-faf95e1c0d55.png)

次の画面が表示されますので「Use or create repository in parent folder of project」にチェックを入れます。
![2021-08-07 093010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/5018734e-66f9-a65b-89c5-4609aabc559d.png)

チェックを入れると次の画面が表示されます。
ここで対象のプロジェクトを選択すると（青にすると）、「Create Repository」のボタンが押せるようになるので、クリックします。
![2021-08-07 093103.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/121972e9-fa71-fcb4-0d97-ab24f53ee858.png)

次のように、対象プロジェクトにチェックが入ります。
そのまま「Finish」をクリックすれば、ローカルリポジトリが作成されます。
![2021-08-07 093133.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/b4aa3051-e4e2-ac66-de71-92ac13ec5127.png)

# 3. コミットしてmasterブランチを作成

プロジェクト名を右クリックして、「Team」→「Commit」を選択します。
![2021-08-07 093657.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/0785078a-4f12-2b60-3094-9f0e0b69afc8.png)

次の画面が表示されたら、赤枠の「全てのファイルを選択」ボタンをクリックして、「unstaged Changes」にある全てのファイルをコミットの対象にします（左側の「＋」ボタンで、必要なファイルだけを選択して追加することもできます）。
![2021-08-07 093918.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/856ca84d-1c73-9d1c-ec3b-9845e134d31c.png)

追加したファイルが「Staged Changes」に移動していることが確認できたら、「Commit Message」を記入します。
何でも良いのですが、ここでは「Initial Commit」としておきました。
最後に「Commit」ボタンを押せば、masterブランチが作成されます。
![2021-08-07 094012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/2a7e4f40-cc5d-6d42-35fb-e30fedc05d7f.png)
※　なお、ここで「Commit and Push」ボタンから、すぐに GitHub に Push することもできます（手順が異なりますので「[こちらの記事](https://confrage.jp/sts%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92github%E3%81%AB%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%EF%BC%88%E9%80%A3/)」を参照してください）。

# 4. .gitignoreファイルを確認する

プロジェクトにあるファイルのうち Git の管理外に置きたいファイルは、「.gitignore ファイル」に記載することで管理の対象外とすることができます。

この .gitignore は、ローカルリポジトリの作成時に自動で生成されています。
しかし、デフォルトの状態では Package Explorer には表示されていませんので、これを表示されるようにしておきます。

Package Explorer の「View Menu」ボタン（赤枠のところ）から「Filters」を選択します。
![2021-08-07 094621.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/8ccec916-aa26-e8d3-338b-269c32bfb167.png)

次のように「.* resources」のチェックを外します。
![2021-08-07 094658.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/b0b20a35-884e-b428-3b28-a1fef60500b7.png)

こうすることで、.gitignore ファイルが表示されるようになります。
よく分らないうちは、以下のデフォルトの設定のままで問題はないと思います。
![2021-08-07 094812.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/228b1930-2674-4f99-a6f8-995d7b8bf17e.png)

# 5. GitHubにリポジトリを作成

[GitHub](https://github.co.jp/) に Push するには、あらかじめリポジトリを作成しておく必要があります（STS から自動でリモートリポジトリを作る機能は無いようです）。
GitHub のアカウントの作成方法は、数多のサイトで紹介されていますので、そちらを参考にしてください（例えば「[GitHubアカウントの作り方](https://k-sasaking.net/programing/github-siginup/)」など）

ログインした画面から、次のように「New repository」を選択します。
![2021-08-07 094412.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/f1709bcb-75df-ac10-66c3-961e1375ea99.png)

リポジトリの作成画面が出てきますので、名前（Repository name）を付けて、必要に応じて、Public（公開）か Private（非公開）かを選択します。
それ以外のチェックは不要です（チェックすると不要なブランチが作成されてしまいます）。
「Create repository」をクリックすると、リポジトリが作成されます。
![2021-08-07 135300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/0a0b4579-421a-9667-0e9d-567632141906.png)

# 6. リモートリポジトリにPushする

以上の準備が整ったら、リモートリポジトリに Push します。
プロジェクト名を右クリックして、「Team」→「Remote」→「Push」を選択します。
![2021-08-07 100731.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/e947d456-0cd8-4850-a7b9-fa31481e61af.png)

## 6-1. Destination Git Repository

次の、Destination Git Repository という画面が出てきますので、ここで Push 先のリポジトリを指定することになります。
![2021-08-07 100659.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/af1d5a15-3a82-8cc4-722a-3b1decf9fcc6.png)

「URI」のところに、先ほど作成した GitHub のリポジトリの URL を入力（コピペ）します。
この URL には、リポジトリ自体の URL「`https://github.com/ユーザー名/リポジトリ名`」を入れる必要があります。
入力すると、自動的に Host と Repository path が補完されます。

そして、Authentication のところに、GitHub の自身のユーザー名（User）とパスワード（Password）を入力して「Next」ボタンをクリックします。
![2021-08-07 100824.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/2499c5fc-3353-205e-1a5f-782dd6d779d0.png)

## 6-2. Push Ref Specifications

次に、Push Ref Specifications（Push 参照仕様）という画面が出てきます。
これは、正直あまりよく分りませんが、ローカルブランチからリモートブランチへの参照方法を定義するもののようです。
![2021-08-07 100854.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/cf427ff9-6bc9-c40a-9527-dc4b26b9aa8d.png)

次のサイトを参考にして（日本語に翻訳して）、一応の設定をしていきます。

＜参考サイト＞
[Pushing to remote repositories](https://querix.com/go/lycia/Content/05_workbench/01_ls/04_how_to/10_repo/git/remote/push_to_remote.htm)

**① Add create/update specification（追加作成/更新の仕様）**
ここでは、リモートブランチにマップするローカルブランチを指定するとのことです。
「Source ref」のところで「master[branch]」を指定しておきます。
![2021-08-07 101142.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/b54efd03-a54c-2b86-8fc5-841e514ad2de.png)

**② Add predefined specification（事前定義された仕様の追加）**
ここには、事前定義された仕様が組み込まれているとのことです。

「Add All Branches Spec」は、「ローカルブランチ名を Push 先のリポジトリ上の同じブランチ名にマップすることを宣言している」とのことで、とりあえずクリックして追加しておきます。

「Add All Tags Spec」は、「ローカルタグをプッシュ先のリポジトリ上の同じタグに1つずつマップすることを宣言している」とのことで、これもクリックして追加しておきます。
![2021-08-07 101356.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/8bf66755-fae3-3db0-cfe0-39c2b5a32c53.png)
最後に「Finish」をクリックすれば、リモートリポジトリへの Push が完了します。

次の画面が出てきたら「Close」をクリックします。
![2021-08-07 101422.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/eaf0d5f2-a84e-d5ff-3179-93b32c250504.png)

# 7. GitHubのリポジトリを確認

無事に Push できたかを、GitHub で確認しておきます。

リポジトリの URL `https://github.com/ユーザー名/リポジトリ名` にアクセスします。
次のように、ソースコードが無事に Push されていれば完了です。
![2021-08-07 135845.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/cc94ae63-5858-8a61-6dfa-897d5b00ff27.png)

# 8. ブランチの作成とPush

一応、新しいブランチも作成しておきます。
手探りで操作してますので、回りくどい形になっているかもしれません。

## 8-1. ブランチの作成

プロジェクト名を右クリックして、「Team」→「Switch To」→「New Branch」を選択します。
（なお、この `Switch To` のところで、ブランチの切り替えも簡単にできます。）
![2021-08-07 124114.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/ba0cb645-2d20-586e-10ee-9d1398486822.png)

次の画面でブランチ名を入力します。
「Finish」を押せば、ブランチの作成が完了します。
![2021-08-07 124104.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/19b2553e-aadf-08c9-a6b0-c30cc397d462.png)

Package Explorer で、新しいブランチに切り替わっていることが確認できます。
![2021-08-07 131235.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/6affb8b5-11df-c6a3-b190-7e896813c665.png)

## 8-2. ファイルの修正内容をコミットする

ファイルの内容を変更しておきます。
ここでは、index.html ファイルの「Hello World!」を「Hello GitHub!」に変更しておきました。
![2021-08-07 130633.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/bd5ff200-75da-6a52-41b0-64d39a4c1296.png)

プロジェクト名を右クリックして、「Team」→「Commit」を選択します。
![2021-08-07 124708.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/7315b81a-fa8e-5789-9799-642c478ad5e3.png)

修正したファイルが「Staged Changes」にあることを確認して、「Commit Message」を記載します。
ここでは「update_html_file」としておきました（急にスネークケースにしましたが意味はありません）。
最後に「Commit」ボタンを押してコミットが完了します。
![2021-08-07 124852.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/f5ba6f03-0d2d-63d1-4664-edd7448542e7.png)

## 8-3. 新しいブランチをリモートにPushする

プロジェクト名を右クリックして、「Team」→「Push Branch '新しいブランチ名'」を選択します。
![2021-08-07 125556.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/da72e93b-a49b-dc14-313b-cfeedae43ff4.png)

「URI」に、リポジトリのURLを入力して、GitHub のユーザー名、パスワードを入力して「Preview」をクリックます。
![2021-08-07 125657.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/303e2b97-ce68-f42e-608f-bdf9229d0738.png)

次のような設定で「Preview」をクリックます。
![2021-08-07 125714.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/c7e16b6a-c1ad-b49c-1c6b-aa80f0922d9c.png)

「Push」をクリックすると、リモートリポジトリに反映されます。
![2021-08-07 125736.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/38faa4a9-2b7a-7e43-b8b8-70542d91d0f9.png)

次の画面が出てきますので「Close」を押します。
![2021-08-07 125757.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/796cadd0-9125-7eef-6043-8b547b0bb1d8.png)

GitHub のリポジトリにアクセスすると、無事に新しいブランチが Push されていることが確認できました。
![2021-08-07 141221.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551412/59d6ce8d-dab2-fb50-0d7a-d54ce32ca54d.png)

以上