Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/microcmsio/microcms-blog
microCMS official blog
https://github.com/microcmsio/microcms-blog
Last synced: 13 days ago
JSON representation
microCMS official blog
- Host: GitHub
- URL: https://github.com/microcmsio/microcms-blog
- Owner: microcmsio
- License: apache-2.0
- Created: 2019-08-16T09:42:00.000Z (almost 5 years ago)
- Default Branch: production
- Last Pushed: 2023-12-21T08:29:04.000Z (6 months ago)
- Last Synced: 2024-04-28T05:52:24.288Z (about 2 months ago)
- Language: Vue
- Homepage: https://blog.microcms.io/
- Size: 3 MB
- Stars: 315
- Watchers: 12
- Forks: 39
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-stars - microcmsio/microcms-blog - microCMS official blog (Vue)
README
# 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
```
## 開発方法
```bash
# パッケージをインストール
$ npm install
# 開発サーバーを起動（localhost:3000）
$ npm run dev
# Netlify Functionsをローカルで起動（localhost:9000）
$ npm run functions:serve
# アプリケーションを静的生成
$ npm run generate
# 静的生成したアプリケーションを起動
$ npm start
```
## ライセンス
Apache License 2.0