대상 독자

• 마크다운으로 작성할 수 있는 나만의 블로그를 만들고 싶은 분들
• Hugo Book 테마를 사용해 본문 레이아웃을 개선하려는 분
• Disqus 등 외부 댓글 시스템 연동을 고려하는 분

주요 내용

• Book 테마에서 본문 헤더를 개선하는 과정 (제목 추가하기 / 커버 이미지 표시하기)
• Book 테마에서 본문 푸터를 개선하는 과정 (이전, 다음 게시글 링크 추가하기 / 태그 목록 표시하기)
• Disqus 댓글 기능 추가하기 (댓글 기능 추가하기 (Disqus))

앞선 게시글에서 Book 테마의 검색 프로세스를 개선했습니다. 기존 Book 테마에 없던 검색 페이지까지 추가되어 사용자가 원하는 키워드를 포함한 게시글을 더 직관적으로 알릴 수 있게 되었습니다.

대상 독자

• 마크다운으로 작성할 수 있는 나만의 블로그를 만들고 싶은 분들
• 블로그를 기능적으로 또는 시각적으로 커스터마이징 하고 싶은 분들
• Fuse.js를 활용한 클라이언트 사이드 검색을 구현하려는 분들
• 자바스크립트 이벤트 리스너와 가상 DOM을 활용한 사례를 찾고 있는 분들

주요 내용

• Book 테마 검색 프로세스 분석 (Book 테마 검색 프로세스 분석)
• Book 테마 검색창의 UI 및 기능 개선 (검색 기능 개선)
• 템플릿 구조 재설계 및 window 전역 객체 활용 (검색 기능 파일 구조 재설계)
• 검색 결과를 표시하기 위한 DOM 조작 최적화 (검색 수행 및 결과 필터링)

앞선 게시글에서 Book 테마의 태그와 카테고리 페이지를 구성하기 위한 Taxonomies 기능에 대해 알아보았습니다.

대상 독자

• 마크다운으로 작성할 수 있는 나만의 블로그를 만들고 싶은 분들
• 블로그를 기능적으로 또는 시각적으로 커스터마이징 하고 싶은 분들
• Hugo에서 지원하는 taxonomies 기능을 활용한 사례를 찾고 있는 분들
• 블로그에 2단계 카테고리를 구현하고 싶은 분들
• HTML/CSS를 이용한 단일 웹 페이지 구성에 익숙하신 분들

주요 내용

• Hugo의 taxonomies 기능과 구성 요소 이해 (Taxonomies)
• 게시글 목록과 페이지네이션 템플릿 구현 (게시글 목록 템플릿 추가 / 페이지네이션 템플릿 추가)
• 태그 페이지 추가 및 terms 템플릿 작성 (태그 페이지 추가)
• 2단계 카테고리 구조 설계 및 부모-자식 카테고리 템플릿 구현 (카테고리 페이지 추가)
• 메뉴 영역에 카테고리 트리 통합 및 게시글 카운팅 (메뉴에 카테고리 추가)

앞선 게시글에서 Book 테마의 메인 레이아웃인 메뉴, 목차, 헤더를 개선해보았습니다.
앞에서의 과정을 거쳤다면 프로필 사진, 소셜 링크, 스크롤 이동 버튼 등이 블로그에 추가되었을 것입니다.

대상 독자

• 마크다운으로 작성할 수 있는 나만의 블로그를 만들고 싶은 분들
• 블로그를 기능적으로 또는 시각적으로 커스터마이징 하고 싶은 분들
• Hugo 템플릿 구조에 대해 이해하고 싶으신 분들
• HTML/CSS를 이용한 단일 웹 페이지 구성에 익숙하신 분들

주요 내용

• Hugo 템플릿 구조와 Book 테마에서 활용되는 템플릿 (Book 테마 알아보기)
• Book 테마의 메인 레이아웃을 둘러보며 각 영역을 구별 (메인 레이아웃 개선하기)
• Book 테마에서 메뉴/목차/헤더 영역을 개선하는 과정 (메뉴 영역 개선하기 / 목차 영역 개선하기 / 헤더 영역 개선하기)

앞선 게시글에서 Hugo 테마에 대해 둘러보고 Hugo 프로젝트 구조를 설계하는 방법을 알아보았습니다.

대상 독자

• 마크다운으로 작성할 수 있는 나만의 블로그를 만들고 싶은 분들
• 블로그를 기능적으로 또는 시각적으로 커스터마이징 하고 싶은 분들
• Github Pages 서비스를 활용한 웹 호스팅을 하고 싶은 분들
• Git Submodules 기능을 활용한 프로젝트 구성 방식을 알고 싶은 분들

