Jekyll 블로그 작업기 2020. 05. 01. 03:11 blog#diary#jekyll#blog 그간 티스토리를 기술 블로그로 쓰고 있었다. 잘 써오고는 있었지만 이상하게 글을 작성하는 데 손이 잘 가지 않기도 하고 바쁘단 핑계로 티스토리 업데이트는 꽤 오랜 기간 동안 멈춰 있었다. 스터디를 할 때는 Notion이나 GitHub에 정리하다 보니 글이 분산되기도 해서 오래 미뤄두었던 Jekyll + GitHub Pages 조합으로 블로그를 다시 세팅했다. 왜 Jekyll? Jekyll, Hexo만 알고 있었는데 그 사이에 Static File로 생성할 수 있는 여러 툴들이 많이 나와 있었다. 최근에는 Gatsby나 Next.js를 많이 사용하는 것 같고 StaticGen에 보면 이 외에도 정말 많다. React를 하고 있으니 Gatsby를 써볼까 싶었지만 익숙하기도 하고 GitHub에서 공식적으로 지원하는 Jekyll을 쓰기로 했다. (Gatsby는 GitHub Pages로 서빙하기도 하지만 Netlify도 많이 사용하는 것으로 보인다.) 단순히 글을 쓰기 위함이라면 티스토리 같은 블로그 서비스나 Notion으로도 충분하겠지만 성에 차지 않았던 까닭은 다음과 같다. 커스터마이징이 용이할 것 디자인이나 CSS를 잘하진 못하더라도, 필요할 때 편하게 커스터마이징 할 수 있었으면 했다. Google Analytics, Google AdSense나 Disqus 같은 애드온들을 수월하게 붙일 수 있으면 했다. Disqus는 달아 두어도 댓글이 거의 없겠지만 😂 카테고리 기능의 지원 Gardenist 스터디 블로그를 Jekyll로 구성하면서 카테고리 때문에 한참을 헤맸더랬다. Jekyll 문서를 정독하고 소스코드를 살펴보니 어떻게 카테고리를 사용해야 할 지 감이 잡혔다.(근데 막상 조사하고 보니 내 블로그를 하나하나 다 읽는 사람은 없을텐데 굳이 카테고리를 노출시킬 필요가 있나 싶어졌다.) Draft Bear나 Evernote에 글거리를 노트해두고 후에 내용을 채워 블로그에 작성하는 경우가 많아서 그럴 거라면 Draft 기능이 있는 게 좋겠다 싶었다. 접근성은 조금 떨어지겠지만 여차하면 GitHub에서 직접 파일을 추가해 둘 수도 있다. Markdown 지원 글의 양식을 설정하는 데에 많은 기능이 필요하진 않았다. Markdown으로도 충분히 표현력이 좋고 소스 코드를 작성하기에도 가장 편리하다. 디자인 어차피 디자인을 잘 하지 못할 것이고, 잘 할 수 있다고 해도 CSS를 작성할 능력이 되지 못하니(…) 심플하고 가독성을 높이는 것에 집중했다. Jekyll의 기본 테마인 minima의 파일 구조를 참고해서 작성했다. 테마 번들이 설치되어 있을 때 bundle info minima --path 명령으로 번들의 위치를 확인할 수 있고 해당 위치에 레이아웃 파일이 함께 있다. CSS가 SASS로 작성되어 있었는데, 일반 CSS 문법도 그대로 사용할 수 있어서 확장자만 scss고 SASS의 중첩 문법만 사용하고 그 외에는 사용해보지 못했다. 얼기설기 일단 모양이 잡히게끔 작성했는데 크로스 브라우징은 감히 엄두를 못내겠다. 모바일 환경(800px 이하)에서는 레이아웃이 깨지는 것과 Page를 보여주는 부분만 손을 봤다. 이 때 @media 쿼리를 처음 써봤다. minima에서 input:checked를 이용해 자바스크립트 없이 메뉴가 보였다, 사라졌다 하는 기법이 있어 같은 방법으로 모바일 버전에 적용해 보았다. 이런 트릭은 누가 생각해내는 것인가.. 존경합니다. 코드 블럭은 Jekyll에서 rouge를 지원하므로 생성된 구문 분석 결과에 syntax-thanksful-eye 테마를 적용했다. console.log("Hello, World!"); 강조 구문은 형광펜으로 그은 것처럼 아래 쪽에만 border를 적용했고, 인라인 코드 블럭은 회색 배경색만 적용했다가, 영 심심해서 글자 색을 탁한 분홍색으로 했다. 링크는 active, visited 모두 까만 색에 밑줄 폰트는 기본으로 Noto Sans KR, 글 내용은 나눔 명조, 코드는 나눔 고딕 코딩을 적용했다. 인용 블럭(blockquote)은 인용임을 알 수 있게 쌍따옴표(“) 기호를 앞에 넣었다. 아직 CSS를 적용하지 않은 것들도 많을텐데, 그 때 그 때 사용하게 되면 수정하고, 우선 작성된 글들에서 사용한 마크다운에 대한 디자인은 완료했다. 이 후에 Google AdSense 승인이 완료되면 포스트 내용의 상단, 하단과 사이드에 광고를 붙여봐야 겠다. 아직 작업해야 할 것들 검색 기능: Static File에서 어느 정도까지 할 수 있을지 모르겠다. 그냥 구글 site: 검색을 하도록 하는 것도 방법일 듯 하다. 검색엔진, 포털에 사이트 등록 Google AdSense 적용 이 체크 박스 스타일링 (W3Schools 참고) Footer 작성 Post 레이아웃에 태그, 카테고리 추가