Zenn
Open4

Astro + mdxでブログを作ってみる

MDX
Astro
大井さかな大井さかな

手元の環境

  • 💻 MacBook Pro
    • macOS 14.4.1 (23E224)
    • x86_64
  • Node.js 21.7.3
  • npm 10.5.0
  • astro 4.8.2
大井さかな大井さかな

プロジェクト初期化

npm create astro@latest コマンドで対話形式のセットアップ。

"How strict should Typescript be" では tsconfig.json をbase strict strictest の3段階が用意されている。内容はここ → https://github.com/withastro/astro/tree/main/packages/astro/tsconfigs

astro   Launch sequence initiated.

  dir   Where should we create your new project?
        .

 tmpl   How would you like to start your new project?
        Use blog template

   ts   Do you plan to write TypeScript?
        Yes

  use   How strict should TypeScript be?
        Strictest

 deps   Install dependencies?
        Yes

  git   Initialize a new git repository?
        Yes

     ✔  Project initialized!

作成されるファイル群。ディレクトリ構成の説明は公式にある通り。
.vscode/extensions.json の推奨拡張機能にはAstroとMDXの2つが書かれている。

./
├── .gitignore
├── .vscode/
│   ├── extensions.json
│   └── launch.json
├── README.md
├── astro.config.mjs
├── package-lock.json
├── package.json
├── public/
│   ├── blog-placeholder-1.jpg
│   ├── blog-placeholder-2.jpg
│   ├── blog-placeholder-3.jpg
│   ├── blog-placeholder-4.jpg
│   ├── blog-placeholder-5.jpg
│   ├── blog-placeholder-about.jpg
│   ├── favicon.svg
│   └── fonts/
│       ├── atkinson-bold.woff
│       └── atkinson-regular.woff
├── src/
│   ├── components/
│   │   ├── BaseHead.astro
│   │   ├── Footer.astro
│   │   ├── FormattedDate.astro
│   │   ├── Header.astro
│   │   └── HeaderLink.astro
│   ├── consts.ts
│   ├── content/
│   │   ├── blog/
│   │   └── config.ts
│   ├── env.d.ts
│   ├── layouts/
│   │   └── BlogPost.astro
│   ├── pages/
│   │   ├── about.astro
│   │   ├── blog/
│   │   ├── index.astro
│   │   └── rss.xml.js
│   └── styles/
│       └── global.css
└── tsconfig.json

https://docs.astro.build/ja/basics/project-structure/

開発サーバーを立ち上げた時点の画像。Homeタブにブログのトップ記事が表示されている