Ernie.SG 
Astro로 Cloudflare Pages에 사이트 옮기기
Markdown으로 글을 쓰고, 버전 관리와 자동 배포를 누리며, 검색엔진에도 유리한 빠른 사이트와 간단한 설정을 얻고, 개인 사이트에 내 도메인과 SSL, 무제한 대역폭까지 전부 무료로 쓰고 싶다면? 계속 읽어보자.
왜 Astro인가?
내가 Astro를 주력 프레임워크로 고른 데에는 꽤 설득력 있는 이유들이 있다.
SEO에 유리한 빠른 속도
- 기본적으로 JavaScript를 싣지 않아 페이지가 번개처럼 빠르게 열린다
- Lighthouse 점수 99/100이 기본으로 나온다
- 메타 태그와 구조화된 데이터를 자동으로 처리한다
콘텐츠 중심
- Markdown/MDX를 일급으로 지원해서 원하는 방식으로 콘텐츠를 쉽게 다시 렌더링할 수 있다
- 수식 작성을 위한 LaTeX 기본 지원
- 100개가 넘는 언어에 대한 풍부한 구문 강조
유연한 개발자 경험
- 프레임워크에 묶이지 않는다. 필요한 곳에 React, Vue, Svelte, HTMX를 쓰면 된다
- 정적 출력물이므로 어디에나 호스팅할 수 있고, 특정 벤더에 갇히지 않는다
Cloudflare Pages의 장점
무제한 대역폭
갈아탄 큰 이유 중 하나는 무제한 대역폭을 제공하는 Cloudflare Pages의 넉넉한 무료 티어였다. 혹시 내가 유명해지더라도 깜짝 청구서를 받을 일은 없다는 뜻이다!
자동화된 CI/CD
개발 워크플로도 매끄럽다. 이런 것들이 따라온다.
- Git에서 자동 배포
- pull request마다 미리보기 배포
- 간단한 롤백
커스텀 도메인, 그리고 그 밖의 것들
- 엣지 캐싱을 갖춘 글로벌 CDN
- 정적 자산 자동 최적화
- 설정이 쉬운 커스텀 도메인(물론 도메인 값은 직접 내야 한다)
- 기본 제공 SSL 인증서
- 기본 제공 분석 기능
- 훌륭한 문서
이전 과정
그러기 위해 내가 한 일은 이렇다.
-
astro-erudite 템플릿을 복제했다
-
입맛에 맞게 고친 뒤 GitHub에 푸시했다
-
Cloudflare Pages를 설정하고 배포했다.
- Cloudflare dashboard > Compute (Workers)로 이동했다
- GitHub 저장소를 연결했다
- 배포할 main 브랜치를 선택했다
- 프레임워크로 Astro를 선택했다
-
커스텀 도메인을 연결하고, 그다음부터는 Cloudflare가 알아서 하게 두었다
전체 과정은 더 쉬울 수 없을 만큼 쉬웠다. 버전 관리는 무료이고, main에 푸시하면 사이트가 자동으로 다시 배포된다.
마무리
성능을 먼저 생각하는 Astro의 접근 방식과 Cloudflare의 탄탄한 인프라를 합치면, 인터넷에 빠르게 자기 자리를 마련하려는 개발자에게 아주 좋은 기반이 된다. 제일 좋은 점? 전부 무료다. 개인 프로젝트와 블로그에 이상적인 선택인 이유다.