Gatsby 블로그

Gatsby 소개와 선택한 이유

Gatsby는 React 기반의 정적 사이트 생성기(Static Site Generator, SSG)다.

Next.js처럼 서버 사이드 렌더링을 지원하는 프레임워크도 있지만, Gatsby는 서버가 없고 정적 파일을 빌드해서 배포하는 데 특화되어 있다.

정적 사이트 생성기의 특징은 모든 페이지가 HTML, CSS, JS 파일로 미리 렌더링된다는 점이다. 덕분에 GitHub Pages 같은 정적 호스팅 서비스만 있으면 별도 운영비가 들지 않고 빠르게 배포할 수 있다.

Gatsby 공식문서 튜토리얼대로 따라하면 되기 때문에 세팅이 간단했다.

TypeScript를 선호하기 때문에 gatsby new로 프로젝트 생성 시에 TypeScript 사용을 선택했다.

블로그 디자인은 간단하게 className으로 조정하며 만드려고 해서 tailwind css를 사용했다.

레포지토리를 생성하고, Github Pages 설정 후, npm run deploy 명령어 한 줄만 실행하면, 빌드된 정적 페이지가 자동으로 gh-pages 브랜치에 생성되어 배포되는 것을 확인할 수 있었다.

Github Actions 스크립트로 자동배포 설정을 해두어 main에 push하면 자동 배포되도록 설정했다.