【Newt】スターターを活用したツラくないJamstackブログ開設

Share this post

それでは前回(【Newt】たった1日で書き初め!実質無料でJamstackブログ開設)から引き続き、国産のヘッドレスCMSである『Newt』を使って爆速でブログを立ち上げていきたいと思います。

今回も長くなってしまったため、APIの準備までになってしまいましたが、参考になれば幸いです。

NewtでAPIを取得する

1. Newtへ登録/ログインする

newt2-1.jpg
登録はお好きなメールアドレスで登録もできますが、私はGoogleアカウントで登録をしました。

newt2-2.jpg
登録後はこちらの画面からログインをしていきます。

2. スペースの作成

newt2-3.jpg
まずはスペースを作成しましょう。
スペースとは各コンテンツを管理するもので、スペース内のAppがこれから作っていくブログのメインコンテンツとなります。
space
出典:Newtドキュメント / スペース


newt2-4.jpg
新規スペース作成をクリックすると2項目の入力を求められます。

スペースUIDはあとから変更ができませんので慎重に決めましょう。

後ほど使用しますが、画面に常に表示されているので覚える必要はありません。

3. Appの追加

Appはコンテンツ管理の骨組みの『モデル』、記事投稿をする管理画面のUIである『ビュー』、モデルの内容を元に作成されたAPIの要素である『コンテンツ』から成り立ちます。
app
出典:Newtドキュメント / App


newt2-6.jpg
画面中央付近の青いボタンか左上の『Appを追加』より追加します。今回はより簡単に実装できるように『Appテンプレート』を選択してください。


newt2-7.jpg
左カラムより、使いたいAppテンプレートを選択し、右側の『このテンプレートを追加』をクリックすることでAppを追加できますが...


newt2-8.jpg
今回目玉のスターターテンプレートは、この画面の最下部にGithubのソースコードで紹介されていますので見逃さないようにしましょう。2022年9月現在は『VUE系のNUXT.js』と『React系のNEXT.js』の2つから選べます。


newt2-9.jpg
App追加後は画面が変化します。記事の投稿はこちらから行います。デフォルトで記事が3つ投稿されていますので参考に覗いてみてください。

4. 投稿画面について(AppテンプレートのBLOG、BLOG2)

newt2-10.jpg

  • タイトル... 表示される記事のタイトルです。
  • スラッグ... 記事のURLとなります。
  • メタ情報... headタグ内のメタ情報を入力できます。Title、Description、OG画像の設定が可能です。
  • 本文... ブログの内容
  • カバー画像... アイキャッチの画像です。
  • 著者... 著者を選択します。
  • カテゴリ(タグ)... 記事に属性を付与できます。

Newt側の初期設定は完了です。

ここまででとりあえずNewt側の設定は以上です。早い方は10分もかからなかったと思います。

これから各自の環境にスターターテンプレートをクローンして、NewtのAPIを叩くことでコンテンツを取得していきます。

次回はいよいよネットへの公開まで進みます。ここまでご覧いただきありがとうございました。


次回 >> 【Newt】できるだけ簡単にJamstackブログをネットに公開
newt-eyecatch3.jpg

Share this post