[Github Blog] 3. Github Pages 블로그 소개
사실 이전 포스트에서 Github Pages에 대한 내용이 있어 좀 중복되는 느낌이 들 수도 있다. 하지만, 이 포스트에서는 Github Pages의 원리를 짚어보고자 작성한 것이니 혹시 모르는 사람들은 한번 읽어보자.
Github Pages 블로그란?
정적 웹사이트 생성기 (SSG; Static Site Generator)
많은 사람들이 Github Pages로 블로그를 사용하고 있어 이를 블로그 서비스로 인식하기 쉽지만, 사실 Github Pages의 실체는! 바로 Github에서 제공하는 정적 웹 사이트 호스팅 서비스이다. 그리고 정적 웹 사이트 호스팅 서비스를 가능하게 하는 것이 바로 SSG란 것이다.
SSG로 생성된 사이트는 모든 웹 페이지를 미리 생성하고, 방문자로부터 요청이 들어오면 미리 만든 웹 페이지를 그대로 응답해준다. 그러므로 서버와 클라이언트 모두 렌더링을 위한 작업이 거의 없기 때문에, SSG로 생성된 웹 사이트는 속도가 매우 빠른 장점을 가진다. 그리고 SSG로 생성된 사이트는 미리 만들어놓은 수많은 웹 페이지로 이루어져 있는 구조라 검색엔진 최적화 (SEO; Search Engine Optimization)가 뛰어나 검색엔진이 사이트를 크롤링하는 데에 적합하다.
그러나 빌드할 때마다 모든 웹 페이지를 생성하는 작업을 매번 하다보니, 컨텐츠를 자주 업데이트하는 웹 사이트나 규모가 커 빌드 시간이 오래 걸리는 웹 사이트에서는 큰 비효율성이 발생해 SSG보다는 다른 렌더링 기술을 사용한다. 그래서 SSG는 개인 블로그와 같이 컨텐츠의 변경이 자주 일어나지 않은, 소규모 웹 사이트를 제작할 때 많이 쓰이는 기술이다. (SSG 외에도 SPA, SSR과 같은 렌더링 기술이 있는데, 달레 님께서 SPA와 SSG, 그리고 SSR이라는 글에서 잘 정리해주셨으니 참고하길 바란다.)
지금 현재 내가 사용하고 있는 Github Pages 테마인 Minimal Mistakes는 Jekyll을 정적 웹사이트 생성기로 사용해 웹 사이트를 정적으로 생성한다. Jekyll 외에도 Hexo, Hugo와 같은 여러 정적 웹사이트 생성기들이 존재하는데, 이들을 간단하게 비교해보자.
- Jekyll
- Ruby 기반
- 가장 많이 쓰이고, 한글 래퍼런스 많음
- Github Pages에서 공식으로 지원 : push한 글들이 별도의 빌드 과정 없이 알아서 Publish
- 글이 많아질수록 전체 빌드 속도가 느려짐
- Hexo
- Node.js (javascript) 기반
- (javascript를 써서 그런지) 한글 래퍼런스 많음
- Hexo로 블로그를 만들 때 참고할 만한 글
- Hugo
- Golang 기반
- 런타임에 다른 의존성이 필요하지 않아, 빌드 과정을 포함해도 빌드 속도가 빠른 편
- 한글 래퍼런스는 상대적으로 적음
- Hugo로 블로그를 만들 때 참고할 만한 글
지킬 (Jekyll)
사실 SSG 중에 Jekyll이 좋은 거 같아 골랐다기보단, Minimal Mistakes 테마가 내 마음에 들어서 설치했는데 구글링해보니 다들 Jekyll을 쓰더라…의 흐름으로 쓰게 된 거고, Jekyll 말고도 다른 SSG가 있는 것을 알게 된 이후에도 어차피 다 같은 SSG인데 Jekyll 말고 굳이 다른 거를 배워서 쓸 필요성을 못 느껴서 (물론 Jekyll이 문제가 많다고 느끼면 다른 SSG를 사용할지에 대해 고민해봐야 할 것이다.) Jekyll을 계속 사용하고 있긴 하다. 일단 Jekyll이 어떤 방식으로 동작하는지 정리해보겠다. (사실 SSG와 동일한 원리인데, 이를 구체화한 것으로 생각하면 된다.)
Jekyll은 동적 웹 사이트 (Dynamic Web Site)과 동일하게, 레이아웃에 해당하는 templates과 컨텐츠에 해당하는 contents를 분리해 저장한다. (이때 Jekyll에서 templates을 작성할 때 사용하는 언어가 Liquid이고, contents를 작성할 때 사용하는 언어가 markdown이다.) 하지만 동적 사이트와 달리, Jekyll은 templates와 contents을 합친 HTML 문서를 미리 빌드해 저장하고, 방문자가 요청을 보내면 정적 컨텐츠에 해당하는 HTML 문서를 전송한다.
그래서 Jekyll은 웹 사이트를 운영하기 위한 HTML 관련 지식을 몰라도, .md 파일로 문서를 작성하면 HTML 파일로 이를 변환해주는 작업을 해주며 변환된 결과물을 토대로 웹 사이트를 구축해서 서비스해준다.
깃허브 페이지 (Github Pages)
상술하였듯 Github Pages는 Github에서 제공하는 정적 사이트 호스팅 서비스로, 무료 계정에 한해 하나의 Github Pages를 무료로 제공한다. Github Pages는 연동된 Github 저장소에서 HTML, CSS, JavaScript와 같은 정적 컨텐츠를 가져와 그대로 배포하는 방식으로 작동한다. 만약 Github 저장소가 Jekyll 디렉토리의 형태로 존재한다면, Github Pages는 해당 저장소가 Jekyll로 작성된 것임을 알고 이를 Jekyll로 빌드해 배포한다.
Reference
- SW developer 님이 작성하신, GitHub Pages 블로그 따라하기
- Wheel 님이 작성하신, 지킬 (Jekyll)