목적
윈도우 에서 Hugo로 개인블로그를 만들고 github으로 호스팅하는 법
사용 툴 버전
- 설치 날짜 : 03-31-2021
- hugo version : hugo v0.82.0
- git version : git version 2.31.1.windows.1
- windows : 10
- windows terminal: v1.7.572.0
- Chocolatey : v0.10.15
목차
ketax 추가
수학 수식을 사용할수 있게 해줍니다. 여러가지 방법이 존재하고, 테마 제작자 분들께서 미리 넣어두는 방법도 매우 많습니다. 다만 제가 선택한 테마인 blackburn의 경우, mathjax라는것을 지원하지만 제가 원하는 기능이 부족합니다. 그러므로 katex를 추가 해 주었습니다.
katex.html 파일 생성
myHugo->layouts->여기에 partials이라는 폴더를 만들어 줍시다.
이미 존재한다면, 그냥 그 폴더 안에 katex.html라는 파일을 생성해줍시다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.0/dist/katex.min.css" integrity="sha384-t5CR+zwDAROtph0PXGte6ia8heboACF9R5l/DiY+WZ3P2lxNgvJkQk5n7GPvLMYw" crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.0/dist/katex.min.js" integrity="sha384-FaFLTlohFghEIZkw6VGwmf9ISTubWAVYW8tG8+w2LAIftJEULZABrF9PPFv+tVkH" crossorigin="anonymous"></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.0/dist/contrib/auto-render.min.js" integrity="sha384-bHBqxz8fokvgoJ/sc17HODNxa42TlaEhB+w8ZJXTc2nZf1VgEaFZeZvT4Mznfz0v" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
// • rendering keys, e.g.:
throwOnError : false
});
});
</script>
이를 복사해서 넣어줍시다.
위 코드는 katex 공식 홈페이지에서 제공하는 자동 렌더링 사용 코드입니다.
katex 공식 홈페이지
KaTeX – The fastest math typesetting library for the web
Simple API, no dependencies – yet super fast on all major browsers.
katex.org
렌더링 설정 추가
이 후는 테마마다 다를수도 있습니다만.
보통은 \layouts\post\single.html 에 각 포스트 렌터링 파일이 존재하므로 여기에 넣어주세요
{{ partial "header.html" . }}
<div class="header">
<h1>{{ .Title }}</h1>
<h2>{{ .Description }}</h2>
</div>
<div class="content">
{{ partial "post_meta.html" . }}
{{ partial "katex.html" . }}
{{ $wrappedTable := printf "<div class=pure-table pure-table-horizontal> ${1} </div>" }}
{{ .Content | replaceRE "(<table>(?:.|\n)+?</table>)" $wrappedTable | safeHTML }}
{{ if (findRE "<pre" .Content 1) }}
{{ partial "add_button.html" . }}
{{ end }}
{{ partial "share.html" . }}
{{ partial "prev_next_post.html" . }}
{{ partial "disqus.html" . }}
</div>
{{ partial "footer.html" . }}
중요한것은 {{ partial "katex.html" . }}이 코드를 <body>와 </body>의 사이에 넣어주어야 합니다. 위 코드 역시 분할되어 있어서 보이지 않습니다만, <body>와 </body>의 사이에 넣었습니다.
제 웹싸이트는 eunhanlee.github.io 이고, 제 github에 들어가 보시면 지금까지 한 내용 몇 파일들을 확인하실수 있습니다.
eunhanlee - Overview
eunhanlee has 5 repositories available. Follow their code on GitHub.
github.com
Eunhan's library
Problem Problem_Link 1 hour limit no search on internet Merge two sorted linked lists and return it as a sorted list. The list should be made by splicing together the nodes of the first two lists. Example 1: Input: l1 = [1,2,4], l2 = [1,3,4] Output: [1,1
eunhanlee.github.io
'old > Programming' 카테고리의 다른 글
| Hugo로 개인 블로그 만드는 법-8.코드 블럭 버튼 추가 (0) | 2021.04.17 |
|---|---|
| Hugo로 개인 블로그 만드는 법-7.마크다운 테이블 추가 (0) | 2021.04.17 |
| Hugo로 개인 블로그 만드는 법-5.github action 추가 (0) | 2021.04.17 |
| Hugo로 개인 블로그 만드는 법-4.github에 업로드 (1) | 2021.04.17 |
| Hugo로 개인 블로그 만드는 법-3.블로그 생성 (0) | 2021.04.17 |