GitHubを使って（git pushで）、Netlifyでサイトを公開する

　webを検索すると、GitHubを使って（git pushで）、Netlifyでサイトを公開する記事はたくさんあります。しかし私は、git pusuは公式の方法でうまくいかず、Netlfyとの連携もうまくいかず、難渋しました。
　いくつかの記事を組み合わせて、何とか成功したので、備忘録を兼ねて記事にします。
 　同じところでつまづいている方への、参考となればと思います。

## おおまかな流れ
GitHubへのpush、Netlifyとの連携

## 手順
1.　GitHubにリモートリポジトリを作る
2.　Visual Studio Codeでローカルリポジトリを作成し、GitHubのリモートリポジトリへPushする。
3.　NetlifyからGitHubリモートリポジトリへの連携

## 1.　GitHubにリモートリポジトリを作る
**【GitHubでの作業】 GitHubにリモートリポジトリを作る**
### ①　TOPページ、左側のTop Repositoriesにある「New」ボタン（またはRepositories画面右上の「New」ボタン）を押す。
![GitHub トップ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/309ff6c0-76b7-5f24-ee2e-507f9ae7186e.png)
又は、
![GitHub リポジトリページ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/76c0567b-69b1-280c-f421-628ef67ac8c1.png)

### ②　Repository nameのみ入力、一番下のCreate repositoryボタンを押してリポジトリを作成する。
※　Repository nameは今回「test」としています。
※　公開はPublic, Privateのどちらでも可。
※　Initialize this repositoriy with: の Add a README file　はチェックしない。

![GitHub リポジトリ新規作成画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/f235067e-a737-6a75-cdeb-9dd7e89ef039.png)

下のような画面となれば作成は成功。「USER ID」は後程使用するのでコピーしてメモっておく。
![GitHub リポジトリ新規作成直後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/556c79fe-2c0a-3c67-3028-0db9ad9cdec3.png)


## 2.　Visual Studio Codeでローカルリポジトリを作成し、GitHubのリモートリポジトリへPushする。
**【VScode上での作業】**
### ①　Visual Studio Codeでディレクトリとファイルを作成
**PCの適当な場所に新しいフォルダを作り、VScodeで開く**
（例として「test」というファイルを作成しVSCodeで開いています）。
ターミナル画面を開く（Ctrl + @）。

![VSCode 開くところ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/61c3d98a-63c3-2b2f-afb5-705850573030.png)



#### ターミナルに、以下のコマンドを順次実行する。
```:ターミナル
mkdir github
```
（開いているディレクトリに「github」というディレクトリを作成する：この名前は何でもよいです。）

![mkdir github.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/9908c8d3-c7a3-1499-847d-d75ab1cfc635.png)


```:ターミナル
cd github
```
（「github」ディレクトリを開く〔移動する〕）

![cd github.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/fe9e7072-6c12-d57f-6197-01d9d123f0b4.png)


```:ターミナル
mkdir public
```
（開いているディレクトリ（github）に「public」というディレクトリを作成する：この名前は必ず「public」で作成してください。）

![mkdir public.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/f3c0f78d-5ed0-4925-04d5-e8b1c7a461d3.png)


### public内に、index.html、netlify.tomlを作成
 （VSCodeの左側の上「＋」をクリックして新規ファイル作成）

![index.html、netlify.tomlを作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/06ce139e-a0fc-bd20-56ba-899ee86f430b.png)

#### 以下の内容をコピぺする。
```html:index.html
Hello World
```
![index.htmlの中身.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/9e496a90-b280-eeff-b4d9-b137cea4d246.png)


```:netlify.toml
[build]
  publish = "public/"
```
![netlify.tomlの中身.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/4a8ae9a3-c7c1-0895-664b-7689decf7627.png)


保存する（Ctrl + S）。

### ②　ローカルリポジトリを作成し、GitHubへpushする。
**ターミナルに戻り、順次以下のコマンドを実行する。**

```:ターミナル
git init
```
(ローカルリポジトリ作成)
![git init.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/71efeb86-f528-a1bf-cf21-f7370463756a.png)

![ファイル中身（git init後）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/59cb2591-e187-8597-b5cd-7a0f8d5793f1.png)


```:ターミナル
git add .
```
(ローカルリポジトリのindex内にファイル内容が書き込まれる)
![git add.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/0a091e58-5a81-a4ff-1222-c4d858e3f1b0.png)

![ファイル中身（git add後）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/b7071f28-01cc-ee0b-d425-a3b722ae757a.png)



```:ターミナル
git commit -m "Initial commit"
```
（コミットする：ローカルリポジトリ内に登録される）

![git commit -m Initial commit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/8fbd52a8-a4e8-ad93-82aa-84a326d7c5cb.png)

![ファイル中身（comit後）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/a6a14312-e843-ef5e-56ec-4182ee874bad.png)


ここで、「Auther identity unknow」とメッセージが出る場合には、user.emailと、user.nameを登録する必要があります。
![git commit のuser情報エラー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/94bb0628-f395-0d6a-2856-863344966416.png)
![githubへuser情報登録.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/fb07a8a2-abc5-fd1a-e33a-1e5e99492a10.png)

```:ターミナル
git remote add origin https://github.com/(USER ID)/test.git
```
（ローカルリポジトリと、リモートリポジトリを連携させる）

![git remote add orgin https.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/97a46463-6941-39b0-06fb-5f5c0b5f5fd7.png)

