【学習】GlitchとGithub、プッシュってどうやるのか？

# はじめに
GlitchとGithubの連携がいまいちわからず、Vscodeを使用してブランチ作成してaddとcommitとpushの方法がよくわからなかったので手探りですがそれっぽくできたのか？を記事にまとめておきたいと思います。
ついでに今回の方法はGlitchのサイトにあるプロジェクトをGithubでいうフォークをして、自分のリポジトリ？に反映させてから、ブランチ作成して編集して、pushするまでになります
Vscodeなどのターミナルは使用せず、Glitchにあるターミナルからコマンドを実行していきます。


## プロジェクトRemixからpushまで
GlitchでRemixしたプロジェクトをGitHubに挙げる方法。
手探りで行った内容なので誤りがあったらすいません。


まず、プロジェクトをRemix
この段階でmainブランチにいる状態でファイルを作成している。


・ブランチを作成
下タブ「Terminal」を押すとターミナルが出現する
今の状態で作業しているファイルを新しいブランチで管理したいので、新しいブランチを作成してそこに切り替える
つまり、現在の作業内容を新しいブランチに移行する
```
git checkout -b new-feature-branch

※ブランチ名は例です
```


・GitHubでリポジトリを作成
Githubにあげるために、Glitchで作業しているプロジェクトと同名のリポジトリをReadmeファイル付きで作成する。

・Githubにエクスポート
新しいブランチにいる状態ですTools＞Inport/export＞Export to Github
Git hub側でプルリクエストとConfirmしますが、デフォルトでは「glitch」ブランチでプルリクエストされる。
とりあえずRemix後はブランチを新しく作成しても、ほかの作業は何もせずにエクスポートだけ実行。「glitch」ブランチで。

・改めて新たに作成したブランチでファイルを変更していく
試しにReadmeの内容を少し修正。
ターミナルで今度はコマンドを実行してみる。

おそらくToolsからのエクスポートは設定を変えないとデフォルトで「glitch」ブランチというものになってしまうから。


・Vscodeのターミナルでも実行していたコマンドを試す
```
git status
git add .
git commit -m 'コメント'
git push
```

ここで`git push`を実行したら下記のようなエラー文が表示
```
fatal: No configured push destination.
Either specify the URL from the command-line or configure a remote repository using

git remote add <name><url>

and then push using the remote name

git push <name>
```

Gitがプッシュ先のリモートリポジトリ（GitHubなど）を認識していないことを示しています
なので、GitHubリポジトリのURLを使ってリモートリポジトリを追加します。
該当リポジトリの「<>Code」を押すとURLを確認できます。
※ショートカットキーでコピペはなぜかできずGlitchターミナルにURL貼り付けの際はマウス右クリックで「はりつけ」を選択してください。
```
git remote add origin https://github.com/yourusername/your-repository.git

正しく追加されたか確認
git remote -v

次のような出力がされれば大丈夫なはずです
origin  https://github.com/yourusername/your-repository.git (fetch)
origin  https://github.com/yourusername/your-repository.git (push)

再度新たに作成したブランチでpushを試してみる
git push origin ブランチ名
```

ここで、少し間違えたかもしれない出来事
再度新たなブランチ名でpushしましたが次のような出力結果が表示されました。
```
Username for 'https://github.com': ユーザー名を入力
Password for 'https://yourusername@github.com': パスワード入力
remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
```
> GitHubは2021年8月13日から、パスワードによる認証をサポートしていません。これにより、GitHubにプッシュする際には、アクセストークンを使用する必要があります。

とのことなのでトークン設定します
設定は下記参照
### 1. GitHubアクセストークンの作成
1. **GitHubにログイン**し、右上のプロフィールアイコンをクリックして「**Settings**」を選択します。
2. 左側のメニューから「**Developer settings**」を選びます。
3. 次に「**Personal access tokens**」をクリックし、「**Tokens (classic)**」を選択します。
4. 「**Generate new token**」をクリックします。
5. トークンに名前を付け（例: "Glitch Access Token"）、必要なスコープ（権限）を設定します。通常、以下の権限を選択します:
    - `repo`: プライベートリポジトリにアクセスするために必要です。
6. 「**Generate token**」ボタンをクリックします。
7. 生成されたトークンをコピーします。このトークンは後で使用しますが、再表示されないため、必ずメモしておいてください。

### 2. GitHubでの認証
次に、トークンを使って認証します。Gitを使用してプッシュするときに、ユーザー名としてGitHubのユーザー名を、パスワードとして先ほどコピーしたトークンを使用します。

### コマンド例:
```bash
git push origin ブランチ名

Username for 'https://github.com': ユーザー名を入力
Password for 'https://yourusername@github.com': 先ほど生成したアクセストークンをペースト
```

### 3. トークンのキャッシュ（オプション）
毎回トークンを入力するのが面倒な場合は、トークンをキャッシュすることもできます。以下のコマンドを使用します。
```bash
git config --global credential.helper cache
```
このコマンドを実行すると、一定時間トークンがキャッシュされ、次回以降のプッシュ時には再度入力する必要がなくなります。

#### もしかしたら？
今回`git remote add origin https://github.com/yourusername/your-repository.git`でリモートリポジトリを追加しましたが「HTTPS」ではなく「SSH」で実行したらアクセストークンパスワード求められなかったのかもしれません。（試してはいない）
`git remote add origin git@github.com:yourusername/repository-name.git`
こんな感じのコード。

## 新しいブランチでpushできた？
上記の流れでGithubの該当リポジトリを確認しに行ったらちゃんと新しいブランチ名でpushできていました
[![Image from Gyazo](https://i.gyazo.com/ed695a9351065833ca1ec3fb79bcea1b.png)](https://gyazo.com/ed695a9351065833ca1ec3fb79bcea1b)


## さいごに
作成はできたけど毎回アクセストークンは正直手間なので再度作り直してみたいと思います。

うーん、手探り難しいですね。何かよい方法があれば教えていただきたいです。:sweat_smile: