kitamago-log

[Next.js × microCMS] JamStackなブログを設立しました

2022-03-29

Hello World!!


皆様初めまして、kitamago と申します。
今年度からフロントエンドエンジニアとしてデビューしたひよっ子です。
詳しいプロフィールに関しては近日投稿予定です。

就職活動中にもポートフォリオサイトを Gatsby.js で作っていましたが、
「実務を通して技術情報をアウトプットとして発信したい!」と思い立ったので
勉強がてらにブログを作ってみました。

ブログ構成図 ( 技術構成 )


ブログの構成図 (概略) は下図のようになっています。

blog-image



また、要件定義としては以下の通りになります。


• サイトマップ
• 記事一覧取得
• カテゴリ別記事の取得
• 最新の記事取得
• 詳細記事の取得
• 関連記事の取得 (投稿済み記事ページのリンクをリッチに埋め込む)
• 人気記事の取得
• 目次
• ページ内検索
• PWA (追加実施予定)
• プレビュー機能 (追加実施予定)

MicroCMS APIスキーマ設定


ブログ

endpoint: blog
type: リスト形式

フィールドID

表示名

種類

必須

title

タイトル

テキストフィールド

true

contents

ブログ本文

繰り返し

true

image

OGP画像

画像

true

tags

タグ

複数コンテンツ参照

true

description

概要

テキストフィールド

toc_visible

目次

真偽値


タグ

endpoint: tag
type: リスト形式

フィールドID

表示名

種類

必須

tag

タグ

テキストフィールド

true


人気記事

endpoint: popular
type: オブジェクト形式

フィールドID

表示名

種類

必須

articles

人気記事

複数コンテンツ参照

false

今後の展望


実務を通して学んだこと、躓いた等を不定期ながら更新できたらと思います。

ではでは。