GitHub｜初期設定方法

### 前置き  
こんにちはさだやです。Chromebookでプログラミングしたい方にとっては有意義な内容かと思います。
今回の記事はフロントエンド、バックエンド関係なく、必須の知識”Git”と”GitHub”に関する勉強です。
##### 開発環境  

|項目|内容|
|--|--|
|PC|HP Chromebook x360-14b-ca0004na|
|OS|Chrome OS|
|Spec|メモリ：8GB、eMMC：128GB|
|エディター|Visual Studio Code|
|言語|Python|
|フレームワーク|Django|
|サーバー|GCP（Google Cloud Platform）（無料枠）|
※サブテーマ：子どもが使用するChromebookでも、ビジネス利用できることを証明する。

# Gitでローカル上で初期設定
Gitという技術は元々Linuxのバージョン管理システムでしたので、もしこの記事をお読みの方がChromebookであるなら、
Chromebookはβ版Linux開発環境が、Debian 10（Buster）環境なので、すでにインストール済みかと思います。
※Windowsの方なら、[こちらからGitの公式サイト](https://git-scm.com/)にて、
　「Downloads」にてインストーラーをダウンロードしてください。
※Madの方は、Homebrewでインストールが可能です。`https://git-scm.com/`

### 初期設定を行う
##### gitのバージョンを確認
では、早速ターミナルを開いて、コードを実行していきましょう。
```$ git --version```　```git version 2.20.1```
私のものは2021年12月時点では最新ものでした。
もし古い場合は、更新しましょう。
```$ sudo apt update```　```$ sudo apt install git```
このように入力すれば、最新版に更新されるはずです。再度、バージョンを確認してください。
```$ git --version```
変わっていれば完璧です。
##### ユーザー登録
```$ git config```
と入力すると、コマンド一覧が表示されます。

```usage: git config [<options>]  
Config file location
　　　--global              use global config file
　　　--system              use system config file
　　　--local               use repository config file
　　　--worktree            use per-worktree config file
　　　-f, --file <file>     use given config file
　　　--blob <blob-id>      read config from given blob object
```
この中の**global config file**の設定を行います。ユーザー名とメールアドレスを登録しましょう。
```$ git config user.name "your name"
$ git config user.email "your email"
```
この```"your name"```と```"your email"```に自分で設定したい名前とメールアドレスを入力して実行してください。
試しに、マイファイル＞Linuxファイルの中で、右上にある「︙」を押して「非表示のファイルを表示」にチェックをつけると、
「.gitconfig」ファイルが表示されます。これをTextで開くと
```[user]
　　　　　name = 設定したユーザー名
　　　　　email = 設定したメールアドレス
```
となっているはずです。心配な場合は確認してみてください。
##### リポジトリを作成
すでに開発したアプリケーションがある場合は、プロジェクトの中に入りましょう。
まだ何も開発を開始していない方は、見るだけにしましょう。（エンジニアの勉強としては**超×3重要**です）
例えば、my_siteというプロジェクト名であれば、```$ cd my_site```と打つことでプロジェクトの中に入ってください。
※ちなみに```cd```はカレントディレクトリ (current directory)の略なので、cdコマンドで中に入ることができます。
まずは初期化
```$ git init```
これで「非表示のファイル」として「.git」がプロジェクトフォルダ直下に隠しフォルダが作成されています。
なにが行われたかというと、この「.git」が置かれているサブディレクトリ含む全ファイルがリポジトリの範囲となりました。
ただし、まだ範囲が決まっただけで、登録が実行されていません。登録の実行をGit用語として**コミット**と呼びます。
##### 極秘文章は「.gitignore」ファイルで避ける
また、コミットを行ったリポジトリはこの後に、**GitHub**というWeb上のソースコード保管庫に行くので、
パスワードなどの極秘文章をうっかりコミットしてしまうと、大変危険なことになります。
同じくプロジェクト直下に```$ touch .gitignore```と打って、「.gitignore」ファイルを作成しましょう。
直下のファイルをしているする場合は、そのままファイル名を。例えば、sshのキーとかは「id_rsa.pub」とかで指定します。
全然関係なメモがまとまっている「etc」というフォルダがあるとしたら、「/etc」と「.gitignore」ファイルの中に、
記入しておきましょう。
##### コミットする
まずはステージングです。gitのaddコマンドでコミットしたいファイルを指定します。
```$ git add .```
「.」はカレントディレクトリのことを指しますので、プロジェクト内すべてという意味になります。
もちろん個別にフォルダを指定して良いですが、その場合漏れる危険性があるので、「.gitignore」ファイルで
不要なファイルを排除する形のほうが楽だと思います。とはいえ、危険なのでgitのstatusコマンドでしっかりと確認しましょう。
```$ git status```
実行すると、「new file:  .gitignore」というようにコミットする全ファイルが表示されます。
何度も書きますが、**ヤバいファイルがないか、しっかりと確認しましょう。分からないファイルがあれば、確認しましょう。**
問題なければ、コミットを実行します。
```$ git commit -m "at 1st commit"```
gitは最初に説明したとおりバージョン管理の目的です。なので、Gitはコミットしたログを自動的に残しています。（便利ですよね？）
つまり、コードを修正するたびにコミットを行います。その場合、どんな修正だったっけ？とならないために、コメントを残したいですよね。
もちろん、どんな修正だったか、コメントが残せるようになっています。それがcommiコマンドには-mオプションです。
例えば、```-m "at 1st commit"```というふうに、書いてあれば、「ああ、初回のコミットか」というようにわかります。
もちろん、複数行残したいのであれば、```-m "at 2st commit" -m "index.htmlにbootstrapを導入"```とか、
改修した内容も記載できます。（いや、本当に素晴らしい）では、試しにログを表示してみましょう。
```$ git log```
```commit ............ (HEAD -> master)
Author: 設定したユーザー名 <設定したメールアドレス>
Date:   Sun Dec 26 01:50:46 2021 +0900
at 1st commit```
というふうに出てきます。便利に使いこなせるようになりましょう。
# GitHubにソースコード保管する
Gitがローカルでバージョン管理するシステムに対して、GitHubはWeb上で管理するWebサービスです。
作成したリポジトリをGitHubに登録することで、いろんなサービスに登録するためのHubとして機能するようになり、
またWeb上で共有できるため、巨大Webアプリ開発の強い味方となります。チームの運営の役に立つというわけです。
### GitHubにログイン
一にも二にもまずはログイン。[GitHubはこちら](https://github.com/)
![GitHub_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2429705/5f2da96a-e94b-dd5a-4531-20856b2a99f5.png)
すでに登録している場合は、ログインしてください。登録されていない方は、赤丸の”Sigh up”ボタンを押して、初期登録を行いましょう。
登録画面は下記の通り、とてもわかり易いので、ガイダンスに沿って、「メールアドレス」を押して「Continue」ボタンを押して、登録を進めていきます。見ての通り、UIはとてもわかりやすいです。
![GitHub_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2429705/116c27da-4591-8eb4-70f4-9f3d9886f335.png)
途中で出てくるプランは「Free」を選択して大丈夫です。この「Free」と「Pro」の最大の違いは共同開発者の人数です。3名を超える大規模Webサービスを開発する場合は、「Pro」でなければできません。ということで個人利用レベルであれば、「Free」で十分です。
![GitHub_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2429705/1cc7bf6d-8769-5cee-18a2-3fd8ffc90143.png)
「Sign In」したら、右上のアイコンを押して、「Your Repositories」を選択してください。
![GitHub_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2429705/f8206b06-5c15-bead-dbc5-f775ff425486.png)
「New」マークを押してください。すると、リポジトリの新規作成フォーム画面が立ち上がります。
![GitHub_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2429705/21bb3e2c-3bd0-f44f-334e-e39056c6694e.png)

1. Repository name.　入力必須となっています。  
Repositories画面で表示されるリポジトリ名称となります。  
1. Description.　必須ではありません。概要を入力したい場合は入力しましょう。  
1. Public or Private.　必ずどちらかを選択しましょう。ちなみに意外かもしれませんが、  
エンジニアはオープンソース文化が一般的であるため、公開される方も多いらしいです。
1. Initialize this repository with:.　これはGitHubからリポジトリを作成したい場合の機能です。  
今回はローカルでリポジトリを作成したので、チェック無しで設定を完了とします。

下まで入力が済んだら、「Creative Repository」ボタンを押すと、GitHub上にリポジトリが作成されます。
### リポジトリ初期設定
GitHubで空のリポジトリを作成した場合は、次のような画面が表示されて、次にどうするべきか指示が表示されます。
この指示に従って、ローカルとGitHubのリモートリポジトリの連結設定を行っていきましょう。
![GitHub_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2429705/dcf3bfd4-dd58-0b7d-d2a6-479396eb3365.png)

1. 「Quick setup — if you’ve done this kind of thing before」  
1. 「…or create a new repository on the command line」  
1. 「…or push an existing repository from the command line」  
1. 「…or import code from another repository」

という4つの方法がありますが、今回は3.「…or push an existing repository from the command line」を使用します。
「push」というのがGitHub上にソースコードをアップすることの意味しますので、これがローカルから作成したリポジトリをGitHub上にアップする方法となります。
### SSHキーを登録する
SSHという方法でGitHubと連携させます。これはいわゆる「秘密鍵暗号方式」というもので、公開鍵と秘密鍵を作成し、公開鍵のほうを連携させたい方に渡して、暗号化鍵した秘密鍵を互いにキャッチボールして安全に同期する方法です。
##### ローカルで公開鍵・秘密鍵の作成
ターミナルを立ち上げましょう。次のコードを入力しましょう。
```$ ssh-keygen```
これでEnterを押すと、
```Generating public/private rsa key pair.
Enter file in which to save the key (/home/user_name/.ssh/id_rsa): ```
と表示されます。（user_nameにはご自身のユーザー名が入っております。）
これはLinuxフォルダ直下に作られるという意味です。特に問題はないので、そのままEnterを押して実行します。
```Enter passphrase (empty for no passphrase): ```
というのが表示されます。これは空でもいいようなのですが、なんとなく怖いので私は設定しています。
もう一度、出てくるので設定する場合は同じパスワードを入力してEnterを押すと、作成完了です。
```$ ls .ssh```
と打ち込むと、作成されているか確認することができます。（ちなみに、lsコマンドはlistの略称らしいです。）
```id_rsa  id_rsa.pub```
があれば、バッチリできています。この「id_rsa」は秘密鍵で、絶対にどこにも登録してはいけないし、誰にも渡してはいけません。
##### GitHubに公開鍵を登録
登録するのは「id_rsa.pub」という公開鍵です。このファイルの中に書き込まれている内容をGitHubに登録します。
```$ cat .ssh/id_rsa.pub```
ssh-rsa ...からはじまる暗号が表示されたはずです。ターミナルはマウスでクリックし選択するだけで、コピーが実行されますので、選択だけして、「コピーしました。」表示されますので、そのやり方でコピーしてください。
![GitHub_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2429705/6593ec3c-679d-720d-0232-0385dfbc1760.png)
メニューの中から、「Settings」というボタンを押して、「SSH keys」という入力欄を探してください。
![GitHub_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2429705/5df501e2-f661-eb11-5959-6a8b20c67bd7.png)
「SSH keys」という項目名の右側には「New SSH keys」というボタンがあるので、そこを押してください。
![GitHub_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2429705/9edf51a1-ceb9-9479-db19-a33397e8028e.png)
「Title」欄にはこれがなんの公開鍵なのかわかるように名称をつけてあげましょう。この場合はmy_pcとかでしょうか。
「Key」欄には先程```$ cat .ssh/id_rsa.pub```で表示した内容をコピペしてあげましょう。
それができたら「Add SSH key」を押して登録を完了させましょう。最後にパスワードを求められますので、自分のGitHubアカウントのパスワードを入力しましょう。これはローカルでSSHキーを作成したときのパスワードではありません。
### GitHubのリポジトリにローカルのリポジトリを同期
では、最後の仕上げです。カンのいい方はすでに完了しているかもしれません。
![GitHub_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2429705/2221be00-ecef-e353-a66d-bd733fc8c645.png)
メニューから「Repositories」を選び、この画面を表示させて、3.「…or push an existing repository from the command line」の中に入っているコードをまるっとコピーしてターミナルに貼り付けて実行すれば完了です。
また、この場合は「.git」ファイルがある場所をカレントディレクトリにしておかないとダメなので、cdコマンドでプロジェクト内に入ってから、ローカルのリポジトリをアップしてください。
長くなりましたが、これですべての作業が完了です。