시작하며

대학교 1~2학년 때쯤에는 새로운 것들을 배우고 따라가기위해 이것저것 시도하려는 의지가 컸다. 보고 들은 것들을 정리하기위해 티스토리 블로그 초대장을 어떻게든 얻었고, 블로그에 글도 한창 올릴 때가 있었다. 어느 순간부터는 이런저런 일도 많이 겪고 하다보니 한동안 블로그를 신경도 안쓰고 있었는데, 작년에 대학원을 휴학하고 회사에 입사하면서 블로그를 만들어야겠다는 생각이 다시 들었었다. 그리고 1년 반이 훌쩍 넘게 지났다. 😂

글이라는 것도 계속 쓰지않으면 쓰는법을 잊고, 공부도 꾸준히 하지 않으면 대부분 잊어버린다. 개인적인 사정으로 쉬었던 공백기간이 너무나도 길었었기 때문에, 공백을 메우기 위해서라도 정리할 공간이 꼭 필요했다. 그래서 연말이 된 기념으로 기분도 좀 환기할겸 블로그를 다시 만들어보기로 했다. 이번에는 쓸데없이 큰 꿈 꾸지말고, 쉬운 방법부터 시작하기로 했고 SSG(Static Site Generator) + Github Pages 를 사용하기로 마음먹었다.

SSG(Static Site Generator)를 선택한 이유

사실 내가 과거에 선호했던 방법은 사이트를 직접 만들고 서버에 띄워서 운영하는 거였다. 그런데 그렇게 운영할 경우 아주 큰 단점이 존재하는데 우선 서버가 필요하고(💸) 사이트의 내용을 채우기 보다는 구축된 사이트를 운영하는 것 그자체에 리소스가 굉장히 많이 든다는 것이다.(⌛)

SSG의 경우 일반적으로 글을 작성하고 컴파일하면, 동적으로 외부 DB나 서버와 통신하며 사이트의 내용이 변화하는게 아닌, 정적인 HTML, JS, CSS 파일 등이 생성되어 그 자체로 서비스될 수 있는 형태로 제공된다. 그래서 AWS의 S3나 Github Pages 처럼 따로 서버를 관리하지 않아도 되는 서비스를 이용해서도 운영할 수 있다.

SSG Framework 선택

SSG 프레임워크는 선택지가 굉장히 많다. Jamstack 사이트에 가보면 Site Generator를 정리해놓은 페이지가 있는데, 언어별, 라이센스별로 필터링하거나 Github Stars 기준으로 정렬해서 볼 수도 있다.

일반적인 웹 프론트엔드 프레임워크는 제외하고, SSG 만을 위한 프레임워크로는 Hugo, Jekyll, Gatsby 같은 것들이 가장 유명하다. Github Pages 라는게 처음 나왔을 때는 Jekyll이 가장 많이 사용되었지만 최근에는 좋은 SSG 프레임워크들이 많이나와서 선택지가 넓어졌다. Hugo는 Golang으로 만든 프레임워크이고 Gatsby는 React를 기반으로 하는 프레임워크다. 사실 나는 최근에 Rust에 관심이 많아서 Zola도 후보군에 넣었다.

개인적으로 NodeJS는 선호하지 않아서 Gatsby는 제외하고 Hugo와 Zola중에 고민을 했다. 둘 모두로 블로그를 세팅해봤고, 장단점이 명확했다.

우선 Hugo는 SSG 프레임워크중에 가장 Github Star 수가 많으며, 테마도 많이 가지고 있다. Go로 작성되어서 속도도 빠르다. 사실 거의 단점이 없는데, 나에게 단점으로 다가왔던 부분은 프로젝트의 초기 세팅이었다. Hugo의 디렉토리 구조를 처음봤을때 문서를 어느정도 뒤져보지 않으면 알기 힘든 부분들이 있었다. 그리고 Template 문법이 내 취향이 아니었다.

