Astro でブログを作る

2023/4/16

Astro でブログを作る概要

ひとのすなる Astro といふものを、われもしてみむとて、するなり。

本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文

1. Astro プロジェクト作成

https://docs.astro.build/ja/install/auto/に沿って作業。

npm create astro@latest

v.4.6.1では次のような対話になる。ぜんぶ推奨でよい。

#dir   Where should we create your new project?
./new_project_dir_name

#tmpl   How would you like to start your new project?
  ○ Include sample files (recommended)
  ○ Use blog template
  ● Empty

#ts   Do you plan to write TypeScript?
  ● Yes  ○ No

#use   How strict should TypeScript be?
  ● Strict (recommended)
  ○ Strictest
  ○ Relaxed

#deps   Install dependencies? (recommended)
  ● Yes  ○ No

#git   Initialize a new git repository? (optional)
  ● Yes  ○ No

対話型の選択肢は、すべて単にエンターを押す。

終わったら、VSCode などで開く。

code ./new_project_dir_name

2. 最低限のディレクトリとファイルの作成

src 下に content を作成。このディレクトリは必ずこの名前でなければならない。単数である。
content 下に、blog を作成。名前は好きなもので良い。
pages 下に、blog と tag を作成。
layouts と components は任意。

mkdir ./src/content/ ./src/content/blog/ ./src/pages/blog/ ./src/pages/tags/ ./src/conponents/ ./src/layouts/

touch ./src/pages/blog/{index.astro,[...slug].astro} ./src/pages/tags/{index.astro,[...tags].astro} ./src/content/config.ts ./src/layouts/Layout.astro

ファイル内容の微調整

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "strictNullChecks": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
}

content.ts

https://docs.astro.build/ja/guides/content-collections/を参照。

2. パッケージやプラグインを導入

sitemap 導入
tailwind 導入

2-1. sitemap 導入

https://docs.astro.build/ja/guides/integrations-guide/sitemap/を参照。

npx astro add sitemap

パッケージがインストールされ、astro.config.mjs の integrations 配列に sitemap() が加わる。

astro.config.mjs defineConfig 内に、手動で site: "https://your_domain.com" を記述。

export default defineConfig({
+  site: "https://your_domain.com",
  integrations: [sitemap()]
});

keijie.com