참고로 작성시점이 아닌 현재 시점의 필자는 아래처럼 생각하지 않습니다.
Next.JS 가 최고입니다. Next 씁시다.

jekyll을 사용한 블로그 개발 후기. 밤새서 개발했기 때문에 잠을 자면서 개발한다면 3일 정도가 걸리지 않았을까 예상한다.

개발한 후기에 가까운 글이고, 빠르게 블로그를 개발해보고싶다면 추천하는 포스트.

서론

이전에도 블로그를 개발한 적이 있었다. 그 때는 직접 AWS에 가서 서버도 굴리고 node로 백엔드도 짜고 프론트엔드도 React같은거 써서 짜고 그랬다.
당연히 구현할것도 한 두개가 아니고 정말로 하나하나 처음부터 끝까지 다 내가 만들어줘야 했기 때문에 시간이 정말 오래걸렸다.

그랬는데? 서버에 올려놓고 한 달이 지나니? 서버비가? 몇만원이 나왔던걸로 기억한다.
고생은 고생대로 하고 돈은 돈대로 나가는데... 이걸 유지할 이유가 없었다.

그래서 이번에는 쉽고, 빠르고, 돈이 안드는 블로그를 만들어봤다. 정말 쉽고 빠르며 무료다. 정말로.

쉽고 빠르고 무료라니

물론 쉽고 빠르며 무료이기 때문에 제한되는것도 분명 있지만, 적어도 내가 블로그를 만든 목적과 그에 필요한 기능들은 전부 구현 가능했기 때문에 괜찮았다.
쉽고 빠르며 무료이기 때문에 할 수 없는 것들은 다음과 같다:

• 백엔드 구현 불가능
  • 백엔드에 손을 댈 수 없다. 그렇기 때문에 그냥 정적인 페이지만 만들 수 있다.
  • 따라서 DB라던지, 뭔가 동적인건 못한다.

뭐지? 엄청 많은 것 같았는데 이거밖에 생각이 안나네.
이러면서 쉽고 빠르고 무료...이걸 왜 이제 알았지.
사실 백엔드 구현 안되는게 좀 큰 문제긴 한데, 운이 좋았다고 볼 수도 있겠다.

그래서 뭐 썼는데요

jekyll과 github pages를 썼다.
jekyll은 템플릿 HTML 및 md파일 몇 개와 포스트 md파일 몇 개를 만들어주면 자동으로 정적 사이트를 만들어주는 툴로, 공식 페이지에만 가도 이미 블로그 지향이라고 나와있다. 테마도 정말 많아서 입맛에 맞게 골라 쓰거나, 마음에 드는게 없으면 필자처럼 직접 만들어도 된다. 이때 만들었던 테마는 테마 사이트에 올라온 것들 중 하나 생긴거 보고 취향에 맞게 변형해서 다시 짠거긴 하다.

github pages는 git repository에 정적 사이트를 업로드 하면 user-name.github.io/repository-name으로 접속할 시 repository에 있는 사이트를 보여주는 시스템이다. 도메인도 당연히 커스텀 가능하다.

대강의 과정은 어떤데요

생각해보니 내가 jekyll에 대해 이전에 한 번 정도 공식 문서를 읽어보면서 살펴본 적이 있었다.
그래서 정말 아무것도 모르는 상태에서 jekyll에 대해 공부하면서 개발한다면 음...3일은 좀 무리가 있을지도.

암튼 다음과 같다:

• jekyll 공식 문서를 참고해서 개발환경을 세팅한다.
• 공식 문서를 찬찬히 살펴본다. 그냥 눈으로 훑어도 될 정도로 쉽다.
• liquid 문법만 좀 신경써서 살펴보고, 프론트엔드 개발하듯이 템플릿 HTML들을 만든다. jekyll의 내부 변수와 liquid 문법을 사용해서 어렵지 않게 만들 수 있다.
• 첫 포스트를 적는다. jekyll에서 말하는 front matter (머리말)을 포함한 markdown 형식이다.
• 여기까지 왔으면 블로그가 완성된다. localhost에서 돌려보면 잘 될것이다.
• 이걸 이제 git 저장소에 올리고, Page 세팅에서 적절한 브랜치를 선택해준다. 이 과정이, jekyll을 사용하면 좀 번거롭다. 커스텀 도메인까지 쓴다면 더더욱. 이 과정에 관해서는 여기 에서 다루고 있으니 이 글을 다 읽고 참고하는 것도 좋겠다.

