NetlifyとContentfulで作るカンタン無料CMS！

サンタさんには[マキタのインパクトドライバー](https://www.amazon.co.jp/%E3%83%9E%E3%82%AD%E3%82%BF-Makita-%E5%85%85%E9%9B%BB%E5%BC%8F%E3%82%A4%E3%83%B3%E3%83%91%E3%82%AF%E3%83%88%E3%83%89%E3%83%A9%E3%82%A4%E3%83%90-%E3%83%90%E3%83%83%E3%83%86%E3%83%AA%E3%83%BB%E5%85%85%E9%9B%BB%E5%99%A8%E3%83%BB%E3%82%B1%E3%83%BC%E3%82%B9%E5%88%A5%E5%A3%B2-TD171DZ/dp/B06XXKY7H7/ref=sr_1_2?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=%E3%83%9E%E3%82%AD%E3%82%BF+td171&qid=1608633441&sr=8-2)を頼みました。
どうも、[株式会社アトラエ](https://atrae.co.jp/)で[転職サイトGreen](https://www.green-japan.com/)のデザイナーやってます、紺谷です。

さてさて、[アトラエのアドベントカレンダー](https://qiita.com/advent-calendar/2020/atrae)22日目ということで、
今回は、NetlifyとContentfulで超簡単に無料でCMSを作れたので、
それについて書いていこうと思います！

# Netlify とは？
https://www.netlify.com/
__「無料で使えるホスティングサービス」__
といったところでしょうか。

## Netlify でサイトを作ってみる
Netlify へのサインアップは、適宜行ってくださいm(_ _)m
Githubアカウントでサインアップするのがのちのちスムーズかと思います。

### Githubリポジトリを作成しておく
Netlifyでサイトを作成する際に、Githubリポジトリと連携します。
なので先にGitHubリポジトリを作成しましょう。

今回は適当に作った以下のリポジトリを使用します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/63e16f14-ec96-77b0-b4f1-4568251304c3.png" width="300">

リポジトリが空っぽだと連携時にエラーになるので
`git init` して
`README.md` くらいあげておきましょう。
（ここらへんのやり方は、リポジトリ作成後にGitHubさんが教えてくれます）


### Netlifyでサイトを作成する
ログインすると `New site from Git` というボタンがあるのでそれを押しましょう。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/96575a51-c8f4-9eae-efe8-5fed498c901e.png)

GitHubのリポジトリと連携したいので、`GitHub`ボタンを押します。
![Frame 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/f180c179-379f-2305-7888-0235ce544bcf.png)

連携したいリポジトリを検索し、リポジトリ名を押します。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/dc0fca26-36ed-f0e7-98e8-93d640f4f555.png)

Buildの設定とかありますが、ひとまず`Deploy site`を押します。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/eadc26b1-2b06-d717-1706-97cebb959691.png)

すると、
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/f9e9a125-46b6-06b5-3707-cffb33f8c700.png" width="500" />
はい、__完成〜〜〜〜〜__🎉🎉🎉

超簡単！`dreamy-brown`とかいうへんてこな名前ついちゃってるけどw
早速サイトにアクセスしてみましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/6a183071-67ce-d287-d5ba-fbfc722825d8.png" width="400" />
はい、何にもない〜〜〜。
そりゃそうだ、`README.md`しか中身ないですからね。

### index.htmlを作成＆pushする
中身があればいいんでしょ？ということで、
適当に`index.html`を作ってあげてみましょう。

```index.html
<html>
<head></head>
<body>
<h1>Hello Sauna!</h1>
</body>
</html>
```

このファイルをそのままリポジトリにPushしてみます。

そして、先程のURLにアクセスしてみると…
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/b656f303-0b4a-ac75-0660-1547f214f7da.png" width="600">
__表示されたーーーー__🎉

でも、今回は__CMS__を作りたいんじゃ！
ということで次は__Contentful__を説明します！

# Contentful とは？
https://www.contentful.com/
俗に言う__ヘッドレスCMS__ってやつですね。
ビューのないCMS、裏側（データベース）だけ保管してくれるCMSって感じでしょうか。

## CotentfulでCMSを作ってみる
こちらもサインアップはよしなにやってください。

### Spaceを作る
ログインしたら`Add a space`ボタンを押しましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/8c82ddf8-c524-c67a-a00b-b98ce5edb56d.png" width="500" />

次のページにいくと…
![７.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/a85b780b-9606-400d-37e0-126f81294ef8.png)
ん？なんかお金かかりそうな気配がしますね。。。
ゴリゴリ使うならお金払わないといけないんでしょうが、かるーいCMSで大丈夫なら一番下の`Community`を選べば無料で使えます。お店とか、コーポレートサイトくらいであればこれで事足りるでしょう。


次に、Spaceの名前を入力して`Create space`を押しましょう。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/10f69b5d-f74a-4e65-ee3d-9df2dc518fcd.png)

すると…
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/778ab6c6-96f4-bb9a-d3c2-01403134cede.png" width="600" />
はいできましたー。

### Content Model を作る
データベースでいうところの__テーブル__ですね。
作っていきましょう。

ヘッダメニューの`Content model`をクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/20ea4a81-6258-db69-43ca-acfe9b24943c.png" width="600" />

`Add content type`をクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/78a1c046-9246-60a2-d8d3-3ceab4d4db13.png" width="600" />

名前を入力し`Create`をクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/29c39156-de02-a246-2177-4a8b0d234caf.png" width="600" />


### Fieldを作る
今回はサウナのDBを作ろうと思います。
Fieldとしては、
`id`, `name`, `address`
くらいにしときましょう。
 
右側の`Add field`をクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/6fa8dc28-a48a-9ace-e188-884aeff9e4d1.png" width="600" />

`id` は `Number`、`name` は `Text`、`Address` は `Text`
でつくります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/31dfd790-97f9-74da-b061-7e6d94a6f3c2.png" width="600" />

はい、こんな感じでできました↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/b357b670-61a6-9582-97a4-857d9a73544b.png)

### Contentを入力する

ヘッダメニューの`Content`をクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/97efe694-3356-3d69-4f8f-8c0413bcff99.png" width="600" />

ページ下の`Add Content Model名`をクリックしてContentをいくつか作ってみましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/3574a370-0946-3bc8-c13a-ff59c1e91909.png" width="600" />

はい、できましたー。
簡単！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7942/dfdb76d4-6efc-5ba0-7213-f0a01bd7cca0.png)

## Nuxt.jsでWebアプリを作成し、ContentfulのデータをNetlifyで表示させる
はい、ここからはそんなに簡単ではございません。
Nuxt.jsの知識が必要になります。
https://ja.nuxtjs.org/

なんですが！！！
ちょっと長くなりそうなので別記事（または後ほどここに追記？）にしようかと思います！
（アドベントカレンダーで、それ許される？？？(^_^;)）

すごーく中途半端な終わり方になってしまいましたが、
皆さん、コロナに気をつけてくださいね！
良いお年をーーー！