Hugo 블로그

  • Hugo는 Hexo와 다르게 블로그 설정 파일이 Hugo root 디렉토리에 있습니다.
  • 대부분의 설정은 이 파일에서 이뤄집니다.
1
2
3
4
5
6
7

theme/hugo-PaperMod
├── archetypes
├── static
├── content
├── theme
├── ...
└── config.yml

archetypes 디렉토리

  • archetypes 디렉토리의 default.md는 Markdown 파일의 Front Matter를 설정합니다.
  • 현재 저는 이렇게 사용하고 있습니다.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}

categories: ["", ""]

weight: 1

tags: ["", ""]

showToc: true
TocOpen: true
draft: false
hidemeta: false
disableShare: false
# cover:
#     image: "<image path/url>"
#     alt: "<alt text>"
#     caption: "<text>"
#     relative: false
comments: true

# KaTeX Math
# new line : $$ ... $$
# inline : \\( ... \\)
math: false
---

static 디렉토리

  • static 디렉토리는 블로그를 Github에 배포할 때 포함할 파일들을 추가합니다.
  • favicon 이미지 및 구글 Search Console과 네이버 Search Advisor에 블로그 소유권을 증명하기 위한 파일들이 들어있습니다.

content 디렉토리

  • 여기 폴더에 작성한 Markdown 파일들이 실제 블로그에 존재하는 페이지가 됩니다.
  • archives.md와 about_me.md를 만들면 블로그 우측 상단에 존재하게 됩니다.
  • about_me.md는 웹페이지에서 실제로 About Me로 보이는데요. 기본 설정에는 존재하지 않는 페이지 입니다.
  • 블로그 root 디렉토리에 존재하는 config.yml을 아래와 같이 수정하여 사용하고 있습니다.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

languages:
  en:
    languageName: "Korean"
    weight: 1
    menu:
      main:
        - name: Archives
          url: /archives/
          weight: 5
        - name: About Me
          url: /about_me/
          weight: 10
        - name: Tags
          url: /tags/
          weight: 15

Hugo 각종 설정들

  • 각종 블로그 설정을 테마에 의존하지 않고, Hugo의 루트 디렉토리에서 설정하다 보니 Hugo 자체적으로 대부분의 블로그 기능들을 인터페이스화 하고, 테마는 단지 이를 오버로딩하여 구체화 하는 것으로 생각됩니다.
  • 그래서 테마에서 커버하지 않는(못하는) 영역이 있다면 Hugo의 기본 설정을 따라가게 됩니다.

Hugo highlight.js 적용

  • 제가 사용하는 PaperMod 테마는 Syntax Highlight를 위해 highlight.js를 지원하고 있습니다.
  • 개인적으로 Atom One Dark 테마를 좋아하기 때문에 highlight.js github에서 Atom One Dark css 파일 내용을 복사합니다.
  • theme/hugo-PaperMod/assets/css/an-old-hope.min.css 파일에 기존 내용을 지우고 복사한 내용으로 교체합니다.
  • 예쁘게 적용될 것으로 예상했지만? 완벽하지 않습니다. :, ==, +와 같은 연산자들이 붉게 보이는 문제가 있습니다.
  • 바로 Hugo의 기본 Syntax Highlight 위에 테마에서 지원하는 Syntax Highlight를 오버로딩 하였기 때문에, Atom One Dark가 별도로 강조하지 않는 내용은 기본 Syntax Highlight의 설정을 유지하고 있었습니다.
  • 블로그 설정 파일(config.yml)을 다음과 같이 수정합니다.
1
2

# Using Atom One Dark Color scheme
pygmentsUseClasses: true
  • 아직 이게 정확히 무엇인진 모르겠지만, 이걸 활성화하면 Hugo의 기본 Syntax Highlight가 해제됩니다.
  • 다시 확인하면 적용이 잘 되었음을 확인하였습니다.

새로운 것을 발견하면 추가 예정…

  • 아직 찾지 못했습니다.