README | MIMIOJISAN

本サイトについて

概要

本サイトはヘッドレスCMSのmicroCMSでコンテンツを作成し、Astroで開発しました。

機能

記事一覧、記事詳細のページを設けました。
カテゴリー一覧、カテゴリーごとに抽出した記事一覧のページを設けました。

技術構成

・node v20.12.2
・npm 10.5.0
・Astro
・microCMS
・Netlify or Cloudflare

API設定

記事情報、カテゴリー情報、サービス情報でそれぞれコンテンツ（API）を設定。
記事情報ではコンテンツ参照としてカテゴリー情報を取得し、抽出表示を可能としている。

環境変数

プロジェクトルートに.envファイルを作成し、以下の項目を設定。

          
            MICROCMS_SERVICE_DOMAIN=<サービス名>
            MICROCMS_API_KEY=<XXXXXXXXXXXXXXXXX>

開発環境

以下の流れでプロジェクトを作成し、開発環境を構築する。

          
            # 新しいプロジェクトの作成
            $ npm create astro@latest
            
            # 新しいプロジェクトをどこに作成するか
            dir Where should we create your new project?
            .astro-blog 
            
            # テンプレートの選択
            tmpl How would you like to start your new project?
            Empty
            
            # 依存関係のインストール
            deps Would you like to install npm dependencies?
            Yes
    
            # TypeScriptの使用有無
            ts Do you plan to write TypeScript?
            No
    
            # Gitの新規作成
            git Would you like to initialize a new git repository?
            No

実行

サーバーの起動、ビルドを実行する。

                      
            # サーバー起動
            $ npm run dev
  
            # ビルド
            $ npm run build

基本構造

          
            astro-blog
            ├ node_modules
            ├ public
            │ ├ assets
            │ └ favicon.svg
            ├ src
            │ ├ components
            │ │ ├ ArticleCard.astro
            │ │ ├ CategoryCard.astro
            │ │ ├ ServiceCard.astro
            │ │ ├ Header.astro          
            │ │ └ Navigation.astro          
            │ ├ layouts
            │ │ └ Layout.astro
            │ ├ library
            │ │ ├ api.ts
            │ │ └ client.ts
            │ ├ pages
            │ │ ├ about
            │ │ │ └ index.astro
            │ │ ├ articles
            │ │ │ ├ [slug].astro
            │ │ │ └ index.astro
            │ │ ├ categories
            │ │ │ ├ [slug].astro
            │ │ │ └ index.astro
            │ │ ├ services
            │ │ │ ├ [slug].astro
            │ │ │ └ index.astro
            │ │ └ index.astro
            │ ├ styles
            │ │ └ global.css
            │ └ env.d.ts
            ├ .env
            ├ .gitignore
            ├ astro.config.mjs
            ├ package-lock.json
            ├ package.json
            ├ README.md
            └ tsconfig.json

デプロイ

GitHubとCloudflare Pages、microCMSとCloudflare Pagesを連携し、自動デプロイの設定を構築しました。