보통은 지킬이나 휴고를 이용한 블로그 구축 방법을 보면, config.yml 또는 config.toml 부터 설명할 것이다. 심지어 지킬은 공식 홈페이지에서 루비 사용법부터 언급하고 있으니 배보다 배꼽이 더 큰 상황이랄까. config.toml은 블로그에 관련된 각종 설정들을 담는 중요하고 필수적인 파일이지만 필자는 config.yml에 대해 설명하는 문서의 단 한 줄도 보지 않았다. 블로그를 구축하면서 필요할 때마다 건드려도 충분하고, 오히려 블로그가 개선되어지는 모습에 재미를 느끼게 될 것이다. 그래서, 바로 테마를 적용해 보도록 할 것이다.

테마 선택

아래 페이지는 휴고 측에서 걸어놓은 테마들을 전시하고 있다. 마음에 드는 테마를 선택하면 된다. 꼭 여기 없더라도 휴고나 지킬 등과 호환되는 여러 테마들을 제공하는 사이트들이 있으니 해당 사이트들을 이용해도 좋겠다. 다만, 본 블로그는 아래 사이트에 두 번째로 걸려있는 테마인 PaperMod라는 테마를 이용했다.

https://themes.gohugo.io/

해당 테마를 비롯해 위 사이트의 테마들은 완성도가 높기에 추천할 만하다. 완성도란? PaperMod 테마를 예로 들면, 테마 자체가 반응형 웹 디자인(Responsive Web Design)으로 구현되었고, 휴고가 제공하는 다중 언어 모드(Multilingual Mode)도 지원한다. 또한, 구글 서치 콘솔(Search Console), 빙 웹 마스터(Web Master), 구글 애널리틱스(GA: Google Analytics)와 쉽게 연동 가능하고, 오픈 그래프(Open Graph)를 이용하여 검색 엔진 최적화(SEO: Search Engine Optimization)가 쉽도록 하고 있다. 애드센스(Google Adsense)를 포함하여 이런 외부 서비스들을 사용하기 위해서는 테마를 선택한 후에 직접 적용해야 한다. 그러므로 필자처럼 완성도 높은 테마를 선택하여 원하는 구성으로 튜닝하는 것도 좋을 것 같다.

테마 다운로드

이전 포스트에서 휴고를 이용하여 블로그를 생성했다면 아래와 같은 디렉토리들을 확인할 수 있을 것이다.

quickstart $ tree
.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

6 directories, 2 files

6개의 디렉토리와 2개의 파일. 매우 심플한 구조이다. 여기서 어떤 경로로 다운을 받든, 테마는 themes 폴더 아래 임의의 폴더에 넣으면 끝이다. 깃허브(Github)에 저장된 PaperMod 테마는 아래의 쉘 명령어로 themes/PapperMod 디렉토리 아래에 다운받을 수 있다.

$ git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1

테마 적용

다운받은 테마를 적용하기 위해서 아래 처럼 config.toml에 “theme: PaperMod"라고 적어준다. 말 그대로 “theme/PaperMod"에 위치한 테마를 사용하겠다는 의미이다. 이 때, baseURL은 웹 사이트의 주소이고, title은 웹 사이트의 이름으로 변경하면 된다.

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = "PaperMod"

블로그 테스트

적용된 테마를 바로 확인해보고 싶지 않은가? 아래의 쉘 명령어는 블로그를 생성하는 동시에 웹 서버를 띄운다. 웹 브라우저 상에서 “localhost:1313"에 접속하면 해당 웹 서버가 제공하는 나의 블로그를 테스트 할 수 있다.

// Serve the site on "http://localhost:1313"
$ hugo server -D

글쓰기

아마도 테마는 적용된 것 같은데 글이 없으므로 여러가지 기능을 테스트하기가 힘들 것이다. 그 유명한 lorem ipsum 글을 하나 써보자. 글은 content 폴더 아래 새로이 생성한 post라는 폴더에 저장한다. 파일명은 무엇이든 상관없지만 “loremipsum.md"로 하고, 마크다운(Markdown) 형식으로 글을 작성하여야 한다. 아래의 내용을 적어보자. 앞서 실행한 웹 서버를 종료하지 않았다면 해당 파일을 저장하는 순간에 휴고는 블로그를 새로이 빌드하고 띄워높은 웹 브라우저는 새로고침되어 수정사항을 즉시 확인할 수 있다.

