휴고(Hugo)와 깃허브(Github)로 블로그 만들기(2)

Hugo의 구조와 문법들에 대해 잘 파악해서 사용하면 좋겠지만 블로그 작업을 빨리 끝내고 포스팅을 하고싶은 나로서는 딥하게 공부하는 것은 너무나 귀찮은 일이였다. 그래서 당장 수정하고 싶은 몇가지 부분만 수정했다.

먼저 테마는 hugo-hello-programmer-theme을 사용했다. 그냥 적당한 테마를 찾다보니 눈에 띄었는데, 마침 한국분이 만드신 거라 한글 지원도 잘되어있고, 다른 기능들도 만족스러워서 사용했다. 지금부터 설명하는 내용은 모두 이 테마를 기반으로 되어 있기 때문에 다른 테마에서는 적용되지 않을 수도 있다.

그럼 이제부터 내가 한 귀찮은 작업들을 정리해 본다.

사전 작업

테마를 받았다면 /themes/ 디렉토리에 받은 테마 프로젝트가 있을 것이다. /themes/에 들어있는 프로젝트를 확인해보면 알겠지만 테마 프로젝트도 우리가 만든 hugo 프로젝트와 동일한 구조를 가지고 있다. 그래서 직접 테마 프로젝트의 파일을 수정해서 블로그를 커스터마이징 할 수도 있지만 원본을 남겨놓는 방향으로 작업하는 것이 나중에 참고 하기 좋다.

원본을 남겨놓고 작업하는 방법은 테마 프로젝트의 파일들을 동일한 구조로 내 프로젝트로 옮기는 것이다. 즉, /themes/<THEME-NAME>/layouts를 /layouts로 복사하면 된다.

테마를 커스터마이징하려면 주로 layouts와 static 디렉토리만 사용하면되기 때문에 난 이 두 디렉토리만 복사해서 사용했다. layouts는 html 파일들, static에는 이미지와 css 파일이 있다.

로고 수정

새로운 테마로 서버를 띄우고 나서 가장 수정이 필요하다 싶었던 것은 블로그 로고 였다. layouts/partials/header.html을 보면 페이지 위쪽 부분을 구성하는 코드가 있는데, 여기서 static/images/logo.png를 들고온다. 그래서 이 이미지만 다른 적당한 이미지로 수정하면 해결된다.

로고 외에 메뉴 구성같은 것들도 header.html에서 수정할 수 있다.

로고는 여기서 만들었다. 디자인 문외한인 나도 쉽게 만들 수 있었다.

디폴트 색 수정

링크에 마우스를 갖다 대거나 포스트 제목같은 곳에 같은 색을 사용하도록 구성이 되어있는데 원본과는 다른 색을 사용하고 싶었다. 이런건 보통 css 파일에서 관리하기 때문에 static/css/style.css의 디폴트 색을 내가 원하는 색으로 바꿔서 해결할 수 있었다.

subcategories 추가

원래 테마 프로젝트에서는 front matter에 categories까지 밖에 없는데 좀 더 세분화 해서 카테고리 관리를 하고 싶었다. 이건 마침 이 블로그에 설명이 잘 되어있어서 이걸 참고했다.

code block 표시 수정

markdown에서 single quote(`)로 짧은 code block을 만들 수 있는데 이게 웹페이지에서는 좀 어색하게 나타나는 현상이 있어서 계속 거슬렸다. 처음에는 이것도 css로 바꿀 수 있다는 것을 몰라서 삽질을 했는데, markdown에서 code black으로 쓴건 html에서 <code로 나오기 때문에 css에서 수정하면된다.

Mathjax 추가

글 안에서 수식을 넣어야할 때가 있는데, mathjax를 이용하면 쉽게 수식을 만들 수 있다. 이것도 여기에 잘 설명되있으니 참고하면 되겠다.

테마 원본에도 다음글 / 이전글 기능이 구현되어 있긴 했지만, 모든 포스트에 대해서 무조건 시간 순서대로 구현되어 있었기 때문에 상관없는 글이 다음글 / 이전글에 나타났다. 그리고 디자인 적으로도 수정이 필요하다고 생각해서 템플릿도 수정했다.

구글링을 좀 해보니 포스트를 섹션별로 저장할 수 있었고, 모든 포스트가 아닌 섹션별로 다음글 / 이전글을 구현할 수 있었다.

섹션에 대해서는 공식 가이드에 설명이 잘 되어있다. content 내에 디렉토리를 만들고, 디렉토리 내에 _index.md 파일을 생성하면 hugo에서 섹션으로 인식한다.

html에서 섹션 내 다음 포스트나 이전 포스트를 들고 오려면 .PrevInSection, .NextInSection으로 들고 올 수 있다.

기타 팁

로컬에서 수정해서 서버를 띄워도 바로 수정사항이 반영되지 않는 경우가 많은데, 브라우저 자체에서 페이지를 캐싱하기 때문이다. 그래서 수정사항을 바로 확인하고 싶으면 ctrl+shift+R로 새로고침하면 된다.(크롬 기준)
Windows + Ubuntu 환경에서 작업할 때는 Windows 파일 시스템에서 바로 파일을 Ubuntu 디렉토리 경로로 넣으면 Ubuntu에서 보이지 않는다. 그래서 나는 $ touch <FILE-NAME>으로 파일을 먼저 만들고 덮어 씌우는 식으로 파일을 옮겼다. 다른 더 좋은 방법이 있을 것 같긴한데 찾기가 귀찮다.
html icon 리스트 : https://fontawesome.com/v4.7.0/icons/

수정하면서 상당히 삽질을 많이 한 것 같은데 생각보다 별로 한게 없는 것 같다. 앞으로 운영하면서 수정할 때마다 여기에 써야겠다.

Reference