HUGO on kenji.blog

'Hugo 명령어 목록'

Fri, 31 May 2024 01:36:00 +0900

Hugo란

Hugo는 정적 사이트 생성기 중 하나입니다. Markdown 파일을 HTML로 변환하여 웹사이트를 만들 수 있습니다. Hugo는 Go 언어로 작성되어 빠르게 동작합니다.

이 블로그도 Hugo로 제작되었습니다.

Hugo CLI 설치

Hugo CLI를 설치하려면 다음 명령어를 실행합니다.

※ macOS의 경우의 예시입니다. 다른 OS의 경우, 공식 문서를 참조하세요.

1

brew install hugo

Homebrew를 사용하여 설치할 수 있습니다.

Hugo 명령어 목록

Hugo에는 다양한 명령어가 준비되어 있습니다. 아래에 자주 사용하는 명령어를 정리했습니다.

새로운 사이트 만들기

1

hugo new site <사이트명>

새로운 사이트를 생성하는 명령어입니다. <사이트명>에는 사이트의 이름을 지정합니다.

새로운 글 작성하기

1

hugo new <기사명>.md

새로운 글을 작성하는 명령어입니다. <기사명>에는 글의 이름을 지정합니다.

서버 실행하기

1

hugo server

로컬 서버를 기동하는 명령어입니다. http://localhost:1313으로 접속할 수 있습니다.

빌드하기

1

hugo

사이트를 빌드하는 명령어입니다. public 디렉토리에 HTML 파일이 생성됩니다.

배포하기

1

hugo deploy

사이트를 배포하는 명령어입니다. 배포처 설정은 config.toml 파일에서 합니다.

글 목록 표시하기

1

hugo list all

작성된 글 목록을 표시하는 명령어입니다.

설정 확인하기

1

hugo config

설정을 확인하는 명령어입니다.

도움말 표시하기

1

hugo help

도움말을 표시하는 명령어입니다.

버전 표시하기

1

hugo version

버전을 표시하는 명령어입니다.

이상이 Hugo 명령어 목록입니다. 이 외에도 다양한 명령어가 준비되어 있으므로 공식 문서를 참고해 주세요.

참고

Hugo 공식 문서

Google 애널리틱스에서 인기 페이지 랭킹을 가져와 배치하는 방법

Mon, 10 Apr 2023 20:26:57 +0900

시작하며

Ranklet이라는 서비스를 사용하면 Google 애널리틱스에서 인기 페이지 랭킹을 가져와 쉽게 배치할 수 있습니다.

이 글에서는 HUGO 블로그에 배치하는 방법을 소개합니다.

동작 이미지

준비

사이트에 Google 애널리틱스가 설정되어 있을 것

절차

Ranklet에 접속합니다.
Sign in with Google을 클릭하여 Google 계정으로 로그인합니다 (Google 애널리틱스 계정과 연결되어 있어야 합니다).

허용을 클릭

기본 정보를 설정합니다.

위와 같이 설정했습니다.

Google Analytics 뷰에서는 랭킹을 가져오고 싶은 뷰를 선택합니다.

텍스트 치환을 설정합니다.

위와 같이 설정했습니다. 페이지 제목의 | kenji.blog를 삭제하기 위해 설정했습니다.

템플릿을 설정합니다.

HTML (랭킹 숫자를 숨겼습니다)

 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
28
29
30
31


