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

はじめに

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

猫じゃなかった　　~~たこ？！。。。~~

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

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

Githubとは

概要

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

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

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

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

そもそもgit

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

Webサイトを公開しよう！

アカウント作成

1. Github (github.co.jp)でGithubに登録する

2. Username ,Email address ,Passwordを入力する

3. 2を埋め、Emailアドレス認証を行う

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

リポジトリ作成

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

1.左赤マルをクリックする。もしくは

右赤マルを押して　Your repositoriesからNewをクリック。

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

今回はhelloというリポジトリ名にします。名前以降はPublicを選択でCreate repositoryでとりあえずOK.

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

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

ファイル作成(Github上で)

1.ファイル作成
赤枠のcreating a new fileをクリック。（今回はこっちで進める）
もしくはすでにアップロードできるファイルがあるならばuploading an existing fileをクリック

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

Commit changes をクリック

これでリポジトリ上にファイルを作成することができました。

公開設定

次に公開設定を行います。Commit changesをクリック後以下pageになりSettingsをクリック

赤枠Pagesをクリック

Branchをmainに変更しSaveしたのち、遅くても４、５分したらページ上部にサイトURLが表示されますのでクリック

hello.htmlを加えるとページが公開されていますね！

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

(応用) Webサイトを公開しよう

さてここからは自分のPC上（ローカル）にリポジトリを作成してプルリクエスト、マージまでおこなってみましょう。

Git導入

導入方法は主に
1.公式ページからダウンロード
2.git --versionから。
3.homebrewからインストール
があるようです。
詳しくはこちら

リモートリポジトリとローカルリポジトリを紐づける

自分の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画像検索の結果はブランチのイメージがしやすいので以下に添付しときます。

ブランチ作成

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

//もしくは　
git branch ブランチ名 & git checkout ブランチ名

開発用のブランチを作成したら、ここからファイルを変更していきます。

ファイル変更

<!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画像検索の結果が理解しやすいので以下に添付しときます。

Pull Request作成

ローカルでpushしたら、webのgithubでプルリクエストを行います

コードの差分も表示されます。

コードの確認を評価者に見てもらい、mainブランチからの変更を取り入れることを許可されたらMerge Pull request をクリックします。

誰がいつ変更したのか、時間も含めて記録されます。

勝手にMergeしてはいけない（チーム開発）
Pull Requestには評価者がいるのでその人のOKが出てからMergeしましょう

評価者がいない個人での練習ならどんどんMergeしてみましょう

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

反映されました。

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

終わりに

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

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