Ghost に続いて Headless CMS の Strapi を試してみます。
Quick Start Guide – Strapi Developer Documentation
インストール
npx create-strapi-starter my-project gatsby-blog
このコマンドを実行するともろもろインストールが進んで installation type が聞かれるので Quickstart を選択。
インストールが完了すると admin panel と Gatsby blog がブラウザに表示されます。
![](https://i0.wp.com/www.netplan.co.jp/wp-content/uploads/2021/06/strapi-admin-panel.png?resize=1000%2C514&ssl=1)
![](https://i0.wp.com/www.netplan.co.jp/wp-content/uploads/2021/06/strapi-gatsby-blog.png?resize=992%2C628&ssl=1)
writer を追加
自分自身を writer として追加します。
![](https://i0.wp.com/www.netplan.co.jp/wp-content/uploads/2021/06/add-writer.png?resize=557%2C397&ssl=1)
記事を作成
![](https://i0.wp.com/www.netplan.co.jp/wp-content/uploads/2021/06/create-article.png?resize=753%2C541&ssl=1)
タイトル、説明、本文を入力します。そしてカテゴリーと作者を適宜選択。
Publish をクリックして公開 … と思ったら公開できず…?
本文の下にある image 項目が必須になっていました。
![](https://i0.wp.com/www.netplan.co.jp/wp-content/uploads/2021/06/image-field-necessary.png?resize=700%2C284&ssl=1)
ということで適当に画像をDrag & Dropで追加。
ちなみにarticleの編集画面から「表示設定」を開くと、
![](https://i0.wp.com/www.netplan.co.jp/wp-content/uploads/2021/06/displayed-fields.png?resize=651%2C470&ssl=1)
このような画面でレイアウトが編集できます。
とりあえずの記事ができたので Publish。
ここでサイトに反映するには ctrl + c でサーバーを一旦停止して再起動する必要があります。
cd my-project
npm run develop
カテゴリ:Newsで公開済みのサンプル記事があったので非公開(unpublish)にして、新規作成した記事の表示を確認。
![](https://i0.wp.com/www.netplan.co.jp/wp-content/uploads/2021/06/category-news.png?resize=748%2C606&ssl=1)
という流れでブログ記事の追加・公開ができました。