← 블로그

Astro 블로그를 Cloudflare Pages에 무료로 올리기

#astro#cloudflare#배포

이 사이트 자체를 만든 과정을 그대로 남긴다. 목표는 호스팅비 0원으로 내 도메인에 블로그를 올리는 것.

왜 Astro인가

워드프레스도 유명하지만, 개발 기록을 쓰는 입장에선 정적 사이트가 더 편했다.

  • 글을 마크다운(.md) 파일로 쓴다 — 에디터에서 바로 작업
  • 빌드 결과가 순수 HTML이라 빠르고 SEO에 유리
  • 서버 관리, 플러그인 업데이트, 보안 신경 쓸 게 없다
  • 호스팅이 무료 (Cloudflare Pages / GitHub Pages)

큰 흐름

  1. npm create astro@latest 로 프로젝트 생성
  2. 콘텐츠 컬렉션으로 블로그 글 구조 잡기
  3. 로컬에서 npm run dev 로 확인
  4. GitHub에 올리고 Cloudflare Pages와 연결
  5. Cloudflare에서 산 도메인을 Pages에 연결

Cloudflare Pages 설정 값

빌드 설정은 이렇게 넣으면 된다.

빌드 명령어:   npm run build
출력 디렉터리:  dist

Cloudflare에서 산 도메인이면 DNS가 이미 Cloudflare에 있으니, Pages 프로젝트의 Custom domains 에서 도메인을 추가하면 자동으로 연결된다. 별도 A레코드 손질이 거의 필요 없는 게 장점.

삽질 포인트

  • site 값을 astro.config.mjs에 실제 도메인으로 넣어야 sitemap/RSS 링크가 맞게 나온다.
  • 이미지가 많으면 빌드가 느려질 수 있어 public/ 정적 파일과 최적화 대상을 구분했다.

여기까지 하면 커밋할 때마다 자동 배포된다. 다음 글에서는 애드센스를 붙인 과정을 정리할 예정.