WebサイトをGithubPagesで公開！Githubアカウント作成からmergeまで(2023)

## はじめに
私がGithubと出会ったのは大学生の頃、Webサイトにログインするときに猫のアイコンが可愛かったからなんとなくGithubアカウントを作成したってのが始まりでした。


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/3f3704bd-a199-5105-91ee-a0081602a410.png" width="100px" >

猫じゃなかった　　~~たこ？！。。。~~
<img src="https://camo.qiitausercontent.com/81a7bbb96bed26e034d688ef06259f85a9f4455e/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3639383932362f32303466336663302d393663352d613334632d303266302d3961613065393061326239332e6a706567
" width="100px" >


だが、作ったはいいもの何のためにあるのかさっぱり分からなかったのでSign in専用アカウントになりました。

その時の私にGithubってこういうものだよ。というつもりで作成しましたのでよろしくお願いします。
学習の一環で作成しましたので、間違いがあれば指摘していただけると幸いです。

## Githubとは
#### 概要
Githubはオンライン上でソースコードやその変更履歴を共有変更できるサービスのことだそうです。

当時の私にさらに砕いて説明するとファイルの変更履歴を共有できるサービスだよ。Dropboxに変更履歴が見れるようになったものだよ。というものですかね。

今回学習してみてそれだけと思いきや、GithubPagesを使えばWebサイトを全世界に公開することができます！


次のセクションでGithubPagesの使い方を説明します！

#### そもそもgit
そもそもgithubの変更履歴管理はgitというソフトウェアの特徴です。
gitの変更履歴管理をwebベースにプラットフォーム化しプロジェクト管理やチーム管理機能を付与したものがgithubということになります。

