61
42

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-01-02

はじめに

Qiita初投稿のはるうさぎと申します。粗相がございましたらご指摘いただけると幸いです。
今回は、うつ病患者に向けて何かサービスを作りたいと言うことで、とりあえず簡単にサイトだけでも作ろうと思いました。

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

Netlifyとは

Netlifyは最近よく耳にしますよね。
みなさんご存知の通り、高機能ホスティングサービスです。
まあ簡単に言うと、サーバーを借りれるんです。無料で、しかも高速。便利!いえい!

CMSとは

Contents Management System(コンテンツ・マネジメント・システム)の頭文字を取ったものですね!
知識がなくても自分のブログやサイトを作ることができるんです!めっちゃ便利!そして簡単!
有名なのはWordPressですね。楽ですね。すぐにサイトができます。テーマもたくさんありますしね。

NetlifyCMSとは

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

実際にNetlifyCMSでブログを作る

構築

https://www.netlifycms.org/
スクリーンショット 2020-01-03 2.11.12.png
上記にアクセスしてGETSTARTEDします。

スクリーンショット 2020-01-03 2.13.59.png

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

githubの設定

スクリーンショット 2020-01-03 2.21.39.png

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

スクリーンショット 2020-01-03 2.22.52.png

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

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

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

スクリーンショット 2020-01-03 2.34.04.png

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

スクリーンショット 2020-01-03 2.36.02.png

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

スクリーンショット 2020-01-03 2.41.16.png

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

Netlify設定

スクリーンショット 2020-01-03 2.53.47.png

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

スクリーンショット 2020-01-03 2.56.35.png

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

スクリーンショット 2020-01-03 2.57.33.png

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

スクリーンショット 2020-01-03 2.59.37.png

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

スクリーンショット 2020-01-03 3.03.32.png

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

まとめ

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

61
42
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
61
42