Brackets + nelify から VS code + githubpagesで初心者を脱却しよう！

#はじめに
この記事は、webデザイン、webアプリケーション開発などを始めて簡単にサイトを公開する術がわかった人に
もっとプログラミングをストレスなく続けられるようにした環境設定を伝授します。
最初は、移行するメリットなどわからないと思いますが**とりあえずやってみましょう！**

あげられるメリットとしては

- gitに触れられる(gitってよく聞くけど使ってみたい！)
- githubで自分のプログラミングの頑張りが可視化される 
- コードを更新してもurlはそのままで他の人に共有ができる

などがあげられると思います。

---

手順はこんな感じで進めます.

1. vs code と拡張機能をインストール
2. githubにアカウントを作成
3. vs codeとgithubを繋げる
4. github pagesでサイトを公開

事前に[google chrome](https://www.google.com/intl/ja_jp/chrome/)を入れておいてください！
はりきっていきましょう！！

それではまずはVisual studio code(略してVS code)の設定を行います

# vs code と拡張機能をインストール
[vs codeダウンロードサイト](https://code.visualstudio.com/Download)から自分のpcに合わせたインストーラーをダウンロードします
![screencapture-code-visualstudio-Download-2019-11-10-09_11_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/015329e9-9e89-3b7b-dfaa-6239265eb2de.png)
ダウンロードしたzipファイルを解凍するとこんなアイコンで出ると思います。
アプリケーションフォルダに移動して、整理しておきましょう
<img width="1385" alt="Screen Shot 2019-11-10 at 9.27.37 copy.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/69077d0c-58c9-2a60-1453-053b78331d8e.png">
*余談
macだけのお話になりますが、アプリケーションの配列はきれいだと探しやすくなると思います！
僕の整理したアプリはこんな感じでジャンル分けしていますね！
気になるアプリあればコメントで教えてください
純正/デザイン/コーディング/便利*
<img width="1499" alt="Screen Shot 2019-11-10 at 9.27.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/261d5ab2-65fe-b6a0-ba6a-115534450122.png">
<img width="1424" alt="Screen Shot 2019-11-10 at 9.27.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/ce79e5aa-5f22-725e-d829-bffe5cadceb7.png">

本題に戻りますが、ここからvisual studio codeをカスタムしてより使いやすくしていきます。
まずはvisual studio codeを開いてみましょう
<img width="1680" alt="Screen Shot 2019-11-10 at 9.37.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/0e1431b1-6b55-b5ce-63f6-6c12ec45e6d3.png">
このような画面が出たら、次は拡張機能を入れていきます。
ブロックが離れたようなアイコンをクリックしてみましょう
<img width="1680" alt="Screen Shot 2019-11-10 at 9.39.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/d7032b46-f121-8ce3-d201-a1f205bd177e.png">
ここの検索画面では拡張機能を検索して直接インストールしたり、有効無効を切り替えたりすることができます。
要するに便利な凄機能ですね！

早速拡張機能を入れてみましょう
まずは
live serverと
<img width="1680" alt="Screen Shot 2019-11-10 at 9.49.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/2e064cb7-2bf7-0eed-2357-d94fefeea0b3.png">

gitlensを検索してインストールしましょう
<img width="1680" alt="Screen Shot 2019-11-10 at 9.44.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/d0e6d808-0ed0-a7e8-c2ab-5a41c1d3b41f.png">

他にも便利な拡張機能はたくさんあります。
[このあたり](https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234)をみると楽しくなってくると思います！

続いてgituhubに移りたいと思います！

# githubにアカウントを作成
まずは[ここ](https://github.com)からgithubのページに行って、アカウント登録をしましょう
既に持ってる人はサインインしてここは飛ばしてもらっても大丈夫です！
<img width="1294" alt="Screen Shot 2019-11-09 at 23.05.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/1d13878f-786d-9ea9-408b-ad587599e228.png">
アカウント登録が進むと
<img width="1283" alt="Screen Shot 2019-11-10 at 8.34.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/5c537602-c323-f4fa-3d96-8f7f5b9d9384.png">
チューリングテストをして、人間判定を行い
<img width="1267" alt="Screen Shot 2019-11-10 at 8.34.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/8e820164-338a-ba4d-9ed7-2c198b87e044.png">
プランを選びます
特に学生だと後から学生書を登録すればproになれるので
特に必要でない場合はfreeプランで登録しちゃいましょう
<img width="898" alt="Screen Shot 2019-11-10 at 8.35.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/0cafa01d-04cb-92e3-0b78-8c63bd2795e4.png">
使う用途も適当に入力して
![screencapture-github-join-customize-2019-11-10-09_01_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/bdb103e5-1cbb-b9ee-9e96-6428cff9a51f.png)
メール認証を完了させてください
<img width="1066" alt="Screen Shot 2019-11-10 at 9.02.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/5867443b-f748-9676-33b7-a7d846572b0d.png">
メールボックスにあるこの画面で認証を完了すると
<img width="647" alt="Screen Shot 2019-11-10 at 9.04.13 copy.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/297a042f-66eb-13a8-d826-0c3f145575f2.png">
新しいリポジトリを作る画面が出てきます。
![screencapture-github-new-2019-11-10-09_07_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/c8baca12-1330-2e6a-00b8-5c325aab67a4.png)
新しいリポジトリを作る際にわかりやすい名前がいいでしょう
helloworld_websiteとかどうですかね！
どうしても思い浮かばない場合はgithubが提案してくれるリポジトリ名を使うのも手ですね！
how about〜の後ろにある名前を押すと自動で入力してくれます。
create repositoryを押して、
![screencapture-github-new-2019-11-10-09_57_13 copy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/ad3efddc-b681-5cd1-9870-7b67d1ca55dd.png)
この画面が出てきたら成功です！
![screencapture-github-qiitatest-curly-sniffle-2019-11-11-09_28_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/f1d5d048-55ab-79c1-ea44-3962363d0efd.png)

これでgithubでの設定は完了です！
次のステップに進む前に自分のパソコンでgitが使えるように
[gitのサイト](https://git-scm.com/downloads)からダウンロードしておきましょう！
[参考:gitとgithubの違いについて](https://qiita.com/morikuma709/items/7a3f873ceda52439df29)

それでは続いてgithubとvs codeをつなげて作業がスムーズになるようにしてみましょう

# vs codeとgithubを繋げる
まずは下準備としてターミナル(terminal)アプリを起動します
<img width="166" alt="Screen Shot 2019-11-11 at 9.30.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/47723aed-51e4-5837-6f15-98f76af9cd27.png">
映画などでみるハッカーみたいな画面が出てきましたね。
*(ハッカーとはパソコンの技術に優れている人のことを指すのであって、
悪用する人はクラッカーと言います。世界の10%の人しか知らない情報です！！)*

デフォルトではユーザーのところにいると思いますので、
作業しやすいようにデスクトップに移動します
以下のコマンドを入力してみてください

```terminal
ls
```

**ls**は自分のいるフォルダの下にあるフォルダを調べるコマンドです。
このような画面が出てきて、デスクトップがあることがわかると思います。
<img width="395" alt="Screen Shot 2019-11-11 at 9.54.57.png"c src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/371a69c9-7ac5-1603-0bce-5ce67677eee0.png">
デスクトップに移動したい場合は**cd**コマンドを使います。

```terminal
cd Desktop
```
以下のように表示されていたら成功です。(mac以外は表示が違うかもしれませんが、Desktopと言う文字が含まれていれば大丈夫です！)

```terminal
パソコンの名前:Desktop ユーザー名$
```


ここからは、人によって作業が分かれます。

**A** 今から新しいwebsiteを作る人
**B** 今まで作ったwebsiteのフォルダをgithubにアップロードしたい人

大半の人はAだと思います。迷ったらAで大丈夫です！
それでは分かれていってみましょう！

## A githubにあるリポジトリをクローンする
いきなり難しい言葉が出てきましたね。
> クローンとはすなわち、分子・DNA・細胞・生体などのコピーである。
> 引用元 wikipedia

つまり、インターネット上にあるgithubのリポジトリを自分のパソコンにコピーしてくる作業のことをクローンと言います。

ターミナルで以下のコマンドを入力してみましょう

```terminal
git clone https://github.com/ユーザー名/リポジトリ名.git
```

ここで言うclone以下のurlはgithubのページ上でコピーが可能です。
<img width="968" alt="Screen Shot 2019-11-11 at 9.45.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/dee774cf-1edd-44f7-bc03-4bf548913224.png">

うまくいくと、デスクトップに先ほどgithub上で作った空のファイルがあると思うので、確認してみてください。
Aの人はここで終わりです。

## B 自分のリポジトリをgithubと繋げる
まずはデスクトップに自分の作業しているwebsiteのフォルダを持ってきましょう
今自分がterminalにいる階層はDesktopになっていると思うので今度は


```terminal
cd フォルダ名
```
と入力して、自分のフォルダの中に入っていきます。

続いてterminalで

```terminal
git init
```

と入力すると今度はgitの初期化が行われて、自分のフォルダをgithubにあげる用意ができました。
そのあとはリポジトリのサイトにある通りに
<img width="952" alt="Screen Shot 2019-11-20 at 21.07.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/f2787953-856c-f6ef-cb04-67117323e3ef.png">

```terminal
git remote add origin https://github.com/qiitatest/リポジトリ名.git
git push -u origin master
```

と一行ずつ入力してgithubのリポジトリとつなげます。

Bの作業はここで終了です。


# github pagesでサイトを公開

最後にgithubにデータを転送してみましょう
VS codeの左を見てみると何やらgitlensのところに通知のマークが来ています。
<img width="48" alt="Screen Shot 2019-11-20 at 21.13.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/1433de1b-653f-23d5-cc2a-5b1db940372b.png">
こちらは自分が作業しているファイルに何かしらの変更があったよという通知なので
Aで作業していた人まだ出ていないと思います。
なので[こちら](https://github.com/ASadSexyImp/qiita_githubpages)から僕が作ったサンプルのリポジトリを
クローンかダウンロードして中身をそのままコピーしてみてください。
<img width="1014" alt="Screen Shot 2019-11-20 at 22.07.26 copy.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/8df9f030-509c-fd8f-c366-e4bc87f6123c.png">

僕のリポジトリをダウンロードした人はこのような表示になっていると思います。
<img width="1680" alt="Screen Shot 2019-11-20 at 21.31.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/fff78805-eb65-63e6-0c3d-4c3e09dd5553.png">
右下にあるGo Liveを押すとbracketsでやっていた人は
雷のマークを押していたみたいにchromeが立ち上がってwebページが見れます
<img width="496" alt="Screen Shot 2019-11-20 at 21.32.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/d9111677-c993-80c7-a0b5-a94f0998d760.png">
うまく行くとこんな画面が出てきます。
(Bの人は自分のページが表示されるか確認してみてください)
<img width="1680" alt="Screen Shot 2019-11-20 at 21.34.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/0eaeb14e-1580-0afd-aed6-9036821000ae.png">

ページがうまく表示できていたら次はgithub上にそのデータを送りましょう
VS codeに戻ってgit lensのアイコンをクリックしていきます。
<img width="302" alt="Screen Shot 2019-11-20 at 21.37.18 1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/b9f11f56-98b3-c46e-27df-04b2688cdc54.png">
---
ここからは基本的なgitの操作を解説しながら説明していきます。
やることは**:add・commit・push**の３ステップです。

---
## git add
changesの上にカーソルを合わせるとこのような表示が出るので**＋**ボタンを押します。
下の＋をクリックするとindex.htmlしかgithub上に上がらないので注意してください。
<img width="253" alt="Screen Shot 2019-11-20 at 21.38.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/68e1a911-8653-11fe-94a7-a049f007697b.png">
changesにあったファイルはstaged changesのところに移りました。
現在行った動作を一時保存したと覚えてください。
<img width="303" alt="Screen Shot 2019-11-20 at 21.42.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/36913735-62cb-223a-cc29-ce56d3b91006.png">
## git commit 
次にmessageのところにどのような変化が起きたのかを一言加えます。
messageを入れて(最初はfirst commitと入れてみましょう)
チェックマークをクリックしたらコミットは完了します。
<img width="305" alt="Screen Shot 2019-11-20 at 21.45.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/580f34b6-b4ef-8a03-752d-ac85fb7c4aec.png">
何も無くなったらcommitは完了です。
<img width="312" alt="Screen Shot 2019-11-20 at 21.50.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/4830e9a2-7c79-6dea-0467-ce73e326c679.png">

## git push
最後にgithub上にいよいよデータをアップロードして行く作業になります。
一番右にある点が３つのアイコンを選択して
<img width="298" alt="Screen Shot 2019-11-20 at 21.52.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/ba60d02b-5ef9-766c-e2cd-b083fd2497ad.png">
pushを選択していきましょう
<img width="503" alt="Screen Shot 2019-11-20 at 21.53.01 copy.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/d8e9c7f5-300f-1794-78ce-0e64dc543cfd.png">
特に何も起きなければ成功です。

今度はgithubのサイトを開いて
この画面から
<img width="1081" alt="Screen Shot 2019-11-20 at 21.55.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/1679239c-b075-5c76-60c7-0ed96fb487a8.png">
この画面になっていればgithubにデータが送られました！！
<img width="1064" alt="Screen Shot 2019-11-20 at 21.55.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/f2afc120-a809-2745-5175-39884acfe815.png">

さぁ！最後の仕上げです！
settingsを開いて
<img width="1030" alt="Screen Shot 2019-11-20 at 21.56.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/c64ba460-20b4-b76e-b83e-d47c4d044398.png">

下にスクロールして行くとgithub pagesという蘭が見れるようになりました。
ここのNoneってボタンをクリックすると。。
<img width="1680" alt="Screen Shot 2019-11-20 at 21.57.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/5ae1b2e0-32b2-7419-3417-dc7eca3f20c0.png">
したに向かって色々と出てくるので
**master branch**というのを選択します。
<img width="784" alt="Screen Shot 2019-11-20 at 22.00.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/6a39e0fa-7542-5dce-99a0-10adf2de541d.png">
そうするとページが自動でリフレッシュされるので、もう一度スクロールしてgithub pagesの欄に戻ると
<img width="769" alt="Screen Shot 2019-11-20 at 22.01.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/7bd7dd69-96c2-ed34-1a74-2c6e83afc424.png">
Noneがmaster branchになっていて、上にurlが生成されています。

このurlは何回pushしても同じリポジトリにpushしている限り何回でも使えるので
netlifyでたくさんの変更があったときにurlが変わるということはなくなるのです！
urlをそのままクリックするとページに飛んで、全世界に公開できるようになります。
<img width="1680" alt="Screen Shot 2019-11-20 at 22.04.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/8a86716c-112b-4876-60e0-25d6e447e085.png">


#最後に
いかがだったでしょうか？
これが皆さんのストレスフリーなweb生活に少しでもお役に立てたら幸いです！
結構皆さん気になるところなどあると思いますので、修正や感想などコメントでくださいね！
お疲れ様でした！