Astro로 정적 블로그를 다시 짓기

몇 년을 함께한 블로그 엔진을 걷어내고, 다시 Astro 위에 올렸다. 이유는 단순했다 — 페이지는 대부분 정적인데, 런타임은 너무 무거웠으니까.

섬 아키텍처가 바꾼 것

필요한 곳에만 자바스크립트를 보내는 방식은, 사진이 가득한 글에서 특히 빛났다. 첫 화면까지의 시간이 눈에 띄게 줄었다.

기본값이 “0KB JS”라는 점이 핵심이다. 인터랙션이 필요한 컴포넌트만 client:* 지시어로 섬처럼 띄우면, 나머지는 순수 HTML로 남는다.

콘텐츠 컬렉션

글은 전부 마크다운으로 관리한다. 스키마를 정의해 두면 frontmatter 오타 하나까지 빌드 타임에 잡아준다.

const blog = defineCollection({
  loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    category: z.enum(['tech', 'travel', 'life']),
  }),
});

글을 쓰는 흐름을 방해하지 않는 게 제일 중요하다. 파일 하나 추가하면 끝나는 구조.

빌드 속도를 지키기

이미지 최적화와 캐싱만 신경 써도 배포는 몇 초 안에 끝난다. 완벽한 설정보다, 계속 글을 쓸 수 있는 파이프라인이 먼저다.