Skip to content

microcmsio/microcms-blog

Folders and files

NameName
Last commit message
Last commit date
Jan 13, 2022
Aug 26, 2024
Apr 8, 2025
Sep 19, 2021
Aug 23, 2019
Sep 25, 2024
Jan 20, 2020
Sep 25, 2024
Jan 16, 2023
Jun 24, 2020
Feb 8, 2021
Dec 5, 2023
Jun 24, 2020
Apr 9, 2021
Nov 11, 2022
Apr 15, 2025
Apr 8, 2025
Dec 5, 2023
Dec 5, 2023

Repository files navigation

microcms-blog

サイト: https://blog.microcms.io

機能

  • 記事一覧
  • カテゴリー別記事一覧
  • タグ別記事一覧
  • 人気の記事一覧
  • 最新の記事一覧
  • 著者別の記事一覧
  • 検索
  • パンくずリスト
  • 記事詳細
    • 目次
    • 著者
    • SNSシェアボタン
    • 下書きプレビュー
    • 関連記事
  • サイトマップ
  • バナー
  • Google Tag Manager
  • Facebook Pixel
  • RSS
  • PWA

技術構成

  • Nuxt(SSG)
  • microCMS(コンテンツ)
  • Netlify(Hosting, Functions)
  • ESLint
  • Prettier
  • PostCSS
  • PWA

microCMSのAPIスキーマ設定

ブログ

endpoint: blog
type: リスト形式

フィールド ID 表示名 種類
title タイトル テキストフィールド
category カテゴリー コンテンツ参照 - カテゴリー
tag タグ 複数コンテンツ参照 - タグ
toc_visible 目次 真偽値
body 本文 リッチエディタ
description 概要 テキストフィールド
ogimage OGP 画像 画像
writer 著者 コンテンツ参照 - 著者
partner パートナー コンテンツ参照 - パートナー
previous_blog 前の記事 コンテンツ参照 - ブログ
next_blog 次の記事 コンテンツ参照 - ブログ
related_blogs 関連記事 複数コンテンツ参照 - ブログ
cv_point CVポイント 繰り返し(※上限1に設定) - カスタムフィールド

カスタムフィールド

フィールドID: thumbnail

フィールド ID 表示名 種類
title タイトル テキストフィールド
text 本文 テキストエリア
buttonText ボタンテキスト テキストフィールド
buttonLink ボタンリンク テキストフィールド
thumbnail サムネイル 画像

著者

endpoint: authors
type: リスト形式

フィールドID 表示名 種類
name 名前 テキストフィールド
text 自己紹介 テキストエリア
image 画像 画像
twitter Twitter URL テキストフィールド
facebook Facebook URL テキストフィールド
github GitHub URL テキストフィールド

カテゴリー

endpoint: categories
type: リスト形式

フィールドID 表示名 種類
name 名前 テキストフィールド

タグ

endpoint: tags type: リスト形式

フィールド ID 表示名 種類
name 名前 テキストフィールド

パートナー

endpoint: partners
type: リスト形式

フィールドID 表示名 種類
company 会社名 テキストフィールド
url 会社URL テキストフィールド
description 説明文 テキストエリア
logo ロゴ 画像

人気の記事

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

フィールドID 表示名 種類
articles 人気の記事 複数コンテンツ参照 - ブログ

バナー

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

フィールドID 表示名 種類
image 画像 画像
url リンク先URL テキストフィールド
alt 代替テキスト テキストフィールド

環境変数

プロジェクトルートに.envファイルを作成し、以下の項目を設定してください。

  • API_KEY(microCMSのAPIキー)
  • SERVICE_ID(microCMSのサービスID)
  • GTM_ID(Google Tag ManagerのID)※任意
  • FB_PIXEL_ID(FacebookピクセルID)※任意

例:

API_KEY=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
SERVICE_ID=your-service-id
GTM_ID=GTM-xxxxxxx
FB_PIXEL_ID=xxxxxxxxxxxxxxxxxx

開発方法

# パッケージをインストール
$ npm install

# 開発サーバーを起動(localhost:3000)
$ npm run dev

# Netlify Functionsをローカルで起動(localhost:9000)
$ npm run functions:serve

# アプリケーションを静的生成
$ npm run generate

# 静的生成したアプリケーションを起動
$ npm start

ライセンス

Apache License 2.0