【Hugo】Netlify CMSを使ってブログを作ってみた【初心者向け】

#はじめに
Qiita初投稿のはるうさぎと申します。粗相がございましたらご指摘いただけると幸いです。
今回は、[うつ病患者に向けて何かサービスを作りたい](https://note.com/haru_usagi25/n/n6919f0128020)と言うことで、とりあえず簡単にサイトだけでも作ろうと思いました。

が、調べてみると[NetlifyCMS](https://www.netlifycms.org/)に関する日本語記事が少ない、あるいは古いなあと感じました。
それなら自分が書いてやろう！と意気込んだ次第でございます。
NetlifyCMSを知人から教えてもらったのですが、なんのこっちゃやら。なので一個ずつみていきますよ！

##Netlifyとは
Netlifyは最近よく耳にしますよね。
みなさんご存知の通り、高機能ホスティングサービスです。
まあ簡単に言うと、サーバーを借りれるんです。無料で、しかも高速。便利！いえい！
##CMSとは
Contents Management System（コンテンツ・マネジメント・システム）の頭文字を取ったものですね！
知識がなくても自分のブログやサイトを作ることができるんです！めっちゃ便利！そして簡単！
有名なのはWordPressですね。楽ですね。すぐにサイトができます。テーマもたくさんありますしね。

#NetlifyCMSとは
NetlifyとCMSがわかりましたね？んで、本題です！
NetlifyCMSとはNetlifyが提供しているCMSです！！！（そのままです）
WordPressと違ってレンタルサーバーなどが必要ないんです。便利。よし、君に決めた！！！


#実際にNetlifyCMSでブログを作る

##構築
https://www.netlifycms.org/
<img width="1178" alt="スクリーンショット 2020-01-03 2.11.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/04e2560f-1110-1d51-1559-de5bd6e5e6a5.png">
上記にアクセスしてGETSTARTEDします。


<img width="772" alt="スクリーンショット 2020-01-03 2.13.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/ce72806e-b147-8aa3-3822-3c3c74418d91.png">

４種類あるんですね。ふむ。わかんね。
左かGo,React,gem,~~よくわからんポートフォリオ作れるらしい~~
（詳しい教えてください🙇‍♀️）
ちゃんと調べてから用途にあったもので作るべきだと思うんですけど、私はHUGO（一番左）にしました。
~~え？意味ですか？ないですよ~~

###githubの設定
<img width="1196" alt="スクリーンショット 2020-01-03 2.21.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/c43e8fb2-4250-a6db-5cc7-ca2c5acbd33d.png">

githubと連携しろ！と言われます。してください。


<img width="1122" alt="スクリーンショット 2020-01-03 2.22.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/e78b971c-d7b9-81e8-7d9d-d878a1062d25.png">


リポジトリ名は任意のもので大丈夫だと思います。
画像のはデフォルトみたいです。

ボタンをクリックするとgithubに勝手にリポジトリが作成されます。便利。
ただ、このままだとgithubと連携できてないので、認証します。

https://github.com/settings/developers

上記のURLにアクセスします。

<img width="1060" alt="スクリーンショット 2020-01-03 2.34.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/e530d239-c596-de98-9fc2-a16bc3e64c92.png">

新しいアプリケーションを作ってください。~~（クリック）（適当）~~

<img width="568" alt="スクリーンショット 2020-01-03 2.36.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/496174b1-7e1d-e305-1eaf-6bc4160acbfa.png">

私の場合は上記のように入力しました。
一番下のcall backURLは`https://api.netlify.com/auth/done`に設定してください。
URLを入力できたら、アプリケーションを作ってください。~~（クリック）（適当）~~


<img width="551" alt="スクリーンショット 2020-01-03 2.41.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/41c78f83-fee7-47ba-8a8b-09c8742bde4a.png">

ここで出てきたClientIDとClientSecretはどこかへコピペしておいてください。

###Netlify設定

<img width="911" alt="スクリーンショット 2020-01-03 2.53.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/b3cb0fb4-e0a6-8114-e97f-5b941f08f1fc.png">

上記「setting」タブをクリックし、スクロールすると

<img width="1006" alt="スクリーンショット 2020-01-03 2.56.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/7092265a-70d2-fb62-0fa4-e552f009b9a1.png">

この欄があります。「Install provider」をクリックすると

<img width="605" alt="スクリーンショット 2020-01-03 2.57.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/1213317c-aa36-8d27-19ac-1d383b8cfe36.png">

この画面になりますので、先ほどコピペしておいたClientIDとClientSecretを入力して「Install」してください。


<img width="955" alt="スクリーンショット 2020-01-03 2.59.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/872410ab-4f59-b514-0699-030f6cf77ce5.png">

providersが表示されていますね、成功です！
さて、デプロイが完了していると思うので、画面上部の「deploys」のURLをクリックして確認しましょう。



<img width="1434" alt="スクリーンショット 2020-01-03 3.03.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/15e5e1bd-ef67-8165-519f-8b4e48dad57d.png">

🎉🎉🎉わああああい🎉🎉🎉
できました〜〜〜〜！！！！思ったより簡単でしたね！
あとは自分好みにカスタマイズしてください！



#まとめ
初投稿、尚且つ拙い文章で申し訳ございません。
間違いや不備がありましたらご指摘いただけると幸いです。