{"id":16396985,"url":"https://github.com/cieloazul310/gatsby-microcms","last_synced_at":"2026-05-18T05:32:29.381Z","repository":{"id":117641167,"uuid":"588147970","full_name":"cieloazul310/gatsby-microcms","owner":"cieloazul310","description":"Gatsby + microCMS template","archived":false,"fork":false,"pushed_at":"2023-01-21T09:52:53.000Z","size":1006,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-04T17:32:45.087Z","etag":null,"topics":["gatsby","microcms"],"latest_commit_sha":null,"homepage":"https://cieloazul310.github.io/gatsby-microcms","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cieloazul310.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-12T12:49:59.000Z","updated_at":"2023-01-14T07:13:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"90b26df4-196c-4b15-8d76-e7b8f9348543","html_url":"https://github.com/cieloazul310/gatsby-microcms","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cieloazul310%2Fgatsby-microcms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cieloazul310%2Fgatsby-microcms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cieloazul310%2Fgatsby-microcms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cieloazul310%2Fgatsby-microcms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cieloazul310","download_url":"https://codeload.github.com/cieloazul310/gatsby-microcms/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240286520,"owners_count":19777353,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gatsby","microcms"],"created_at":"2024-10-11T05:08:56.586Z","updated_at":"2025-11-14T05:02:53.021Z","avatar_url":"https://github.com/cieloazul310.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gatsby + microCMS Template\n\n[Gatsby] + [microCMS] の最小限のテンプレートです。\n\n## デモサイト\n\n\u003chttps://cieloazul310.github.io/gatsby-microcms/\u003e\n\n## リポジトリの使い方\n\nこのリポジトリは Template Repository です。\n「Use this template」\u003e「Create a new repository」でテンプレートを使って新規リポジトリを作成することができます。\n\n### APIの作成\n\nmicroCMSに登録後、以下の2種類のAPIを作成。\n\n#### 1. 最初のAPI\n\n以下のチュートリアルに従って作成  \n\u003chttps://document.microcms.io/tutorial/gatsby/gatsby-getting-started\u003e\n\n- API名: 最初のAPI (何でもよい)\n- エンドポイント: **hello**\n- APIの型: **オブジェクト形式**\n\n##### 最初のAPIのフィールド\n\n- フィールドID: **text**\n- 表示名: テキスト(何でもよい)\n- 種類: テキストフィールド\n\n#### 2. ブログ\n\nmicroCMS のテンプレートから API を自動作成  \n\u003chttps://document.microcms.io/manual/create-api\u003e\n\n- API名: ブログ (自動)\n- エンドポイント: **blogs** (自動)\n- APIの型: リスト形式 (自動)\n\n##### ブログのフィールド\n\n| フィールドID | 表示名     | 種類                    |\n|------------|-----------|------------------------|\n| title      | タイトル    | テキストフィールド        |\n| content    | 内容       | リッチエディタ           |\n| eyecatch   | アイキャッチ | 画像                   |\n| category   | カテゴリ    | コンテンツ参照 - カテゴリ |\n\nこのテンプレートでは title フィールドと content フィールドのみ使用\n\n### gatsby-config.ts の編集\n\ngatsby-config.ts の `siteMetadata` と、 `gatsby-source-microcms` の `serviceId` を設定\n\n```ts\nconst config: GatsbyConfig = {\n  siteMetadata: {\n    title: `サイト名`,\n    description: `サイトの説明`,\n    author: `作者名`,\n  },\n  plugins: [\n    {\n      resolve: 'gatsby-source-microcms',\n      options: {\n        apiKey: process.env.MICROCMS_APIKEY,\n        // microCMSのサービスID\n        serviceId: 'YOUR_SERVICEID',\n        apis: [\n          { endpoint: 'hello', format: 'object' },\n          { endpoint: 'blogs', format: 'list' },\n        ],\n      },\n    },\n  ],\n};\n```\n\nローカル環境で開発、ビルドをおこなう場合は `.env` ファイルに microCMS のAPIキーを記述。\n\n参考: dotenv  \n\u003chttps://github.com/motdotla/dotenv\u003e\n\n## Github Pagesに公開する\n\nmicroCMS の Webhook 機能を使うことで、コンテンツの更新に合わせて Github Actions で自動でビルド、デプロイすることができる\n\n参考: メディアのWebhookを設定  \n\u003chttps://document.microcms.io/manual/medium-webhook-setting\u003e\n\n### Repository secrets の設定\n\nリポジトリ内の「Settings」\u003e「Security」\u003e「Secrets and variables」\u003e「Actions」のページに移動し、New repository secrets に以下の通りに設定\n\n- Name: **MICROCMS_APIKEY**\n- Secret: microCMSで取得したAPIキー\n\n参考: 暗号化されたシークレット  \n\u003chttps://docs.github.com/ja/actions/security-guides/encrypted-secrets\u003e\n\n### Github Pages の設定\n\nリポジトリ内の「Settings」\u003e「Code and automation」\u003e「Pages」に移動し、「Build and deployment」\u003e「Source」に「Github Actions」を設定\n\n[.github/workflows/gatsby.yml](/blob/main/.github/workflows/gatsby.yml)\n\n参考: GitHub Pages サイトの公開元を設定する  \n\u003chttps://docs.github.com/ja/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site\u003e\n\n### Webhook を設定\n\n最初のAPI、ブログAPIの画面右上のAPI設定から「API設定」\u003e「Webhook」\u003e「Github Actions」と移動し設定\n\n- Webhookの識別名\n- [Githubトークンを取得](https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)\n- リポジトリのユーザ名\n- リポジトリ名\n- トリガーイベント名: **update_blogs**\n\nコンテンツのWebhookを設定  \n\u003chttps://document.microcms.io/manual/webhook-setting#hf0d425ae06\u003e\n\n[Gatsby]: https://www.gatsbyjs.com \"Gatsby\"\n[microCMS]: https://microcms.io \"microCMS\"\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcieloazul310%2Fgatsby-microcms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcieloazul310%2Fgatsby-microcms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcieloazul310%2Fgatsby-microcms/lists"}