## Webサイトを公開しよう！
#### アカウント作成
1\. [Github](https://github.co.jp/) (github.co.jp)でGithubに登録する
![Screenshot 2023-09-10 at 13.02.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/5cdf0774-91fd-ea75-48f7-ed9d913686af.png)

2\. Username ,Email address ,Passwordを入力する
![Screenshot 2023-09-10 at 13.22.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/1c13cb8f-a87e-9e58-7e7b-5bc63b586bb0.png)

3\. 2を埋め、Emailアドレス認証を行う
![Screenshot 2023-09-10 at 13.27.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/b55d91a7-3ae7-2db3-d760-2e9c1be5e44a.png)

4\. 完了！！（home画面へ遷移）

#### リポジトリ作成
リポジトリとはファイルや変更履歴を保存する場所のことで大雑把にいうとフォルダのことです。
そのフォルダを今から作成していきます。

1\.左赤マルをクリックする。もしくは
![Screenshot 2023-09-10 at 13.47.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/0aaa00be-0727-d6ac-9ce7-aea604c8a5df.png)

右赤マルを押して　Your repositoriesからNewをクリック。
![Screenshot 2023-09-10 at 13.29.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/5a14769e-9dbd-0fa5-e2b7-ddc66513a64a.png)

2\.リポジトリの名前を入力

![Screenshot 2023-09-10 at 14.12.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/72551dc9-7f56-1081-0622-688ce664e7b6.png)
今回はhelloというリポジトリ名にします。名前以降はPublicを選択でCreate repositoryでとりあえずOK.

* public or Private
　Publicは公開、Privateは非公開リポジトリのこと。
* Add a README file
　READEMEファイルはリポジトリを見る前に読んでほしいことを記述するファイルです。後から作成できます
* Add .gitignore
  管理対象から外すファイルやディレクトリを設定するファイル。セキュリティに関することはここに記述する。
* Choose a license
　コードは著作物に入りますので、配布できるように適切なライセンスを付与する必要があります。

https://docs.github.com/ja/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/licensing-a-repository

https://qiita.com/shibukk/items/67ad0a5eda5a94e5c032

設定完了で　Create repositoryをクリック
するとhelloリポジトリのホームが作成されます。


#### ファイル作成(Github上で)
1\.ファイル作成
赤枠のcreating a new fileをクリック。（今回はこっちで進める）
もしくはすでにアップロードできるファイルがあるならばuploading an existing fileをクリック
![Screenshot 2023-09-10 at 14.44.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/92d73a2c-e08e-ac91-741a-95567ab866b1.png)

2\.htmlファイルを作成
次の画面に遷移します。今回ここでは簡単なhtmlファイルを作成しまし
ちなみに　/　で階層化することができます。
完成したら右上のCommit changes... をクリック

![Screenshot 2023-09-10 at 16.01.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/266c7c15-8b83-b51e-19fb-590b4132a8b7.png)
Commit changes をクリック

![Screenshot 2023-09-10 at 16.01.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/6f9d93fd-2eba-5a17-73e6-ade0133d823f.png)
これでリポジトリ上にファイルを作成することができました。

#### 公開設定
次に公開設定を行います。Commit changesをクリック後以下pageになりSettingsをクリック
![Screenshot 2023-09-10 at 16.05.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/c7fd186f-62e0-888a-14c2-aeac1f133db8.png)
赤枠Pagesをクリック
![Screenshot 2023-09-10 at 16.05.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/80b7a63e-63da-3624-e5e6-0f501f1f44c3.png)
Branchをmainに変更しSaveしたのち、遅くても４、５分したらページ上部にサイトURLが表示されますのでクリック
![Screenshot 2023-09-10 at 16.05.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/0096568d-56da-4eeb-9ec7-0a252256b3b2.png)
hello.htmlを加えるとページが公開されていますね！
![Screenshot 2023-09-10 at 16.15.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/b29b683a-e94b-7c66-a6b9-62e4444bc723.png)

これでWebサイトが全世界に公開されることになりました


## (応用) Webサイトを公開しよう
さてここからは自分のPC上（ローカル）にリポジトリを作成してプルリクエスト、マージまでおこなってみましょう。
#### Git導入
導入方法は主に
1\.公式ページからダウンロード
2\.git --versionから。
3\.homebrewからインストール
があるようです。
詳しくはこちら

https://tracpath.com/bootcamp/git-install-to-mac.html

#### リモートリポジトリとローカルリポジトリを紐づける
自分のPC上の任意の場所に開発を行うディレクトリを作成します。
```:ディレクトリ作成
//開発ディレクトリの作成
mkdir ディレクトリ名

//開発ディレクトリへ移動
cd ディレクトリ名

//ローカルリポジトリの作成
git init
(出力)　Initialized empty Git repository in ~~~
```
Gitが使えるディレクトリを作成したら、前のセクションで作成したgithubのhelloリポジトリと紐づけます。
```:紐付け
//githubのリポジトリのURLをローカルとの紐付け(今回はhelloリポジトリ)
git remote add origin https://github.com/~~~~~/hello

//紐づけられたか確認
git remote -v
(出力)　origin	https://github.com/~~~~~/hello (fetch)
       origin	https://github.com/~~~~~/hello (push)

//紐付けたら同期を行う
git pull origin main
```


#### 開発ブランチを作成し、ファイルを変更
ブランチとは、枝、分岐等の意味があるように、mainをいきなり変更するのではなく一旦mainから分岐させて記録していくものです。

google画像検索の結果はブランチのイメージがしやすいので以下に添付しときます。

https://www.google.com/search?q=%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%81%A8%E3%81%AF+git&tbm=isch&ved=2ahUKEwjEgtaS75-BAxWQQ94KHQ4BB1wQ2-cCegQIABAA&oq=%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%81%A8%E3%81%AF&gs_lcp=CgNpbWcQARgBMgQIIxAnMgQIIxAnMgYIABAHEB4yBggAEAcQHjIGCAAQBxAeMgcIABAYEIAEMgcIABAYEIAEMgcIABAYEIAEMgcIABAYEIAEMgcIABAYEIAEUABYAGDfCGgAcAB4AIABnQGIAZ0BkgEDMC4xmAEAqgELZ3dzLXdpei1pbWfAAQE&sclient=img&ei=7p79ZMTTCZCH-QaOgpzgBQ&bih=764&biw=1348&rlz=1C5CHFA_enJP1052JP1052

```:ブランチ作成
//ブランチを作成し、そのブランチに移動
git checkout -b ブランチ名　
（出力）Switched to a new branch 'ブランチ名'

//もしくは　
git branch ブランチ名 & git checkout ブランチ名
```
開発用のブランチを作成したら、ここからファイルを変更していきます。

```html:ファイル変更
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <style>
      .hello {
       background-color: aqua;
      }

  </style>
</head>
<body>
  <h1>こんにちは</h1>
  <h1 class="hello">hello, world</h1>
</body>
</html>                   
```
と仮に作成しました。

#### ファイルを追加、コミット、リモートに反映させる
ここからの流れはgit add ファイル名 → git commit → git push　origin main
というのが流れです。上記コマンドを実行すればよし。
```:ファイル追加、コミット、リモート反映
//ファイル追加
git add ファイル名

//commit
git commit

//リモートに反映
git push origin main
```

そもそもgitには作業エリアというものがあります。現在作業しているディレクトリからステージングエリアに到達ためにgit addコマンドが、ステージングエリアからローカルリポジトリに到達するためにgit commitコマンドが必要になります。

こちらもgoogle画像検索の結果が理解しやすいので以下に添付しときます。

https://www.google.com/search?sca_esv=564145755&rlz=1C5CHFA_enJP1052JP1052&sxsrf=AB5stBj23jeOD-Nlcnd-CiP0iPfMbp8P4Q:1694349480955&q=git+%E4%BD%9C%E6%A5%AD%E3%82%A8%E3%83%AA%E3%82%A2&tbm=isch&source=lnms&sa=X&ved=2ahUKEwjz77_Xh6CBAxUONt4KHdbxDmgQ0pQJegQIDBAB&biw=1348&bih=764&dpr=1


#### Pull Request作成
ローカルでpushしたら、webのgithubでプルリクエストを行います
![Screenshot 2023-09-10 at 20.35.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/db8763d2-5fd0-0196-e81a-93feba422163.png)

コードの差分も表示されます。
![Screenshot 2023-09-10 at 20.38.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/4318c531-99b5-c630-0387-d0cdcda48f36.png)
コードの確認を評価者に見てもらい、mainブランチからの変更を取り入れることを許可されたらMerge Pull request をクリックします。
![Screenshot 2023-09-10 at 20.43.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/ef458db2-32c8-58eb-bf4c-eda445908292.png)
誰がいつ変更したのか、時間も含めて記録されます。
![Screenshot 2023-09-10 at 20.44.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/54ff4e0a-a3b9-fc78-61eb-00c6bf4b0467.png)

:::note alert
勝手にMergeしてはいけない（チーム開発）
Pull Requestには評価者がいるのでその人のOKが出てからMergeしましょう
:::
評価者がいない個人での練習ならどんどんMergeしてみましょう

Mergeした結果を先ほどのGithub Pagesで確認してみましょう

![Screenshot 2023-09-10 at 20.46.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494258/78828399-39aa-7035-c418-389d75c6da22.png)
反映されました。

この開発の一連の流れをGithub flowと言います。お疲れ様でした。

## 終わりに
今回アウトプットを通してGithub flowが自分の中では完璧に使えるようになったと思います！
引き続き学習頑張りましょう！

間違い等があれば指摘していただければ幸いです。