https://github.com/cieloazul310/gatsby-microcms
Gatsby + microCMS template
https://github.com/cieloazul310/gatsby-microcms
gatsby microcms
Last synced: about 1 month ago
JSON representation
Gatsby + microCMS template
- Host: GitHub
- URL: https://github.com/cieloazul310/gatsby-microcms
- Owner: cieloazul310
- Created: 2023-01-12T12:49:59.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-21T09:52:53.000Z (over 3 years ago)
- Last Synced: 2025-01-04T17:32:45.087Z (over 1 year ago)
- Topics: gatsby, microcms
- Language: TypeScript
- Homepage: https://cieloazul310.github.io/gatsby-microcms
- Size: 982 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Gatsby + microCMS Template
[Gatsby] + [microCMS] の最小限のテンプレートです。
## デモサイト
## リポジトリの使い方
このリポジトリは Template Repository です。
「Use this template」>「Create a new repository」でテンプレートを使って新規リポジトリを作成することができます。
### APIの作成
microCMSに登録後、以下の2種類のAPIを作成。
#### 1. 最初のAPI
以下のチュートリアルに従って作成
- API名: 最初のAPI (何でもよい)
- エンドポイント: **hello**
- APIの型: **オブジェクト形式**
##### 最初のAPIのフィールド
- フィールドID: **text**
- 表示名: テキスト(何でもよい)
- 種類: テキストフィールド
#### 2. ブログ
microCMS のテンプレートから API を自動作成
- API名: ブログ (自動)
- エンドポイント: **blogs** (自動)
- APIの型: リスト形式 (自動)
##### ブログのフィールド
| フィールドID | 表示名 | 種類 |
|------------|-----------|------------------------|
| title | タイトル | テキストフィールド |
| content | 内容 | リッチエディタ |
| eyecatch | アイキャッチ | 画像 |
| category | カテゴリ | コンテンツ参照 - カテゴリ |
このテンプレートでは title フィールドと content フィールドのみ使用
### gatsby-config.ts の編集
gatsby-config.ts の `siteMetadata` と、 `gatsby-source-microcms` の `serviceId` を設定
```ts
const config: GatsbyConfig = {
siteMetadata: {
title: `サイト名`,
description: `サイトの説明`,
author: `作者名`,
},
plugins: [
{
resolve: 'gatsby-source-microcms',
options: {
apiKey: process.env.MICROCMS_APIKEY,
// microCMSのサービスID
serviceId: 'YOUR_SERVICEID',
apis: [
{ endpoint: 'hello', format: 'object' },
{ endpoint: 'blogs', format: 'list' },
],
},
},
],
};
```
ローカル環境で開発、ビルドをおこなう場合は `.env` ファイルに microCMS のAPIキーを記述。
参考: dotenv
## Github Pagesに公開する
microCMS の Webhook 機能を使うことで、コンテンツの更新に合わせて Github Actions で自動でビルド、デプロイすることができる
参考: メディアのWebhookを設定
### Repository secrets の設定
リポジトリ内の「Settings」>「Security」>「Secrets and variables」>「Actions」のページに移動し、New repository secrets に以下の通りに設定
- Name: **MICROCMS_APIKEY**
- Secret: microCMSで取得したAPIキー
参考: 暗号化されたシークレット
### Github Pages の設定
リポジトリ内の「Settings」>「Code and automation」>「Pages」に移動し、「Build and deployment」>「Source」に「Github Actions」を設定
[.github/workflows/gatsby.yml](/blob/main/.github/workflows/gatsby.yml)
参考: GitHub Pages サイトの公開元を設定する
### Webhook を設定
最初のAPI、ブログAPIの画面右上のAPI設定から「API設定」>「Webhook」>「Github Actions」と移動し設定
- Webhookの識別名
- [Githubトークンを取得](https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)
- リポジトリのユーザ名
- リポジトリ名
- トリガーイベント名: **update_blogs**
コンテンツのWebhookを設定
[Gatsby]: https://www.gatsbyjs.com "Gatsby"
[microCMS]: https://microcms.io "microCMS"