【Nuxt.js + Prismic.io】第1回 簡単なサイトを作ってみよう

  • NuxtJS
  • Prismic

はじめに

Prismic.ioはHeadlessCMSサービスの1つです。有名どころだとContentfulがあります。基本的には無料で利用できますが機能制限があります。

Contentfulの場合は登録するレコード数(記事数やアップロードした画像数)に制限があることです。一方でPrismic.ioの場合は1ユーザーならば無料で使い放題なので、個人サイトの用途であれば特に制限なく利用できます。(複数人で記事を書いたりする場合は有料)

ネット上にはHeadlessCMSを比較しているサイトもありますので、複数の記事を読み比べて利用するサービスを決めれば良いと思います。

目的

Nuxt.jsとPrismic.ioで簡単なサイトを作ってみます。

ここでは作り込んだサイトを目指すのではなく、動くものを目指そうと思います。Nuxt.js + Prismic.ioのサイト制作のベースというか、参考になれば幸いです。

(ちなみに本サイトはNuxt.js + Prismic.ioから成ります。ホスティングはNetlifyを利用しています。)

ターゲット

  • Nuxt.js知ってる人
  • Prismic.io使ってみようと思っている人
  • Nuxt.jsとPrismic.ioでサイトを作りたい人・悩んでいる人

この記事での作業スコープ

1つの記事ではまとめきれないので複数の記事に分けていこうと思います。続きは今後投稿予定です。

この記事では以下について書きます。

  • Prismic.ioに登録
  • リポジトリ作成

Prismic.ioに登録

まだアカウント登録が済んでいない場合は、https://prismic.io/signup で必要項目を入力して登録してください。すでにアカウントを持っている場合はダッシュボードへ進んでください。

リポジトリ作成

  1. ダッシュボード上にあるCreate repositoryボタンをクリックします。
  2. 追加フォームにて、リポジトリ名と表示名を入力します。
  3. 追加フォームにて、プランで「Free」を選択します。

他の人が管理しているリポジトリと名前が重複したリポジトリ名は設定できませんので注意してください。表示名は任意のもので結構です。わかりやすいものを入力しましょう。

次回予告

  • 作成するサイトの構成
  • カスタムタイプ(記事作成フォームの用意)

もう少し前準備が続きます。

次回の記事へ

この記事を共有

アバター

K.Utsunomiya
男・20代
主にWebフロントエンド技術と気になった音楽について投稿していきます。
最近ハマっていることは、クロスバイクで走ることとジムでの運動です。
詳しいプロフィール

© 2020–2021 コレ棚