Zola도 Rust로 작성되어서 속도는 말할 것도 없고, Hugo와 다른 템플릿을 사용하는데 개인적으로 이쪽이 더 직관적이고 알기가 쉬웠다. Zola의 템플릿 문법은 Jinja2와 유사한데, 예전에 웹을 처음으로 입문했을 때 Django와 Flask로 입문해서 더 익숙한 것 같다. 프로젝트 구조도 더 마음에 들었으나, 가장 큰 단점은 역시 상대적으로 신생프로젝트라 테마의 수가 적다는 점이었다.

단점이 있더라도 Zola로 해보려고 했으나 도저히 마음에 드는 테마를 찾지 못하고, 직접 테마를 제작할 시간은 더 없었기 때문에 결국 최종 선택은 Hugo가 되었다. 물론 Hugo도 굉장히 훌륭한 프레임워크이기때문에 선택에 후회는 없다.

테마 선택

테마를 선택할 때 기준이 있었는데, 아래 네 가지였다.

  1. Dark/Light 모드 제공
  2. 검색 기능 제공
  3. RSS or ATOM 제공
  4. 심플한 디자인

블로그 테마로는 사실 Hugo에도 내 마음에 쏙 드는것은 없었으나, 일단 사람들이 아주 많이 사용하고 최근까지도 유지보수가 잘 되고있는 Papermod 테마를 사용하기로 했다. 아마 나중에는 내가 직접 테마를 제작하게 될 지도 모르겠다. 일단은 Papermod를 Fork해서 사용하기로 했다.

호스팅 서비스 고르기

사실 여기는 딱히 쓸 말이 없다. 처음부터 Github Pages를 사용하려고 했기 때문에… Netlify와 같은 서비스를 사용해도 되지만 굳이 그럴 필요도 없었고, 어차피 Git으로 게시글을 관리할 계획이었기때문에 Github Pages를 쓰는게 가장 효율적이었다.

Github Pages 세팅

사실 *.github.io 주소를 사용하기로 했다면, 그리고 Public repository에 블로그가 있다면 세팅할 부분이 많지 않다. <본인의 Github ID>.github.io 로 된 Repository를 만들고 해당 Repo의 Settings에 가서 Github Pages를 활성화하기만 하면 된다. 프로젝트의 루트 디렉토리("/") 또는 docs 디렉토리("/docs")를 호스팅할 수 있다.

나는 개인 도메인(blog.tanto.dev)을 사용할 예정이었기 때문에, Settings에 추가로 개인 도메인 설정을 해주었다. 그리고 gh-pages 브랜치를 따로 운영하지 않고 main 브랜치의 /docs 디렉토리를 배포하도록 설정했다. 이렇게 한 이유는 Github Pro를 사용할 경우 Private Repo를 Pages로 호스팅 할 수 있어서, 글을 작성한 뒤 바로 빌드하고 main에 푸시하는 식으로 게시글을 관리하기 위해서다. (Pro 좋아요 👍)

my github pages settings

후기

일단 기본적인 세팅을 이것저것 하는데만 이틀은 걸린 것 같다. 대부분의 시간은 프레임워크 이해하기, 테마의 템플릿 코드를 수정하고 싶은 부분들이 어디 있는지 찾기 등등 그런곳에 쓴 것 같다. 테마를 고르는 데도 시간이 오래걸렸다. 테마마다 설정하는 것들이 많이 달라서, 나중에 글이 많이 쌓인 뒤에 테마를 바꾸려면 골치아플 것 같아서 시간을 많이 쓴 것 같다.

나름대로 favicon도 만들어서 넣고, 프로필 사진도 설정해놓고, 자잘한 테마 사용법도 익혔으니 무언가를 많이 한 것 같다. 무엇보다 중요한 것은 앞으로 이 블로그에 꾸준히 컨텐츠를 채워넣는 일인데… 오랜 시간이 지나버리긴했지만 첫 삽을 뜨긴했으니까! 컨텐츠 채워넣는 일도 어떻게든 하지 않을까..?

종종 생각나면 글 하나씩 남기는 것을 목표로 해야겠다.