Gatsby와 Github로 정적 블로그 운영하기

November 11, 2020


프로그래머라면 누구든 자신만의 개발 블로그를 운영하고 싶어지는 때가 온다고 하죠. 그중에서도 정적 블로그를 운영하고 싶어지는 때가 한 번 씩은 찾아온다고 합니다. 네, 저도 결국 정적 블로그 뽕을 맞고 말았습니다! 사실 정적 블로그를 세팅, 호스팅하는 것은 관리형 블로그 서비스나 워드프레스 등을 사용하는 것에 비해 편의성 면에서 많이 뒤쳐질 수밖에 없습니다. 당연한 이치죠. 그럼에도 불구하고 정적 블로그라는 옵션을 선택하게 되는 것은, 블로그의 모든 요소를 쉽고 완전하게 설정할 수 있다는 점에서 오는 것 같습니다. 프로그래머 입장에서 정말 지적인 즐거움이 자극되거든요.

제가 처음 개발 블로그를 만들 때는 워드프레스를 사용했었는데요, Kubernetes 클러스터 위에서 돌아가고 있었습니다. 그러니까 블로그 도메인이 로드 밸런서를 가리키면, 로드 밸런서가 nginx ingress 서비스로 트래픽을 보내고, nginx는 포워딩 룰에 따라 워드프레스가 떠있는 서비스를 가리키고… Kubernetes에서 서비스는 Pod로 보내는 일종의 로드 밸런서 역할도 하게 되죠? 그리하여 끝내 블로그 컨텐츠가 들어있는 워드프레스 컨테이너에 닿게 되는 거였습니다. 비효율의 극치라서 부끄럽네요.

그래서 결국 심플한 옵션을 찾게 되었고, 정적 블로그를 다시 마주했습니다. 써보니까 기대하던 심플함에 부합하는 것 같아 좋고, 앞으로 커스터마이징할 여지도 남아있는 것 같아요!

정적 사이트 생성기, Gatsby

그런데 그 정적 블로그, 정적 사이트라고 부르는 게 대체 뭘까요. 정적 사이트란, 제공하는 컨텐츠, 즉 HTML 파일이 배포 이후 변하지 않는 웹사이트를 말합니다. 일반적인 웹사이트는 사용자가 특정 요청을 취하면 Apache, Nginx 등의 웹서버에 전달되고, 이를 건네받은 PHP, Rails, Next.js 등의 어플리케이션 엔진에서 DB 등을 참조하여 사용자에게 전달할 컨텐츠를 렌더링하여 보냅니다. 이를 Server-side Rendering이라고 합니다.

Server-side Rendering

SSR을 하려면 웹서버와 어플리케이션이 돌아갈 서버가 필요하네요. 이러면 서비스를 배포하고 운영하기 점점 골치가 아파옵니다. 그런데 정적 사이트 생성기로 제공할 컨텐츠를 미리 빌드해 놓았다면, 그냥 요청에 맞는 파일을 꺼내 오기만 하면 됩니다! 사용자는 브라우저에서 HTML, CSS, JS를 돌리기만 하면 상호작용 가능한 페이지가 나오구요. 이러한 간단함 덕분에 무료로 정적 사이트를 호스팅해주는 서비스도 많습니다. Github가 대표적이죠.

정적 사이트 생성기는 좋은 게 많이 있는데, 저는 JavaScript/TypeScript가 익숙해서 이를 기반으로 한 기술을 사용하고 싶어요. 이쪽 진영에 Gatsby라는 유명한 기술이 있습니다. React와 GraphQL을 기반으로 작동해서, 현대적인 웹사이트를 구축하는 데 최적입니다.

Gatsby를 사용해서 블로그를 빠르게 구축할 수 있는, 프로토타입을 제공하는 라이브러리가 있습니다. React를 공부해 본 분이라면 create-react-app을 알고 계실 거에요. Gatsby에도 gatsby-starter-blog라는 비슷한 놈이 있죠. 설치와 세팅을 마치고 나면, 소스 코드에 들어가서 파일을 직접 수정하고, localhost에서 개발 빌드를 확인해 가면서 개발하는 거에요. React 개발이랑 똑같네요.

Cloudinary에 이미지 호스팅하기