```:ターミナル
git push origin master
```
（"main"だとpush出来ない（下記のつまづきポイントに解説します）。"master"とすると、masterというbranchが形成され、そこにpushされる）
![git push origin master.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/0ae09282-6517-82f1-cfd3-165bdfa8d357.png)
![ファイル中身（push後）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/ab6d26ae-e6c8-4942-22c7-0d9ed1b9d538.png)

ここで、「Authentication（認証）」を聞かれた場合、認証を行います。
認証を、ブラウザーで行うか、Codeで行うか聞かれます。
（スクショ取るの忘れました）
私は　ブラウザーで行う　を選択しました。しばらくすると、以下の画面が表示されます。
![Authentication（認証）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/4ac6594c-4268-812f-69e2-13d938d91fe1.png)
![Authentication（認証）VSC.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/68937efe-0526-d6c6-9225-b3d5f3a0122e.png)


## 3.　NetlifyからGitHubリモートリポジトリへの連携
【Netlifyでの作業】

Sites画面の右上「Add new site」ボタンを押すとプルダウンがあり、「Inport an existing project」をクリック。

![Netlify new site作成01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/7b88ddb5-606a-cf5a-b1bc-eb9d59d6c2e3.png)


Let's deploy your project. の画面では、
「Deploy with GitHub」をクリック

![Let's deploy your project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/8541b15a-7e43-cbb9-8c0f-7273a80a8191.png)


GitHubのリポジトリ一覧が表示、連携させたいリポジトリをクリックして選択
![Netlify リポジトリ選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/43c4ad44-f083-26f2-2b5f-0eb4a8ab466e.png)


Team、Branch to deploy　は自動に入力されている
（自分の場合は、Teamは「(Team名)」、Branch to deployは「master」　と初めから入っている。）
（※Build commandには何も入力しない：下記のつまづきポイントで解説）
Publish directoryに「public/」（VSCodeで作成したフォルダ名）と入力（必ず後ろに「/」を付ける）。
一番下の「Deploy (リポジトリ名)」ボタンをクリック。

![Let's deploy your project02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/ee98eb40-cccc-62d7-45d8-bcb91e0bbc1a.png)






## つまづきポイント（試してうまくいかなかったところ、ハマったところ）

### 【つまづき1】　初めに試したこと（間違いだらけ）
**リモートリポジトリ作成**
<font color="red">Add a RESDME file</font>　にチェックしてリポジトリを作成。
![GitHub リポジトリ新規作成画面 README fileチェック.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/fbef4184-365e-53a9-9dd7-30c46579f757.png)

本文（上記）の1.②の時と異なり、「main」というブランチが自動に作成され、その中にREADMEファイルが作成される。

![GitHub リポジトリ新規作成 README fileチェックした場合.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/820d82ea-3b94-ca7a-ca10-b0fce8ec4c27.png)



**VSCodeでローカルリポジトリ作成**
　PC上に作成したフォルダを開き、中にファルダ（github）を作り、その中にindex.htmlファイルを作成。
 <font color="red">開いている場所は大元ファイル（test）のまま</font>、公式サイトの案内通り（…or create a new repository on the command line）にターミナルにコマンドを入力。
```
echo "# test" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/(user name)/test.git
git push -u origin main
```
git push -u origin main とすると、下のエラーが出たので、
![push エラー01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/fbc31fd4-f2e0-9398-93ea-7c3339d8b1a1.png)

https://qiita.com/Ayumu-y/items/7fb229f624d458ddacd1
を参考に、
```
git fetch origin
git reset --hard origin/main
```
とコマンド入力。
その後、再度　git push -u origin main を入力すると、下のメッセージが出るので、push出来ていると思いきや、出来ていない（無反応）。
![push エラー02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/001fd572-9446-09bf-fb49-1007ab263be0.png)

この「main」ブランチが曲者。
GitHubへpush時に「main」ブランチがあるからといって、
**git push origin main**　とコマンド入力してもpush出来ない。
**git push origin master**　とコマンド入力すれば、「master」というブランチがmainの下に新たに形成され、そこにpushされる（mainというブランチは残る）。しかしpushすら出来ない時もある。

### 【つまづき2】
　今度は、 <font color="red">開いている場所を下のフォルダ（githubフォルダ）</font>とし、公式サイトの案内通り（…or create a new repository on the command line）にターミナルにコマンドを入力。
　下の様にうまくいった様なメッセージが出るので、push出来ていると思いきや、出来ていない（無反応）。
![push エラー03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2165076/9e93a8f3-3b3b-8579-56ea-a953c89c3d14.png)

### 【つまづき3】



#### NetlifyとGitHubのリモートリポジトリを連携させるところの設定

　<font color="red">**Build commandに、コマンドを入力してはならない！**</font>
　参考とするwebサイトには「npm run build」「yarn build」とあるが、Buildに失敗する。

　エラーの要因が分からず、ChatGPTにそのまま放り込んでみたところ様々な解決策の回答が得られたが、順次試すも全て失敗。
  
### 【つまづき4】
Publish directoryにフォルダ名を入力する時、「/」を付け忘れると、Buildでエラーが出る。
「public/」はOK、「public」ではだめ。

## 参考にしたサイト

https://qiita.com/suin/items/743fe6252ad8af425c5e
https://qiita.com/thinkalot/items/b3c2e9060f46f5d4ea46
https://qiita.com/shozzy/items/dadea4181d6219d2d326
https://qiita.com/Ayumu-y/items/7fb229f624d458ddacd1