{"id":25009220,"url":"https://github.com/b13o/microcms-blog","last_synced_at":"2026-04-17T07:33:25.292Z","repository":{"id":275642159,"uuid":"924351746","full_name":"b13o/microCMS-blog","owner":"b13o","description":"🐞 A simple blog app. JAMstack by Next.js and microCMS.","archived":false,"fork":false,"pushed_at":"2025-03-25T07:32:25.000Z","size":142,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-25T08:30:05.336Z","etag":null,"topics":["jamstack","microcms","msw","mvp","nextjs","real-world","testing-library-react","typescript","vitest"],"latest_commit_sha":null,"homepage":"https://b13o.github.io/microCMS-blog/","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/b13o.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":"2025-01-29T21:03:36.000Z","updated_at":"2025-03-25T07:33:38.000Z","dependencies_parsed_at":"2025-03-03T10:45:24.141Z","dependency_job_id":null,"html_url":"https://github.com/b13o/microCMS-blog","commit_stats":null,"previous_names":["b13o/microcms-blog"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13o%2FmicroCMS-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13o%2FmicroCMS-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13o%2FmicroCMS-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13o%2FmicroCMS-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/b13o","download_url":"https://codeload.github.com/b13o/microCMS-blog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246266250,"owners_count":20749754,"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":["jamstack","microcms","msw","mvp","nextjs","real-world","testing-library-react","typescript","vitest"],"created_at":"2025-02-05T04:38:50.930Z","updated_at":"2026-04-17T07:33:25.231Z","avatar_url":"https://github.com/b13o.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=\"1440\" alt=\"app-banner\" src=\"https://github.com/user-attachments/assets/9017acd8-64c4-4299-b044-5a45ea48dfcf\" /\u003e\n\n# JAMstack ブログアプリ\n\n## 概要\n\nこのプロジェクトでは、microCMS を使用したシンプルなブログアプリを構築します。\n\nビルド時に静的 HTML を生成することで、従来の Web サイトより表示速度を向上させた JAMstack ブログです。\n\n## 学習目標\n\nNext.js と microCMS を用いた、JAMstack ブログの実装を学びます。\n\n合わせて、Vitest を使用したフロントエンドテストについても、確認してください。\n\n### 推奨技術\n\nこのプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。\n\n- Vitest によるテストの実装\n- Testing Library/ React による DOM テスト\n- MSW による API モック\n- Next.js App Router でのプロジェクト構築\n- TypeScript による型チェック\n- Tailwind CSS を用いたスタイリング\n- shadcn/ui によるコンポーネントの導入\n- microCMS によるコンテンツの管理\n\n---\n\n## 🎯 お題\n\n- 「ユーザーストーリー」を全て満たす、アプリを構築してください。\n- 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。\n- なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。\n\n### 必須機能\n\n1. **未読記事のランダム表示：**\n   - TOP ページのヒーロセクションには、未読の記事を大きく表示する\n2. **記事一覧表示**：\n   - microCMS から取得した記事を一覧表示\n   - グリッドレイアウトで表示する\n3. **記事詳細表示**：\n   - 記事の詳細ページを実装する\n   - 詳細ページの URL は、`domain.com/posts/[slug]`という形式にする\n4. **その他：**\n   - ビルド時に静的サイト生成を行う\n   - microCMS 上で記事を追加した際に、webhook で通知を受け取り、自動でビルドを行う\n\n### **追加情報**\n\n今回推奨する ブログコンテンツの管理方法は、「[**microCMS**](https://microcms.io)」の使用です。\n\n- microCMS では、管理画面からコンテンツを作成できます\n- データ取得には、開発者向けの API を使用できます\n- ユーザー登録が必要ですが、個人の小規模なプロジェクトでは無料枠の範囲で使用できます\n\n## ユーザーストーリー\n\n- **TOP ページ：**\n  - [ ] ユーザーがサイトにアクセスすると、H1 タグでサイトのコピーが表示されている\n  - [ ] ヒーロセクションの下には、未読記事が 1 つランダムで大きく表示されている\n  - [ ] 全ての記事が既読の場合は、全ての中からランダムに 1 つを表示する\n  - [ ] 未読記事のカードには、背景に画像を表示し、その上にタイトル、タグ、導入文を表示する\n  - [ ] 導入文は、記事本文から最初の 80 文字のテキストを表示し、それ以降は（`…`）と表示する\n  - [ ] 記事一覧がグリッドレイアウトで表示されている\n  - [ ] 各記事カードには、タイトル、タグ、サムネイル画像、投稿時刻が表示される\n  - [ ] 投稿時刻は、直近６ヶ月以内の投稿を相対的な時刻で表示する(ex: 10 分前, 3 日前, 6 か月前)\n  - [ ] 記事カードをクリックすると、詳細ページに遷移する\n- **詳細ページ：**\n  - [ ] 詳細ページの URL は、`domain.com/posts/[slug]`という形式になっている\n  - [ ] 詳細ページには、記事の全文が表示される\n- **その他**：\n  - [ ] 必須機能に対して、適切なテストが実装されている\n  - [ ] アプリケーションがデプロイされており、誰でもアクセス可能である\n  - [ ] microCMS 上で記事を追加した際に、webhook で通知を受け取り、自動でビルドが行われる\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb13o%2Fmicrocms-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fb13o%2Fmicrocms-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb13o%2Fmicrocms-blog/lists"}