주요 내용

• 과거 다른 블로그 플랫폼을 이용하면서 겪은 경험 및 장단점 (나만의 블로그를 만들게 된 계기)
• 나만의 블로그에 추가하고 싶은 기능 목록을 영역 별로 나열 (나만의 블로그 기획하기)
• 관심있는 Hugo 테마에 대한 소개 (기본 테마 선정하기)
• Hugo 설치부터 Submodule 활용까지 프로젝트 구조를 설계하고 배포 스크립트 작성 (블로그 프로젝트 구성하기)

나만의 블로그를 만들게 된 계기 #

블로그 플랫폼을 선택하는데 있어 편의 기능, 외관, 작성 방식 등을 고려할 수 있습니다.

블로그를 구성할 때 기술적, 시간적 한계 때문에 이미 만들어진 테마를 사용하게 됩니다. 제가 Hugo 블로그를 만들 때도 이러한 문제 때문에 PaperMod 테마를 사용했지만, 블로그를 보다보면 만족스럽지 못한 부분이 발견됩니다.

이번 포스트에서는 제가 PaperMod 테마를 커스터마이징한 과정을 안내해드리겠습니다.

Archive, Search 추가하기 #

PaperMod 테마를 가져오면서 가장 신경쓰였던 부분은 메인 메뉴가 Categories, Tags 두 개 뿐이었단 점입니다.

Archive는 그렇다쳐도 Search 기능은 빼먹을 수 없는 부분이라 생각하기 때문에, Hugo 및 PaperMod 내 이슈를 참고하여 관련된 내용을 탐색했습니다.

Hugo 블로그는 기본적으로 댓글 기능을 제공하지는 않습니다.

제가 사용하는 PaperMod 테마에서는 서드파티 서비스인 Disqus를 위한 레이아웃이 존재하지만, 저는 기본적인 블로그 운영을 Github 플랫폼 내에서 구성하고 싶기 때문에 다른 기능을 사용해보려 합니다.

이번 포스트에서는 Utterances 댓글 기능을 추가하는 방법을 안내해드리겠습니다.

Utterances 설치하기 #

Utterances는 Github issues 기반으로 댓글을 관리하는 기능입니다. 무료 플랜에서 광고가 붙는 Disqus와 다르게 별도의 유료 플랜이 없어 간편하게 사용할 수 있습니다.

Utterances 설치는 단순히 레이아웃 상에서 댓글이 위치할 곳에 자바스크립트 코드를 삽입하면 됩니다. 하지만, 선행적으로 해당 링크를 통해 Utterances와 연동시킬 저장소를 등록해야 합니다.

얼마 전, 티스토리 블로그에서 Jekyll 블로그로 이동했는데, 처음 기대했던 submodule을 활용한 효율적인 저장소 연동에서 어려움을 겪고 다른 대안을 탐색하게 되었습니다.

Jekyll 블로그를 사용함에 있어서, Ruby 언어로 구성된 블로그 구조에 대해 이해하기 어려운데다가 로컬 환경에서 Jekyll 블로그를 실행하면서 발생하는 에러를 처리하는데도 난항을 겪었는데, 웹상에서 자동 배포가 이루어지는 과정에서 submodule인 TIL 저장소를 포스트로 인식하지 못하는 문제가 있었습니다.

Jekyll 블로그의 대안으로 Hexo 및 Hugo 프레임워크에 주목했고, 두 제품의 장단점을 비교하여 상대적으로 배포가 빠르고 현재까지도 업데이트가 이루어지는 Hugo를 선택했습니다.

블로그를 처음 시작함에 있어서 모든 것이 준비된 호스팅 서비스의 편의성은 무시할 수 없습니다. 저도 처음엔 코드를 직접 건드리는 자유도 높은 방식의 블로그에 진입 장벽을 느끼고 가볍게 시작할 수 있는 티스토리를 통해 블로그에 입문했습니다.

하지만, 개발적 지식을 학습하면서 깃허브에 마크다운 문서를 올리는 빈도가 늘어났고, 깃허브에 올린 문서를 굳이 티스토리로 다시 옮겨 담는 것에 불편함을 느끼게 되었습니다.

마크다운 문서를 자주 작성하고 깃허브 저장소를 학습 노트로 활용한다면, 깃허브 블로그를 구성해보는 것이 문서를 통합적으로 관리할 수 있다는 점에서 매력적이라 생각합니다.