LoginSignup
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-12-22

サンタさんにはマキタのインパクトドライバーを頼みました。
どうも、株式会社アトラエ転職サイト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 というボタンがあるのでそれを押しましょう。
1.png

GitHubのリポジトリと連携したいので、GitHubボタンを押します。
Frame 2.png

連携したいリポジトリを検索し、リポジトリ名を押します。
3.png

Buildの設定とかありますが、ひとまずDeploy siteを押します。
4.png

すると、

はい、完成〜〜〜〜〜🎉🎉🎉

超簡単!dreamy-brownとかいうへんてこな名前ついちゃってるけどw
早速サイトにアクセスしてみましょう。

はい、何にもない〜〜〜。
そりゃそうだ、README.mdしか中身ないですからね。

index.htmlを作成&pushする

中身があればいいんでしょ?ということで、
適当にindex.htmlを作ってあげてみましょう。

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ボタンを押しましょう。

次のページにいくと…
7.png
ん?なんかお金かかりそうな気配がしますね。。。
ゴリゴリ使うならお金払わないといけないんでしょうが、かるーいCMSで大丈夫なら一番下のCommunityを選べば無料で使えます。お店とか、コーポレートサイトくらいであればこれで事足りるでしょう。

次に、Spaceの名前を入力してCreate spaceを押しましょう。
8.png

すると…

はいできましたー。

Content Model を作る

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

ヘッダメニューのContent modelをクリック。

Add content typeをクリック。

名前を入力しCreateをクリック。

Fieldを作る

今回はサウナのDBを作ろうと思います。
Fieldとしては、
id, name, address
くらいにしときましょう。

右側のAdd fieldをクリック。

idNumbernameTextAddressText
でつくります。

はい、こんな感じでできました↓
image.png

Contentを入力する

ヘッダメニューのContentをクリック。

ページ下のAdd Content Model名をクリックしてContentをいくつか作ってみましょう。

はい、できましたー。
簡単!
image.png

Nuxt.jsでWebアプリを作成し、ContentfulのデータをNetlifyで表示させる

はい、ここからはそんなに簡単ではございません。
Nuxt.jsの知識が必要になります。
https://ja.nuxtjs.org/

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

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

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
0