이제 이미지를 서빙할 방법을 생각해 보아야 합니다. 가장 간단한 선택지로는 물론, 리포 안에 이미지 파일을 저장해 놓고 빌드 단계에서 HTML 파일에서 이미지 파일을 담는 방식이 있겠죠. 문제점은, 그 이미지 파일을 포함해서 트래픽이 증가한다는 점이 우선 떠오르네요. 그리고, 우리가 사용할 Github 리포의 용량 한계가 1GB이기 때문에 언젠가는 용량을 초과할 거란 거에요. 물론 용량 한계가 없더라도 매번 빌드 시간이 증가할 것이기에 이미지 컨텐츠를 정적으로 서빙하는 것은 좋은 생각이 아닙니다.

그래서 우리는 이미지 파일을 외부에 호스팅해 놓고 참조해 올 거에요. 다양한 옵션이 있지만, 편의성 측면에서 Cloudinary라는 좋은 무료 서비스가 있습니다. 이미지 변환을 자동으로 해주고 월 최대 25GB의 트래픽을 지원해요. 개인 개발 블로그 운영하기에 충분한 트래픽이죠. 가입해서 이미지를 등록하고, 링크를 복사해 와서 마크다운에 추가하면 됩니다.

gh-pages를 이용해 Github에 호스팅하기

이제 우리 블로그를 인터넷에서 접속할 수 있게 호스팅을 붙여야겠죠. 우리는 Github Pages를 이용할 거에요. 월 100GB의 트래픽을 제공하고, github.io라는 도메인을 기본으로 제공하죠. 물론 갖고 있는 개인 도메인을 포워딩시킬 수도 있어요! 그러기 위해 우선 Gatsby 리포를 Github에 올려놓겠습니다. 또, 기본적으로 <user>.github.io 형태의 리포를 등록하고 나서 Github Pages를 이용할 수 있어요. 자세한 과정은 이 링크를 참조해 주세요!

이제 gh-pages를 이용해서 Github Pages에 퍼블리시할 브랜치를 생성할 거에요. 우선 gh-pages를 받아 주세요.

npm install gh-pages --save-dev

다음은 Gatsby에 gh-pages 세팅을 할 차례입니다. gastby-config.js에 다음 코드 블럭을 추가해 주세요.

module.exports = {
  pathPrefix: "/reponame",
}

그리고, npm의 deploy 스크립트를 추가할 차례입니다. package.json으로 가서 수정해 주세요.

{
  "scripts": {
    "deploy": "gatsby build && gh-pages -d public -b master"
  }
}

Option: 개인 도메인 등록하기

개인 도메인을 블로그로 포워딩시키고 싶으시다구요? 아시겠지만 도메인 관리 페이지에서 설정한 CNAME 레코드를 등록하고, Github 리포 설정에 반영하여야 합니다. 우선 도메인을 Github Pages 설정에 추가해 주세요.

Saving custom domain

이제 도메인의 DNS 설정에서 CNAME 레코드를 등록해 주세요. A 레코드는 서브도메인이 없는 최상위 도메인을 뜻하는데, 혹시 이것도 추가하고 싶으시다면 A 레코드에 Github Pages의 IP 주소를 등록해 주세요.

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

이제 HTTPS를 지원해야겠죠. 이대로 처음 도메인을 등록하면 인증서가 없어서 도메인 주소로 접속이 안 됩니다. 브라우저 레벨에서 HSTS를 준수하지 않는 사이트를 차단해 버리니까요. 옵션에서 Enforce HTTPS를 선택해 주시면 방금 생성되었던 인증서가 무조건 적용됩니다. 그러면 http 접속에 대해 강제로 https로 리디렉트가 되죠. 만약 www 연결이 적절한 인증서가 없다고 하면 CNAME 레코드에 원래 도메인을 입력해 주시는 걸로 일단 해결할 수 있어요. 이때 www 주소에 대한 HTTP 코드는 301 Moved가 나오게 됩니다.

반응형 웹페이지 구현하기

지금까지 우리가 만든 페이지는 PC에만 대응합니다. 다시 말해 모바일로 들어가면, 규격이 맞지 않아 뒤죽박죽 깨지게 될 거란 말이죠.


Written by Beryl Leta who loves heterogeneous and aesthetic things.