サイト: https://blog.microcms.io/ ソースコード: https://github.com/wantainc/microcms-blog
- 記事一覧
- カテゴリー別記事一覧
- 人気の記事一覧
- 最新の記事一覧
- 検索
- パンくずリスト
- 記事詳細
- 目次
- 著者
- SNS シェアボタン
- 下書きプレビュー
- 関連記事
- バナー
- Google Analytics
- サイトマップ
- RSS
- PWA
- Next(SSG)
- microCMS(コンテンツ)
- Vercel(Hosting, Functions)
- ESLint
- Prettier
- PostCSS
- aspida
- pathpida
- SWR
endpoint: blog
type: リスト形式
フィールド ID | 表示名 | 種類 | 必須 |
---|---|---|---|
title | タイトル | テキストフィールド | true |
category | カテゴリー | コンテンツ参照 - カテゴリー | true |
toc_visible | 目次 | 真偽値 | true |
body | 本文 | リッチエディタ | true |
description | 概要 | テキストフィールド | true |
ogimage | OGP 画像 | 画像 | true |
writer | 著者 | コンテンツ参照 - 著者 | false |
partner | パートナー | コンテンツ参照 - パートナー | false |
related_blogs | 関連記事 | 複数コンテンツ参照 - ブログ | true |
endpoint: authors
type: リスト形式
フィールド ID | 表示名 | 種類 | 必須 |
---|---|---|---|
name | 名前 | テキストフィールド | true |
text | 自己紹介 | テキストエリア | true |
image | 画像 | 画像 | true |
endpoint: categories
type: リスト形式
フィールド ID | 表示名 | 種類 | 必須 |
---|---|---|---|
name | 名前 | テキストフィールド | true |
endpoint: partners
type: リスト形式
フィールド ID | 表示名 | 種類 | 必須 |
---|---|---|---|
company | 会社名 | テキストフィールド | true |
url | 会社 URL | テキストフィールド | true |
description | 説明文 | テキストエリア | true |
logo | ロゴ | 画像 | true |
endpoint: popular-articles
type: オブジェクト形式
フィールド ID | 表示名 | 種類 | 必須 |
---|---|---|---|
articles | 人気の記事 | 複数コンテンツ参照 - ブログ | true |
endpoint: banner
type: オブジェクト形式
フィールド ID | 表示名 | 種類 | 必須 |
---|---|---|---|
image | 画像 | 画像 | true |
url | リンク先 URL | テキストフィールド | true |
alt | 代替テキスト | テキストフィールド | true |
プロジェクトルートに.env
ファイルを作成し、以下の項目を設定してください。
- NEXT_PUBLIC_API_KEY(microCMS の API キー)
- NEXT_PUBLIC_SERVICE_ID(microCMS のサービス ID)
- NEXT_PUBLIC_GOOGLE_ANALYTICS_ID(Google Analytics の ID)
- NEXT_PUBLIC_SITE_URL
- NEXT_PUBLIC_BASE_PATH(BasePath が'/'なら空白で大丈夫です)
例:
API_KEY=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
SERVICE_ID=your-service-id
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-xxxxxxxxxx
NEXT_PUBLIC_SITE_URL=https://blog.microcms.io
NEXT_PUBLIC_BASE_PATH=/test(or NEXT_PUBLIC_BASE_PATH=)
# パッケージをインストール
$ npm install
# 開発サーバーを起動(localhost:3000)
$ npm run dev
# アプリケーションを生成
$ npm run build
# 生成したアプリケーションを起動
$ npm start
Apache License 2.0