Astro로 블로그 다시 만들기 1: 설계와 콘텐츠 모델

기존 블로그는 다른 사람의 Next.js 템플릿을 그대로 복사한 상태였다. 이 시리즈에서는 Astro로 처음부터 다시 만들면서 내린 결정을 기록한다.

왜 다시 만드는가

Contentlayer는 유지보수가 멈췄고, 배포 워크플로도 한 번도 동작한 적이 없었다. 고치는 것보다 작은 뼈대에서 다시 쌓는 편이 전체 코드를 파악하기 쉽다고 판단했다.

선택지 비교

• Next.js를 유지하고 Contentlayer만 교체한다.
• Astro 공식 blog 템플릿에서 시작한다.

정적 블로그에는 클라이언트 JS가 거의 필요 없으므로 두 번째를 골랐다.

콘텐츠 모델

긴 글은 blog, 짧은 메모는 notes 컬렉션에 둔다. 두 컬렉션 모두 glob loader를 쓰고 frontmatter를 zod 스키마로 검증한다. 긴 글은 폴더 하나에 index.mdx와 이미지를 함께 두고, 폴더의 index 파일만 글로 인식한다.

const blog = defineCollection({
	loader: glob({ base: './blog', pattern: '*/index.{md,mdx}' }),
	schema: z.object({
		title: z.string(),
		pubDate: z.coerce.date(),
		series: z.string().optional(),
		seriesOrder: z.number().int().positive().optional(),
	}),
});

시리즈 규칙

series를 적은 글은 seriesOrder도 반드시 적어야 한다. 빠뜨리면 빌드가 실패한다.

다음 글

다음 글에서는 GitHub Actions로 GitHub Pages에 배포하는 과정을 다룬다.