サンタさんにはマキタのインパクトドライバーを頼みました。
どうも、株式会社アトラエで転職サイトGreenのデザイナーやってます、紺谷です。
さてさて、アトラエのアドベントカレンダー22日目ということで、
今回は、NetlifyとContentfulで超簡単に無料でCMSを作れたので、
それについて書いていこうと思います！
Netlify とは？
https://www.netlify.com/
「無料で使えるホスティングサービス」
といったところでしょうか。
Netlify でサイトを作ってみる
Netlify へのサインアップは、適宜行ってくださいm(_ _)m
Githubアカウントでサインアップするのがのちのちスムーズかと思います。
Githubリポジトリを作成しておく
Netlifyでサイトを作成する際に、Githubリポジトリと連携します。
なので先にGitHubリポジトリを作成しましょう。
今回は適当に作った以下のリポジトリを使用します。
リポジトリが空っぽだと連携時にエラーになるので
git init して
README.md くらいあげておきましょう。
（ここらへんのやり方は、リポジトリ作成後にGitHubさんが教えてくれます）
Netlifyでサイトを作成する
ログインすると New site from Git というボタンがあるのでそれを押しましょう。
GitHubのリポジトリと連携したいので、GitHubボタンを押します。
連携したいリポジトリを検索し、リポジトリ名を押します。
Buildの設定とかありますが、ひとまずDeploy siteを押します。
すると、
はい、完成〜〜〜〜〜🎉🎉🎉
超簡単！dreamy-brownとかいうへんてこな名前ついちゃってるけどw
早速サイトにアクセスしてみましょう。
はい、何にもない〜〜〜。
そりゃそうだ、README.mdしか中身ないですからね。
index.htmlを作成＆pushする
中身があればいいんでしょ？ということで、
適当にindex.htmlを作ってあげてみましょう。
<html>
<head></head>
<body>
<h1>Hello Sauna!</h1>
</body>
</html>
このファイルをそのままリポジトリにPushしてみます。
そして、先程のURLにアクセスしてみると…
表示されたーーーー🎉
でも、今回はCMSを作りたいんじゃ！
ということで次はContentfulを説明します！
Contentful とは？
https://www.contentful.com/
俗に言うヘッドレスCMSってやつですね。
ビューのないCMS、裏側（データベース）だけ保管してくれるCMSって感じでしょうか。
CotentfulでCMSを作ってみる
こちらもサインアップはよしなにやってください。
Spaceを作る
ログインしたらAdd a spaceボタンを押しましょう。
次のページにいくと…
ん？なんかお金かかりそうな気配がしますね。。。
ゴリゴリ使うならお金払わないといけないんでしょうが、かるーいCMSで大丈夫なら一番下のCommunityを選べば無料で使えます。お店とか、コーポレートサイトくらいであればこれで事足りるでしょう。
次に、Spaceの名前を入力してCreate spaceを押しましょう。
すると…
はいできましたー。
Content Model を作る
データベースでいうところのテーブルですね。
作っていきましょう。
ヘッダメニューのContent modelをクリック。
Add content typeをクリック。
名前を入力しCreateをクリック。
Fieldを作る
今回はサウナのDBを作ろうと思います。
Fieldとしては、
id, name, address
くらいにしときましょう。
右側のAdd fieldをクリック。
id は Number、name は Text、Address は Text
でつくります。
はい、こんな感じでできました↓
Contentを入力する
ヘッダメニューのContentをクリック。
ページ下のAdd Content Model名をクリックしてContentをいくつか作ってみましょう。
はい、できましたー。
簡単！
Nuxt.jsでWebアプリを作成し、ContentfulのデータをNetlifyで表示させる
はい、ここからはそんなに簡単ではございません。
Nuxt.jsの知識が必要になります。
https://ja.nuxtjs.org/
なんですが！！！
ちょっと長くなりそうなので別記事（または後ほどここに追記？）にしようかと思います！
（アドベントカレンダーで、それ許される？？？(^_^;)）
すごーく中途半端な終わり方になってしまいましたが、
皆さん、コロナに気をつけてくださいね！
良いお年をーーー！