はじめに

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

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

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

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

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

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

事前にgoogle chromeを入れておいてください！
はりきっていきましょう！！

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

vs code と拡張機能をインストール

vs codeダウンロードサイトから自分のpcに合わせたインストーラーをダウンロードします

ダウンロードしたzipファイルを解凍するとこんなアイコンで出ると思います。
アプリケーションフォルダに移動して、整理しておきましょう

余談
macだけのお話になりますが、アプリケーションの配列はきれいだと探しやすくなると思います！
僕の整理したアプリはこんな感じでジャンル分けしていますね！
気になるアプリあればコメントで教えてください
純正/デザイン/コーディング/便利

本題に戻りますが、ここからvisual studio codeをカスタムしてより使いやすくしていきます。
まずはvisual studio codeを開いてみましょう

このような画面が出たら、次は拡張機能を入れていきます。
ブロックが離れたようなアイコンをクリックしてみましょう

ここの検索画面では拡張機能を検索して直接インストールしたり、有効無効を切り替えたりすることができます。
要するに便利な凄機能ですね！

早速拡張機能を入れてみましょう
まずは
live serverと

gitlensを検索してインストールしましょう

他にも便利な拡張機能はたくさんあります。
このあたりをみると楽しくなってくると思います！

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

githubにアカウントを作成

まずはここからgithubのページに行って、アカウント登録をしましょう
既に持ってる人はサインインしてここは飛ばしてもらっても大丈夫です！

アカウント登録が進むと

チューリングテストをして、人間判定を行い

プランを選びます
特に学生だと後から学生書を登録すればproになれるので
特に必要でない場合はfreeプランで登録しちゃいましょう

使う用途も適当に入力して

メール認証を完了させてください

メールボックスにあるこの画面で認証を完了すると

新しいリポジトリを作る画面が出てきます。

新しいリポジトリを作る際にわかりやすい名前がいいでしょう
helloworld_websiteとかどうですかね！
どうしても思い浮かばない場合はgithubが提案してくれるリポジトリ名を使うのも手ですね！
how about〜の後ろにある名前を押すと自動で入力してくれます。
create repositoryを押して、

この画面が出てきたら成功です！

これでgithubでの設定は完了です！
次のステップに進む前に自分のパソコンでgitが使えるように
gitのサイトからダウンロードしておきましょう！
参考:gitとgithubの違いについて

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

vs codeとgithubを繋げる

まずは下準備としてターミナル(terminal)アプリを起動します

映画などでみるハッカーみたいな画面が出てきましたね。
(ハッカーとはパソコンの技術に優れている人のことを指すのであって、
悪用する人はクラッカーと言います。世界の10%の人しか知らない情報です！！)

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

ls

lsは自分のいるフォルダの下にあるフォルダを調べるコマンドです。
このような画面が出てきて、デスクトップがあることがわかると思います。

デスクトップに移動したい場合はcdコマンドを使います。

cd Desktop

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

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

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

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

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

A githubにあるリポジトリをクローンする

いきなり難しい言葉が出てきましたね。

クローンとはすなわち、分子・DNA・細胞・生体などのコピーである。
引用元 wikipedia

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

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

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

ここで言うclone以下のurlはgithubのページ上でコピーが可能です。

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

B 自分のリポジトリをgithubと繋げる

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

cd フォルダ名

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

続いてterminalで

git init

と入力すると今度はgitの初期化が行われて、自分のフォルダをgithubにあげる用意ができました。
そのあとはリポジトリのサイトにある通りに

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

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

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

github pagesでサイトを公開

最後にgithubにデータを転送してみましょう
VS codeの左を見てみると何やらgitlensのところに通知のマークが来ています。

こちらは自分が作業しているファイルに何かしらの変更があったよという通知なので
Aで作業していた人まだ出ていないと思います。
なのでこちらから僕が作ったサンプルのリポジトリを
クローンかダウンロードして中身をそのままコピーしてみてください。

僕のリポジトリをダウンロードした人はこのような表示になっていると思います。

右下にあるGo Liveを押すとbracketsでやっていた人は
雷のマークを押していたみたいにchromeが立ち上がってwebページが見れます

うまく行くとこんな画面が出てきます。
(Bの人は自分のページが表示されるか確認してみてください)

ページがうまく表示できていたら次はgithub上にそのデータを送りましょう
VS codeに戻ってgit lensのアイコンをクリックしていきます。

ここからは基本的なgitの操作を解説しながら説明していきます。
やることは**:add・commit・push**の３ステップです。

git add

changesの上にカーソルを合わせるとこのような表示が出るので＋ボタンを押します。
下の＋をクリックするとindex.htmlしかgithub上に上がらないので注意してください。

changesにあったファイルはstaged changesのところに移りました。
現在行った動作を一時保存したと覚えてください。

git commit

次にmessageのところにどのような変化が起きたのかを一言加えます。
messageを入れて(最初はfirst commitと入れてみましょう)
チェックマークをクリックしたらコミットは完了します。

何も無くなったらcommitは完了です。

git push

最後にgithub上にいよいよデータをアップロードして行く作業になります。
一番右にある点が３つのアイコンを選択して

pushを選択していきましょう

特に何も起きなければ成功です。

今度はgithubのサイトを開いて
この画面から

この画面になっていればgithubにデータが送られました！！

さぁ！最後の仕上げです！
settingsを開いて

下にスクロールして行くとgithub pagesという蘭が見れるようになりました。
ここのNoneってボタンをクリックすると。。

したに向かって色々と出てくるので
master branchというのを選択します。

そうするとページが自動でリフレッシュされるので、もう一度スクロールしてgithub pagesの欄に戻ると

Noneがmaster branchになっていて、上にurlが生成されています。

このurlは何回pushしても同じリポジトリにpushしている限り何回でも使えるので
netlifyでたくさんの変更があったときにurlが変わるということはなくなるのです！
urlをそのままクリックするとページに飛んで、全世界に公開できるようになります。

最後に

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