Jekyll Chirpy로 나만의 블로그 세팅하기 (1)
블로그를 쓰기로 결심했다. 그런데 막상 블로그를 쓰려니 어떻게 블로그를 써야하나 생각이 들었다. 그래도 개발 블로그를 쓸테니, 내가 예전에 개발을 하면서 참고했던 블로그들을 한번 생각해봤다. Tistory도 많았던 거 같고, velog도 많았던 거 같고, github.io 도메인을 가진 커스텀 블로그와 medium도 꽤나 있었던 것 같다. 어떤 걸 쓰는 게 좋을까 고민을 많이 하다가, 내가 쓰는 환경을 통합했을 때 좋은 효율을 내는 방향을 택하기로 했다.
내가 많이 쓰는 노트 앱은 뭘까?
회사에서 일을 할 때에는 Notion을 참 많이 썼던 거 같은데, 지금은 Obsidian 을 훨씬 많이 쓰는 거 같다. 그래서 Obsidian 환경과 통합되어서 블로그를 포스팅할 수 있는 방향으로 블로그를 만들어보자는 결론에 도달하게 되었다.
혹시 Notion을 자주 사용하시는 분들이 있다면, 아래 Open Source를 이용하는 것도 괜찮아보인다. Notion Blog Open Source
그런데, Obsidian은 markdown 파일을 더 잘 작성할 수 있게 해주는 IDE 인데, 이 IDE를 통해 쓴 글을 어떻게 배포해야 편리하게 블로그를 쓸 수 있을까? 이를 위해서는, 글을 모아두는 저장소가 있어야하고, 글을 그 저장소에 올리는 순간 자동으로 블로그에 반영되는 Action 이 있어야 이를 자동화할 수 있다는 결론에 도달했다. 그리고 어느 환경에서나 블로그를 쓸 수 있으려면, 인터넷 상에 올라가있는 원격 저장소에 글을 저장해야한다고도 생각했다. 내가 생각한 이 조건에 가장 부합하는 방법은 github과 git action을 이용하는 것이었다. 마크다운 파일을 관리하는 원격 저장소가 있고, 이 원격 저장소에 마크다운 파일을 올리면, 자동으로 blog를 관리하는 레포지토리에 글이 포스팅 되게 만드는 것이다.
그래서 내가 내린 최종 결론은, Tistory, Velog, Medium 등의 플랫폼을 쓰지 않고, 내가 직접 개발하여 커스텀 블로그를 만들고, Obsidian에서 쓴 글을 내 블로그에 바로 반영할 수 있게하는 것이었다. 즉, 직접 코드를 짜서 블로그를 만들겠다는 말이다. 하지만, 코드를 일일이 내가 다 짜게 되면 시간이 너무 오래 걸린다. 블로그라는게, 결국은 글을 쓰는 게 주 목적이 되어야하는데, 블로그를 만드는 데에 시간을 너무 오래 들여버리면 본래의 목적을 이루기가 너무 힘들게 된다. 따라서, 나는 잘 만들어진 블로그 테마들을 찾아보고 마음에 드는 게 있으면 커스텀하기로 결정했다.
그렇게 검색을 하다보니, github에 Jekyll이라고 치고 theme를 골라서 블로그를 운영해보라는 글을 발견했다. Jekyll이 무엇인지 몰랐던 나는 이것이 무엇인지 한번 찾아보았다.
Jekyll
Jekyll은 Ruby로 작성된 정적 사이트 생성기(Static Site Generator, SSG) 이다.
Markdown/HTML 같은 콘텐츠와 YAML front matter + Liquid 템플릿을 결합해 정적 HTML 파일을 생성한다고 한다. 이 글을 보고 이게 무슨 말이야? 라는 생각이 들 것이다. 하나하나 차근차근 짚고 넘어가보자.
Front Matter
Front Matter는 포스팅 될 문서의 메타데이터를 표기하는 하나의 방식이다. 내가 쓰려고 하는 마크다운 파일 가장 앞에 아래와 같이 써서 메타데이터를 표기한다.
1
2
3
4
5
6
7
8
9
---
title: 제목입니다.
description: 설명입니다.
image:
path: /path/to/image
alt: image alt
...
---
Jekyll에서는 포스팅 될 문서를 확인할 때, 가장 앞 줄에서부터 Front Matter가 있는지를 찾고, 이를 이용하여 포스팅될 때 사용될 제목, 설명, preview 이미지, 목차의 유무 등을 판단한다. 즉, 가장 큰 초기 설정 값이라고 생각하면 된다!
Liquid
글을 쓴다는 목적을 가진 블로그에서는 글에 관련된 것 말고는 최대한 집중도를 줄이는 게 좋을 것이다. 이를 도와주는 것이 Liquid 이다. 내가 글을 쓸 때 마다 html에 접근해서 이 글의 제목은 뭐고, 사이트 이름은 뭐고, 기본 설정 값은 뭐고 이런 것들을 다 설정해주는 게 참 귀찮다. 그래서 그 기본 설정값을 어딘가에 저장해두고, globally 하게 쓸 수 있다면, 우리가 직접 코드에 접근해야하는 빈도가 확실히 줄 것이다. Liquid 라는 것은 Shopify에서 처음 만든 Ruby 기반 템플릿 언어이며, 특정 파일(Ex. _config.yml) 에서 설정해둔 전역 설정 값을 가져와서 정적 HTML을 만들 때 자동으로 넣어주는 역할을 한다.
자 그러면, 이제 Front Matter로 포스팅될 글의 메타데이터를 작성하고, 전역 설정 값을 Liquid를 통해 지정한다는 기본적인 원리를 알게 되었다. 마지막으로, 정적 사이트 생성기(SSG) 에 대해서 알아보자.
Static Site Generator(SSG)
이를 설명하기 위해 정적 웹 페이지 에 대한 정의가 필요하다.
정적 웹 페이지 는, 웹 서버에 이미 저장된 파일(HTML 파일, 이미지, Javascript 파일 등)을 클라이언트에게 전송하는 웹 페이지다. 사용자는 서버에 저장된 데이터가 변경되지 않는 한, 고정된 웹 페이지를 계속 보게 된다. 즉, 서버는 필요한 파일들을 내어주면 그 이후에는 이 웹 페이지에 더이상 관여를 하지 않는다는 것이다. 따라서, 모든 사용자는 같은 결과의 웹 페이지를 서버에 요청하고 응답 받게 된다.
SSG는 정적 웹 페이지를 미리 다 만들어놓은 파일집을 추출해주는 툴이다. 이 파일집이 있으면, 유저가 필요한 화면을 그냥 꺼내서 보여주면 되지 않는가? 이 방법은 블로그 같은 환경에 굉장히 좋다.
SEO에 유리하다.
먼저, 블로그는 누군가에게 노출되어야한다. 잘 노출되기 위해서는 SEO(검색 엔진 최적화) 점수가 높아야한다. SEO 점수가 높으려면, HTML을 바로 읽을 수 있게 해야한다. 미리 다 만들어진 파일집에서 정적 파일을 가져오는 것이 아니라, 유저가 블로그에 접근하는 시점에 HTML을 만드는 식으로 해버리면 콘텐츠가 나타나는 데에 시간이 오래 걸려버린다. 그러면 검색 엔진이 우리 콘텐츠가 나타나는 데 까지 기다려야하는건데, 이렇게 되어버리면 SEO 점수는 낮을 수 밖에 없다.
성능이 좋다.
HTML, CSS, JS 같은 정적 파일만 배포되므로, 서버에서 DB 조회 후 동적인 콘텐츠를 렌더링하는 과정이 필요없다. 결과적으로 TTFB(Time to First Byte)가 빠르고, 페이지 로드 속도가 굉장히 빨라진다.
보안에도 좋다.
정적 파일만 제공하기 때문에 서버 사이드 취약점(SQL Injection, XSS via DB 등) 걱정이 줄어든다. 블로그는 보통 글만 읽어도 되기 때문에 동적 서버를 유지할 필요가 없다.
운영 비용이 절감된다.
정적 파일은 Vercel, Netlify, Github Pages 등과 같은 CDN(Content Delivery Network)에서 쉽게 배포할 수 있다. API 요청량이 동적 사이트에 비해 매우 적어서 서버 비용이 거의 없고, 유지보수 및 스케일링 걱정도 크게 줄어든다.
Jekyll Theme
Jekyll은 gem 기반 테마를 지원한다. Jekyll 프레임워크 구조를 보면, _layouts, _includes와 같은 폴더들이 있는데, 이는 UI Layout과 관련된 패키지를 담고 있다. 이를 통해 일관된 Layout을 적용할 수 있다.
여기서 gem이 무엇인가 하고 의문점을 가질 수 있는데, gem은 Ruby의 패키지 관리 단위이다. javascript에서는 npm, Python에서는 pip와 같은 패키지 매니저 격이다. 즉, 누군가가 ‘나 Jekyll로 이런 테마의 Layout을 만들었어!’ 하고 gem에다가 올리면, 우리가 이 테마를 쉽게 Jekyll에 입힐 수 있게 남들이 만든 테마를 가져오는 역할을 해주는 것이 gem이라고 생각하면 된다.
Jekyll에 대해서 더 설명할 게 많지만!! 다음 포스트로 넘어가서, 내가 어떤 Jekyll 테마를 골랐고, 어떻게 설정하여 사용했는지를 다루면서 더 설명하도록 하겠다!