<div class="ranklet ranklet-reset">
 <table class="ranklet-table">
 <tbody class="ranklet-pages">
 {{#context.pages}}
 <tr class="ranklet-page">
 <td class="ranklet-image">
 {{#image}}
 <a href="{{url}}" class="ranklet-link">
 <img class="ranklet-img" src="{{image}}" />
 </a>
 {{/image}}
 </td>
 <td class="ranklet-meta">
 <div class="ranklet-title">
 <a href="{{url}}" class="ranklet-link">
 {{title}}
 </a>
 </div>
 {{#description}}
 <div class="ranklet-description">
 <a href="{{url}}" class="ranklet-link">
 {{description}}
 </a>
 </div>
 {{/description}}
 </td>
 </tr>
 {{/context.pages}}
 </tbody>
 </table>
</div>

CSS (폰트 크기를 변경하고, 설명문이 3줄로 표시되도록 했습니다)

 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


#ranklet-{{context.id}} {
 .ranklet-reset { // 리셋
 table, tr, td, div, span {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 line-height: 1;
 box-sizing: border-box;
 }
 }

 .ranklet-table {
 border-collapse: separate;
 border-spacing: 8px 24px;
 width: 100%;
 word-break: break-all;

 td {
 vertical-align: middle;
 }

 .ranklet-rank {
 text-align: center;
 font-size: 120%;
 }

 .ranklet-image {
 text-align: center;
 img {
 max-width: 128px;
 max-height: 128px;
 }
 }

 .ranklet-meta {
 .ranklet-title {
 font-size: 20px;
 line-height: 125%;
 }

 .ranklet-description {
 font-size: 16px;
 margin-top: 8px;
 line-height: 125%;
 display: -webkit-box;
 overflow: hidden;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3; /* 줄 수 */
 }
 }
 }
}

JavaScript는 변경 없음

사이트 게재에서 HTML을 복사합니다.

표시된 HTML을 복사합니다.

HUGO 템플릿에 붙여넣습니다.

layouts/partials/ranklet.html을 생성하고, 복사한 HTML을 붙여넣습니다.

1

<div id="ranklet-11958"></div><script src="//widget.ranklet.com/v1/ranklet/s3/widgets/11958/widget.js"></script>

layouts/_default/single.html의 </footer> 앞 줄에 아래 코드를 붙여넣습니다.

1

{{- partial "ranklet.html" . }}

이상입니다. 이제 이 페이지 아래와 같이 랭킹이 표시됩니다.

'hugo에서 KaTeX(LaTeX 스타일 수식 표시) 활성화하는 방법'

Fri, 31 Mar 2023 23:11:26 +0900

KaTeX란?

KaTeX는 LaTeX 스타일의 수식을 HTML로 표시하기 위한 javascript 라이브러리입니다.

구체적으로는 아래와 같은 수식을 표시할 수 있습니다.

$$f(x) = x^2 + x + 41$$

그 외에도 LaTeX 스타일의 수식 표시 라이브러리도 있는 것 같습니다만, KaTeX는 심플하고 빠르다는 정평이 나 있습니다.

hugo에 도입하는 방법

hugo의 폴더 계층에서 layouts/partials/math.html을 새로 작성합니다.

내용은 아래와 같이 작성해 주세요.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
 renderMathInElement(
 document.body,
 {
 delimiters: [
 {left: "$$", right: "$$", display: true},
 {left: "\\[", right: "\\]", display: true},
 {left: "$", right: "$", display: false},
 {left: "\\(", right: "\\)", display: false}
 ]
 });
 });
</script>

다음으로 기존 파일 layouts/partials/extend_head.html에 아래의 코드를 추가합니다.

1
2
3


{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

이것으로 KaTeX를 사용할 준비가 완료되었습니다.

페이지의 front matter에 math: true를 추가함으로써, KaTeX를 활성화할 수 있습니다.

이제 페이지 본문에 수식을 LaTeX 스타일로 작성하기만 하면 됩니다.

1

$$ e^{i \pi} = -1 $$

위와 같이 작성하면, 아래와 같이 표시됩니다.

$$ e^{i \pi} = -1 $$

참고

HUGO에서 HTML 태그 사용하기

Tue, 17 Jan 2023 19:20:32 +0900

HUGO의 기본 설정에서는 게시물 내에 HTML 태그를 사용할 수 없게 되어 있지만, config.toml에 아래와 같이 기재하면 사용할 수 있게 됩니다.

1
2


[markup.goldmark.renderer]
 unsafe = true

참고: Configure Markup

'HUGO에서 사용할 수 있는 쇼트코드'

Sun, 11 Sep 2022 22:59:52 +0900

HUGO에서 사용할 수 있는 쇼트코드

YouTube

{{<youtube 123456abc>}}

Twitter

{{<twitter 123456abc>}}

Instagram

{{<instagram 123456abc>}}

Flickr

{{<flickr 123456abc>}}

Vimeo

{{<vimeo 123456abc>}}

기타

Shortcodes

여담

사이트 상에서 {{< foo >}}라고 표현하고 싶은 경우에는, {{</* foo */>}}라고 작성해야 합니다.

'PaperMod 이미지 배치 변경'

Sun, 11 Sep 2022 18:50:40 +0900

기본 레이아웃은 이미지가 중앙에 가로폭 100%로 배치되어 있지만, 조금 크다고 느껴질 때가 있어서, 이미지를 제목 아래에 둘러싸이게 하고, 가로폭을 150px 정도로 변경해 보았습니다.

파일의 변경 사항은 다음과 같습니다.

blank.css

여백이나 이미지 크기, 텍스트 표시 줄 수를 변경하기 위해, blank.css에 다음 내용을 추가합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


.entry-content {
 -webkit-line-clamp: 4;
}

.entry-footer {
 text-align: right;
}

.entry-cover {
 margin-bottom: initial;
 text-align: center;
}

.entry-cover img {
 border-radius: 4px;
 display: inline;
 max-width: 100%;
}

.post-meta {
 display: block;
 text-align: right;
}

post-entry.css

blank.css 쪽에서 정의를 삭제할 수 없었기 때문에, post-entry.css에서 아래의 1줄을 삭제합니다.

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← 이 줄을 삭제
 height: auto;
}

list.html

이미지 배치를 변경하기 위해, list.html의 다음 부분을 변경했습니다.

 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
28
29


<article class="{{ $class }}">
 <!-- {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }} --><!-- 아래로 이동 -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- 아래로 이동 -->
 <header class="entry-header">
 <h2>
 {{- .Title }}
 {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
 </h2>
 </header>
 <div style="display:flex;"><!-- 추가 -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- 추가 -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- 위에서 이동 -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- 위에서 이동 -->
 </div><!-- 추가 -->
 <div style="width:100%;"><!-- 추가 -->
 {{- if (ne (.Param "hideSummary") true) }}
 <div class="entry-content">
 <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
 </div>
 {{- end }}
 {{- if not (.Param "hideMeta") }}
 <footer class="entry-footer">
 {{- partial "post_meta.html" . -}}
 </footer>
 {{- end }}
 <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
 </div><!-- 추가 -->
 </div><!-- 추가 -->
</article>

비슷한 요구 사항이 적지 않게 있는 것 같습니다.

https://github.com/adityatelange/hugo-PaperMod/discussions/159#discussioncomment-247844

본가(공식) 쪽에서도 지원해 주면 좋겠네요.

'PaperMod에서 Twitter Card를 설정하는 방법'

Sat, 10 Sep 2022 18:41:22 +0900

시작하며

PaperMod 테마는 Twitter Card를 지원합니다. 단, Twitter Card 설정은 config.toml 또는 각 게시물의 *.md 헤더 정보에 작성해야 합니다. 각 게시물과 config.toml 양쪽에 설정한 경우에는, 각 게시물의 헤더 정보가 우선됩니다.

설정 방법

config.toml

config.toml에는 [params] 아래에 images라는 항목을 추가합니다. images에는 Twitter Card에 표시할 이미지의 경로를 작성합니다. 이미지를 static 폴더에 배치할 경우에는 파일 이름만 지정하면 됩니다.

1
2


[params]
 images = ["twitter_card.jpg"]

폴더 구성

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (여기에 작성)
├─content
│ └─posts
│ └─게시물 폴더
│ │ index.md (여기에 작성)
│ └─images
│ cover.png (여기에 배치)
└─static
 twitter_card.jpg (여기에 배치)

각 게시물의 헤더 정보

각 게시물의 헤더 정보에는 cover 아래에 image라는 항목을 추가합니다. relative를 true로 하면, 게시물의 *.md로부터의 상대 경로로 지정할 수 있습니다.

1
2
3


cover:
 image: "images/cover.jpg"
 relative: true

게시물 상단에는 표시하고 싶지 않은 경우

게시물 상단에 커버 이미지를 표시하고 싶지 않은 경우에는 cover 아래에 hidden이라는 항목을 추가하고 true로 설정합니다.

1
2
3
4


cover:
 image: "images/cover.jpg"
 relative: true
 hidden: true

이미지 크기에 대하여

현재 PaperMod의 사양상 Twitter Card의 크기는 summary_large_image만 지원하는 것 같습니다. summary_large_image의 적절한 크기(해상도)는 여러 의견이 있지만 800 x 418(이미지 비율 1.91:1) 정도가 좋을 것 같습니다.

참고 사이트1 참고 사이트2

가능하다면, 이미지 크기를 리사이징하여 게시하는 것을 추천합니다.

설정 확인 방법

Twitter Card의 설정을 확인하려면 Twitter Card Validator를 이용합니다. 단, 제 환경에서는 미리보기가 잘 표시되지 않았기 때문에, 만약 미리보기가 표시되지 않는다면 비공개 계정 등을 이용해 게시 전에 한번 확인해 보는 것을 추천합니다.

'PaperMod 색상 변경'

Wed, 07 Sep 2022 15:30:21 +0900

PaperMod 테마의 색상을 변경했습니다. 변경 방법은 아래를 참고했습니다.

https://github.com/adityatelange/hugo-PaperMod/discussions/645

CSS 경로는 아래와 같습니다.

themes/PaperMod/assets/css/extended/blank.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


:root {
 --entry: #fbf7ef;
 --primary: rgba(113, 103, 91, 1.00);
 --secondary: rgba(113, 103, 91, 0.95);
 --tertiary: rgba(113, 103, 91, 0.50);
 --content: rgba(113, 103, 91, 0.85);
 --hljs-bg: #34231B;
 --code-bg: #ebe4d7;
 --border: #fdfaf5;
 --theme: #fbf7ef;
}
.dark {
}

다크 모드는 일단 변경하지 않았습니다.

'【HUGO】로컬 환경에서 표시 프리뷰'

Mon, 05 Sep 2022 12:28:01 +0900

HUGO 설치

다운로드

HUGO 다운로드

위 사이트에서 환경에 맞는 Windows 모듈을 다운로드하여 압축을 풉니다. 제 경우에는 “hugo_0.102.3_Windows-64bit.zip"을 다운로드했습니다.

압축 풀기

다운로드한 zip 파일의 압축을 풀고 그 안의 hugo.exe를 예를 들어 C:\bin 등 폴더를 만들어 그곳에 복사합니다.

환경 변수 등록

아무 위치에서나 hugo.exe를 실행하기 위해 환경 변수에 등록합니다. Windows 11에서의 조작이지만 다음과 같은 절차로 등록할 수 있을 것입니다.

Win+Pause 버튼을 눌러 버전 정보 열기
시스템 고급 설정 클릭
환경 변수 클릭
Path를 선택하고 편집 클릭
새로 만들기를 클릭하고 새 줄에 “C:\bin"을 입력한 후 확인을 눌러 대화 상자 닫기

블로그 프리뷰하기

명령 프롬프트에서 HUGO 블로그 폴더로 이동하여 아래 명령을 실행합니다.

hugo server -D

실행 결과는 아래와 같습니다. (-D는 임시 글을 표시하는 옵션입니다.)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


C:\Users\win11\IdeaProjects\kenji.blog>hugo server -D
Start building sites …
hugo v0.102.3-b76146b129d7caa52417f8e914fc5b9271bf56fc windows/amd64 BuildDate=2022-09-01T10:16:19Z VendorInfo=gohugoio

 | JA
-------------------+-----
Pages | 39
Paginator pages | 0
Non-page files | 7
Static files | 0
Processed images | 0
Aliases | 13
Sitemaps | 1
Cleaned | 0

Built in 161 ms
Watching for changes in C:\Users\win11\IdeaProjects\kenji.blog\{archetypes,content,themes}
Watching for config changes in C:\Users\win11\IdeaProjects\kenji.blog\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

주소는 실행 시 출력되므로 (위 예에서는 http://localhost:1313/), 브라우저에 주소를 복사합니다. 프리뷰는 파일이 저장될 때마다 자동 업데이트됩니다. 프리뷰를 마치려면 명령 프롬프트에서 Ctrl+C를 입력합니다.