{"id":19900639,"url":"https://github.com/microcmsio/simple-blog-with-microcms","last_synced_at":"2025-10-05T05:40:39.095Z","repository":{"id":196822236,"uuid":"694093134","full_name":"microcmsio/simple-blog-with-microcms","owner":"microcmsio","description":null,"archived":false,"fork":false,"pushed_at":"2023-11-27T07:32:37.000Z","size":3109,"stargazers_count":14,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-01T01:53:05.714Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://simple-blog-with-microcms.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/microcmsio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-09-20T10:12:51.000Z","updated_at":"2025-04-01T09:27:13.000Z","dependencies_parsed_at":"2023-11-13T02:27:13.104Z","dependency_job_id":"ec7ce3ff-043d-4979-bb1d-789d9c618ed8","html_url":"https://github.com/microcmsio/simple-blog-with-microcms","commit_stats":null,"previous_names":["shimotsu4431/simple-blog-with-microcms","microcmsio/simple-blog-with-microcms"],"tags_count":0,"template":true,"template_full_name":"microcmsio/nextjs-simple-blog-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microcmsio%2Fsimple-blog-with-microcms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microcmsio%2Fsimple-blog-with-microcms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microcmsio%2Fsimple-blog-with-microcms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microcmsio%2Fsimple-blog-with-microcms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microcmsio","download_url":"https://codeload.github.com/microcmsio/simple-blog-with-microcms/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252122216,"owners_count":21698305,"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":[],"created_at":"2024-11-12T20:12:50.463Z","updated_at":"2025-10-05T05:40:39.084Z","avatar_url":"https://github.com/microcmsio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple Blog with microCMS\n\n![](public/cover.png)\n\nThis is an official microCMS simple blog template.\n\nThis blog is built using microCMS, a headless CMS made in Japan, and Next.js.\n\nThis template supports authoring and editing the following blog content and information:\n\n- Blog details\n- Writer\n- Tags\n\n## Demo\n\nhttps://simple-blog-with-microcms.vercel.app/\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-description=This%20is%20a%20microCMS%20official%20simple%20blog%20template.\u0026demo-image=https://github.com/microcmsio/simple-blog-with-microcms/blob/main/public/cover.png?raw=true\u0026demo-title=Simple%20Blog%20with%20microCMS\u0026demo-url=https://simple-blog-with-microcms.vercel.app/\u0026from=templates\u0026project-name=Simple%20Blog%20with%20microCMS\u0026repository-name=simple-blog-with-microcms\u0026repository-url=https://github.com/microcmsio/simple-blog-with-microcms\u0026env=MICROCMS_API_KEY,MICROCMS_SERVICE_DOMAIN,BASE_URL)\n\n## Configuration\n\n### Create an account and a service on microCMS\n\n1. Create an account on [microCMS](https://app.microcms.io/signup).\n2. Create a new empty service from the [dashboard](https://app.microcms.io/create-service). When creating the service, please select \"Create your own\".\n3. Enter any value you like for **Service Name** and **Service ID**.\n4. You now have a new service created that you can access!\n\n### Create APIs\n\nYou will need to create three APIs, all in the **list** format.\n\n#### **Create `tag` API.**\n\nThe `tag` API is for creating tags associated with blog content. Blog content can have multiple tags set within the tag API.\n\n1. Go to `/create-api` (https://your-service-id.microcms.io/create-api) and select \"Create your own\".\n2. Enter basic API information:\n   - API Name: **tag**\n   - Endpoint: **tags**\n3. Select API Type and choose **List** Format.\n4. Define API Schema. The `tag` API has one field:\n   - `name` - **Text Field**. **Field ID** and **Display Name** should be set to `name`.\n5. Click \"Create\" and continue.\n\n![](public/tag.png)\n\n#### **Create `writer` API**\n\nThe `writer` API is for creating author information and associating it with each blog article. A blog article can only have one writer set in the writer API.\n\n1. Go to `/create-api` (https://your-service-id.microcms.io/create-api) and select \"Create your own\".\n2. Enter basic API information:\n   - API Name: **writer**\n   - Endpoint: **writers**\n3. Select API Type and choose **List** Format.\n4. Define API Schema. The `writer` API has three fields:\n   - `name` - **Text Field**. **Field ID** and **Display Name** should be set to `name`.\n   - `profile` - **Text Area**. **Field ID** and **Display Name** should be set to `profile`.\n   - `image` - **Image Field**. **Field ID** and **Display Name** should be set to `image`.\n5. Click \"Create\" and continue.\n\n![](public/writer.png)\n\n#### **Create `blog` API**\n\nThe `blog` API is for creating blog content.\n\n1. Go to `/create-api` (https://your-service-id.microcms.io/create-api) and select \"Create your own\".\n2. Enter basic API information:\n   - API Name: **blog**\n   - Endpoint: **blog**\n3. Select API Type and choose **List** Format.\n4. Define API Schema. The `blog` API has six fields:\n   - `title` - **Text Field**. **Field ID** and **Display Name** should be set to `title`.\n   - `description` - **Text Area**. **Field ID** and **Display Name** should be set to `description`.\n   - `content` - **Rich Text Editor**. **Field ID** and **Display Name** should be set to `content`.\n   - `thumbnail` - **Image Field**. **Field ID** and **Display Name** should be set to `thumbnail`.\n   - `tags` - **Multiple Content References - tag**. **Field ID** and **Display Name** should be set to `tags`.\n   - `writer` - **Content Reference - writer**. **Field ID** and **Display Name** should be set to `writer`.\n5. Click \"Create\" and continue.\n\n![](public/blog.png)\n\n### Enter Content\n\n1. Enter content for the `tag` API, `writer` API, and `blog` API. Since the `tag` API and `writer` API are referenced from the `blog` API, please create the `blog` API content last.\n\n2. Go to the `/apis/[tags|writers|blog]/create` endpoint, click \"**+ Add**\", enter content for each of the following and click publish:\n\n**tag**\n\n- You just need 1 tag content.\n- Use dummy data for the text.\n\n**writer**\n\n- You just need 1 writer content.\n- Use dummy data for the text and image.\n\n**blog**\n\n- You just need 1 blog content.\n- Use dummy data for the text and image.\n\n![](public/publish.png)\n\n### Running locally\n\n#### **Retrieve API Key**\n\n1. From the top page of the dashboard, Go to **\"/api-keys\"**.\n2. Copy and retrieve the value of the **\"default\"** API Key.\n\nThis API key will be used to make requests to microCMS from Next.js.\n\n#### **Set environment variables**\n\nCreate a `.env.local` file in the root of the project and enter the following microCMS values:\n\n```\nMICROCMS_API_KEY=xxxxxxxxxx\nMICROCMS_SERVICE_DOMAIN=xxxxxxxxxx\nBASE_URL=xxxxxxxxxx\n```\n\n- `MICROCMS_API_KEY`: Retrieve the API key from the microCMS dashboard under \"Service Settings \u003e API Keys\".\n- `MICROCMS_SERVICE_DOMAIN`: Retrieve the service domain from the microCMS dashboard URL (https://xxxxxxxx.microcms.io).\n- `BASE_URL`: The deployment URL and protocol. For example:\n  - Development: http://localhost:3000\n  - Production: https://xxxxxxxx.vercel.app\n\n#### **Run the local development server**\n\nThis application requires Node.js version 22 or higher.\n\n- Install package dependencies\n\n```bash\nnpm install\n```\n\n- Launch the local development web server\n\n```bash\nnpm run dev\n```\n\n- Open [http://localhost:3000](http://localhost:3000) in your browser and access your local application!\n\n### Deploy your project to Vercel\n\n1. [Import your repository](https://vercel.com/docs/getting-started-with-vercel/import) from GitHub, GitLab, or Bitbucket.\n2. Click on the environment variables and set `MICROCMS_API_KEY`, `MICROCMS_SERVICE_DOMAIN` and `BASE_URL`.\n3. Click Deploy!\n\n#### **Deploy from Our Template**\n\nAlternatively, you can deploy our template by clicking on the Deploy button at the top of this page and setting the same environment variables.\n\n---\n\n# Appendix\n\n## Page Preview Settings\n\nIn order to preview draft content, a page preview must be set up in the microCMS administration page.\n\nSet the following in \"API Settings \u003e Page Preview\" of the Blog API.\n\nReplace `your-domain` with your deployed domain. (It also works with localhost)\n\n![](public/page-preview-settings.png)\n\nOnce set, the page preview button will be available on the content editing page.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrocmsio%2Fsimple-blog-with-microcms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrocmsio%2Fsimple-blog-with-microcms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrocmsio%2Fsimple-blog-with-microcms/lists"}