それでは前回(【Newt】たった1日で書き初め!実質無料でJamstackブログ開設)から引き続き、国産のヘッドレスCMSである『Newt』を使って爆速でブログを立ち上げていきたいと思います。
今回も長くなってしまったため、APIの準備までになってしまいましたが、参考になれば幸いです。
NewtでAPIを取得する
1. Newtへ登録/ログインする
登録はお好きなメールアドレスで登録もできますが、私はGoogleアカウントで登録をしました。
登録後はこちらの画面からログインをしていきます。
2. スペースの作成
まずはスペースを作成しましょう。
スペースとは各コンテンツを管理するもので、スペース内のAppがこれから作っていくブログのメインコンテンツとなります。
出典:Newtドキュメント / スペース
新規スペース作成をクリックすると2項目の入力を求められます。
スペースUIDはあとから変更ができませんので慎重に決めましょう。
後ほど使用しますが、画面に常に表示されているので覚える必要はありません。
3. Appの追加
Appはコンテンツ管理の骨組みの『モデル』、記事投稿をする管理画面のUIである『ビュー』、モデルの内容を元に作成されたAPIの要素である『コンテンツ』から成り立ちます。
出典:Newtドキュメント / App
画面中央付近の青いボタンか左上の『Appを追加』より追加します。今回はより簡単に実装できるように『Appテンプレート』を選択してください。
左カラムより、使いたいAppテンプレートを選択し、右側の『このテンプレートを追加』をクリックすることでAppを追加できますが...
今回目玉のスターターテンプレートは、この画面の最下部にGithubのソースコードで紹介されていますので見逃さないようにしましょう。2022年9月現在は『VUE系のNUXT.js』と『React系のNEXT.js』の2つから選べます。
App追加後は画面が変化します。記事の投稿はこちらから行います。デフォルトで記事が3つ投稿されていますので参考に覗いてみてください。
4. 投稿画面について(AppテンプレートのBLOG、BLOG2)
- タイトル... 表示される記事のタイトルです。
- スラッグ... 記事のURLとなります。
- メタ情報... headタグ内のメタ情報を入力できます。Title、Description、OG画像の設定が可能です。
- 本文... ブログの内容
- カバー画像... アイキャッチの画像です。
- 著者... 著者を選択します。
- カテゴリ(タグ)... 記事に属性を付与できます。
Newt側の初期設定は完了です。
ここまででとりあえずNewt側の設定は以上です。早い方は10分もかからなかったと思います。
これから各自の環境にスターターテンプレートをクローンして、NewtのAPIを叩くことでコンテンツを取得していきます。
次回はいよいよネットへの公開まで進みます。ここまでご覧いただきありがとうございました。
次回 >> 【Newt】できるだけ簡単にJamstackブログをネットに公開
Share this post