끝이다! 프론트엔드에 익숙할수록 마지막과정 전까지는 빠르게 작업할 수 있다. 처음 jekyll을 접한다면 생소할 수는 있겠지만 결코 어렵지는 않다. 솔직히 공식 문서가 너무 잘되어있다...

내가 겪은 문제점과 해결한 방법들

우선 위에서 설명한 과정만을 따른다면 포스트와 메인화면밖에 없는, 정말 포트폴리오 그 이상도 이하도 아닌 블로그가 완성된다.

여기까지 오면서 생기는 문제점은 다음과 같다:

• paging 구현이 좀 애매하다. paginator라는 gem이 있긴 한데, 이거 지원도 끊긴대다가 메인화면에서밖에 안된다.
  paginator-v2라는 gem도 있긴 한데 이건 github-page에서 지원을 안해서 몇 가지 추가 작업이 필요하다.
  물론 불가능하지 않다. 귀찮을 뿐이다. 이 문제에 관련해서는 위에도 잠깐 언급했던 여기 에서 다루고 있으니 확인해보자.

그리고 추가적인 기능 구현을 위해 생기는 문제점들은 다음과 같다:

• 댓글기능이 필요한데 백엔드 구현을 못하므로 서드파티를 가져다 써야한다. 필자의 경우에는 utteranc.es를 사용해서 해결했다.
  댓글을 달려면 github 계정이 필요한게 좀 크리티컬한 문제지만... 어차피 지금 상황에서 여기에 댓글을 쓸 사람도 없을 것 같고 약간 명목상의 기능이라 그냥 넘어갔다.
  이에 관해서는 언제 한 번 포스트를 써볼까 한다. 추가되면 링크를 걸어야지.
• 검색기능도 필요한데 마찬가지로 백엔드 구현을 못하므로 서드파티를 가져다 써야한다. 필자는 lunr를 사용해서 해결했다. 이것도 언젠가 포스트를 쓸 것이다. 추가되면 링크를 걸겠다.
  단, 검색결과는 페이징을 못한다. 검색결과가 만약에 1000개면 1000개 모두 한 화면에 출력될 것이다. 이건...자바스크립트를 빡세게 짜면 가능할 것 같긴 한데 귀찮아서 아직 안했다. 이게 해결되면 또 별도로 포스팅을 써야지.
• 커스텀 도메인을 설정할 때 레코드 설정이 좀 귀찮다. 어렵진 않은데, 모르고 하려면 인터넷 좀 뒤져야한다. 이것도 나중에 시간나면 Route53 기준으로 포스팅을 해야지.

문제점도 별로 없는 편이다. 진짜 백엔드 구현 못하는거 빼면 단점이 없는데 간단한 포트폴리오 용 정적 블로그를 원한다면 장점 뿐인 그런... 느낌인 것 같다.
어째선지 벌써 글쓸 거리가 3개가 넘은 것 같은데

후기

솔직히 2일 써서 이정도의 블로그를 만든게 굉장히 마음에 든다. 거듭 강조하고 있는 쉽고 빠르고 무료로 내 취향에 맞게 커스텀해서 블로그를 운영한다니 정말 대만족이다.
정말 배경지식만 좀 있는 상태에 빈 폴더에서 시작했는데 2일만에 이정도면... 진짜 빠른거 아닌가? 아닌가??
개발에 뭐 깊은 지식이 필요하지도 않고, 조금 빡세게 하면 오래 걸리지도 않고, 돈도 전혀 들지 않는다. 정말 짱이다.

그리고 백엔드를 구현할 수 있어도... 지금까지 한거 백엔드로 구현하라 그러면 그냥 안할 것 같다. 귀찮다...
아무튼, 앞으로를 위해 블로그를 만들어야겠다면 jekyll과 github page를 활용해서 정적인 블로그를 만들어보는 것도 고려해볼만 하다.

댓글 기능 구현에 관한, 검색 기능 구현에 관한, 커스텀 도메인 설정에 관한, 검색 후 페이징 기능 구현(해결이 된다면)에 관한 글을 쓰게 된다면 본문과 이 아래에 링크를 첨부해둘테니 참고할 사람은 참고해주면 좋겠다.

님들도 jekyll 쓰세요!!! ???