---
layout: post
title:  "Lorem ipsum"
date:   2022-06-20 22:00:00
draft: false
categories: [lorem]
tags: [lorem, ipsum]
comments: true
---

## 제목 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

config.toml 수정

앞서 config.toml을 따로 배워서 적용하기 보다는 블로그를 만들어 가면서 수정해나가는 것도 좋다고 언급했다. 하지만 아무래도 테마 자체가 config.toml을 참조하기 때문에 테마의 진면목을 알기 위해서는 config.toml을 제대로 세팅하는 것도 필요하다. PaperMod 테마는 config.toml의 샘플을 제공하기 때문에 이를 가져다가 사용하고 하나씩 빼거나 수정하는 것을 추천한다.

블로그 출판

만약 수정에 수정을 거듭해서 이 쯤하면 완성된 블로그다………

$ hugo -D

독자들에게

지금까지 한 작업들을 요약해보면 사실 직관적이다. 적용하고 싶은 테마를 다운받고, config.toml을 수정하여 테마 적용과 함께 블로그 이름 등과 같은 각종 설정들을 부여한 것이다. 여기까지 했다면 최소한 운용 가능한 블로그가 만들어 진 것이다.

본 글을 재미있게 읽은 독자들에게…

본 글을 재미있게 읽은 독자들에게는 config.toml의 각종 설정들을 지우거나 수정해보면서 블로그가 어떻게 바뀌는 지 보고 본인 만의 블로그를 구성할 것을 추천드린다.

테마의 디자인에 더 욕심이 많은 독자들에게…

HTML(Hyper-Text Markup Language), JavaScript, CSS(Cascading Style Sheet)에 지식이 있거나, 시간이 많거나?, 테마의 디자인에 관하여 더 욕심이 있는 독자들에게는 테마를 직접 수정해 보는 것도 추천드린다. 다만, 이 경우에 theme/PaperMod의 테마 원본을 수정할 필요가 없다는 사실만 전달드리고 싶다. 휴고는 테마 오버라이딩(theme overriding)을 지원하기 때문에 수정하고 싶은 파일의 사본을 layouts 폴더에 저장하면 된다.

블로그의 상단 내비게이션 부분을 수정하고 싶은 상황을 가정하자. 해당 부분은 themes/PaperMod/layouts/partials 폴더의 header.html이 담당한다. 아, 그렇다면 해당 파일을 수정하면 되겠구나! 물론 된다. 그러나 원본이 훼손되고 어떤 부분을 수정했는지 추후에 알기가 어렵다. 그러므로 layouts/partials 폴더에 해당 파일의 사본을 만들고 사본을 수정하도록 한다. 이렇게 되면 휴고는 원본 대신 사본을 이용하여 블로그를 빌드한다.

테마 오버라이딩은 원본을 유지하고, 변경사항을 추적하는 데에 효과적이다. 바꿔 말하면 원본을 수정할 필요가 없다는 것이다.테마를 갖다 쓰지만 구현 내용에는 관심이 없다 이는 테마를 제외하고 순전히 내 블로그에 적용되는 코드만 관리할 수 있다는 뜻이고, 깃허브에 코드를 저장하고 있다면 서브모듈(Submodule)이라는 기능도 적용해 볼 수 있다. 이에 대해서는 다음 포스트에서 더 자세히 다룰 것이다.

마치며

독자들의 몫으로 남긴 config.toml을 수정하여 각종 설정들을 부여하는 것은 제외하면 휴고를 이용하여 블로그를 생성하고 테마를 적용하는 방법은 매우 간단하다. 하지만 테마를 수정하거나 나아가 블로그의 유지보수까지 고려한다면 미리 생각해봐야 할 점들이 분명 존재한다. 이후 포스트에서는 휴고와 깃허브를 이용한 블로그 관리에 대하여 포스팅할 예정이다.