Hugo

Hugo 블로그

  • Github 블로그를 지원하는 플랫폼은 다양하게 존재합니다 .(jekyll, Hexo, Gatsby, Hugo)
  • 기존에는 Hexo를 사용하고 있었는데, 언어의 불편함(중국어가 많습니다.)과 느린 업데이트의 문제로 Hugo로 이사를 했습니다.
  • 진정 새로운 무언가를 창조하려 한다면.. 처음부터 다시 시작해야 한다는 말을 듣고 이전에 작성한 글은 옮기지 않고 있습니다.

새로운 창조

  • Hugo는 많은 테마를 지원하고 있었고, 그 중 PaperMod를 사용하고 있습니다. 테마를 만들어주시는 모든 분께 깊은 감사를 드립니다.

Hugo KaTeX

  • Hexo를 사용할 때에도 MathJax를 사용하는 데 많은 어려움을 겪었습니다.
  • 그나마 익숙한 MathJax 대신 Hugo는 KaTeX를 사용한다고 하니 적용해보도록 합니다.
  • PaperMod 테마 블로그에 Math Typesetting를 참고하면… 수식 입력 활성화 방법을 쉽게 설명하고 있는데, 웹 관련 지식이 전혀 없는지라 조금 어려웠습니다.
  • 다음에 비슷한 문제를 겪었을 때를 대비하여, 블로그를 하는 목적이 크므로 적용한 방법을 작성합니다.

Hugo KaTeX 활성화

  • theme/hugo-PaperMod/layouts/partials/math.html 파일을 생성합니다.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

theme/hugo-PaperMod
├── assets
├── i18n
├── images
├── layouts
│   ├── _default
│   ├── partials
│       ├── math.html   // 새로 만들자
│   ├── ...
├── ...
└── theme.toml
  • math.html 파일에 아래와 같은 내용을 입력합니다.
  • KaTeX의 Auto-render Extension 링크에 있는 내용입니다. 버전이 변경되면 HTML을 직접 수정해야 하니 주기적으로 확인합니다.
1
2
3
4

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>
  • PaperMod 테마는 사용자가 HTML 태그를 추가한 경우 head와 footer에 쉽게 추가하도록 extend_head.html과 extend_footer.html을 제공하고 있습니다.
  • 다른 테마를 확인해보니 extend_head.html과 같은 파일이 없는 경우가 있습니다. 이런 경우에는 직접 추가하면 됩니다.
  • extend_head.html에 math.html 파일 내용을 추가하도록 합니다.
1
2
3
4
5
6
7
8

<!-- Head custom content area start -->
<!--
Insert any custom code (web-analytics, resources, etc.) - it will appear in the <head></head> section of every page. Can be overwritten by partial with the same name in the global layouts.
-->
{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}
<!-- Head custom content area end -->
  • extend_head.html파일은 head.html 파일에 연결되어 있습니다.
  • 만약 extend_head.html을 사용하지 않는다면 head.html파일 어딘가에 적절히 추가하도록 합니다.
1
2
3
4
5
6
7
8

<!-- ... -->
<link rel="alternate" hreflang="{{- .Lang -}}" href="{{- .Permalink -}}" />
{{ end }}
{{- partial "extend_head.html" . -}}
<!-- Misc -->
{{- if eq (getenv "Hugo_ENV") "production" | or (eq .Site.Params.env "production") }}
{{- template "_internal/google_analytics_async.html" . }}
<!-- ... -->

Hugo KaTeX 사용법

  • HTML을 몰라도 {{ if or .Params.math .Site.Params.math }}을 보면 math 또는 Site.math 변수가 true인 경우 math.html이 적용되는 것으로 이해할 수 있습니다.
  • Hugo의 config.yml 파일에 math: true를 입력해도 좋지만, 모든 페이지가 KaTeX Rendering을 하게 되므로 불필요한 경우가 발생합니다.
  • Markdown의 Front Matter에 math 변수를 입력하기 위해 archetypes/default.md를 수정합니다.
1
2
3
4

# KaTeX Math
# new line : $$ ... $$
# inline : \\( ... \\)
math: false
  • 이제 새로운 Markdown 파일을 만들면 자동으로 math 옵션이 있습니다. 필요한 경우에만 이를 활성화합니다.

Hugo KaTeX 예제

  • KaTeX는 MathJax와 다르게 인라인 수식의 사용법이 다릅니다.
  • $ ... $가 아닌 \\( ... \\)을 사용합니다.
  • 간단한 수식을 입력해봅니다.
1
2
3

$$
y = ax^2 + bx + c
$$
  • 결과

$$ y = ax^2 + bx + c $$