HUGO MEMO

Hugo & Environment

当ブログは、静的サイトジェネレーター HUGO を採用。
Markdown で執筆でき、Git で管理できる点がエンジニア向き。

環境

項目	ツール・サービス	備考
HUGOテーマ	Stack
記事管理リポジトリ	GitHub
ホスティング	Netlify	`git push` で自動 Deploy

How to install

Macの場合。

1

brew install hugo

Configuration

GitHub 形式の改行を有効にする

標準の Markdown は、文末のスペース2個で改行だが、
以下を config.toml に追記することで、エディタの改行を反映できる。

1
2
3
4
5


[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      hardWraps = true
      unsafe = true

参考: 公式ドキュメント

記事テンプレート

archetypes/default.md

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


---
title: "{{ replace .Name "-" " " | title }}"
description:
slug:
date: {{ .Date }}
image: cover.webp
categories:
  -
tags:
  -
math:
license:
hidden: false
comments: false
draft: false
---

パーマリンク設定

config/permalinks.toml

1
2


post = "/:slug/"
page = "/:slug/"

Writing

新しい記事を作成する

1

hugo new post/article-slug/index.md

draft = true の記事テンプレートを用意し、それを手動でコピーする方法もOK。

記事のアイキャッチ画像は post/article-slug/cover.webp の要領で配置
当ブログは、アイキャッチ画像を使用しない

Debugging

1
2


hugo server -D      # ドラフト含む
hugo server         # 公開記事のみ

ブラウザで http://localhost:1313/ へアクセスして確認。

内部リンク

1

[次の記事](../java-pass-by-value)

Custom Short Code

サイト内ブログカード

利用時は 【】 を {} へ変換されたい。

1

【【<self-card path="/java-pass-by-value">】】

表示例:

Java の「参照渡し」は訳語の罠である

「reference を渡す」を「参照渡し」と短絡した誤解が、なぜ根深いのかを整理する

`layouts/shortcodes/self-card.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


{{- $input := .Get "path" -}}
{{- $slug := strings.TrimPrefix "/" $input -}}
{{- $page := .Site.GetPage $input -}}
{{- if not $page -}}
  {{- range .Site.RegularPages -}}
    {{- if eq .Params.slug $slug -}}
      {{- $page = . -}}
    {{- end -}}
  {{- end -}}
{{- end -}}
{{- with $page -}}
<div class="blogcard">
  <div class="blogcard-content">
    <div class="blogcard-title">
      <a class="link" href="{{ .RelPermalink }}">
        {{ .Title | truncate 80 }}
      </a>
    </div>
    {{ if .Params.Description }}
    <div class="blogcard-subtitle">
      {{ .Params.Description | truncate 100 }}
    </div>
    {{ end }}
  </div>
  {{ range .Resources.ByType "image" }}
  <div class="blogcard-thumbnail">
    <img src="{{ .RelPermalink }}" alt="{{ .Title }}" />
  </div>
  {{ end }}
</div>
{{- end -}}

.Params.Image では正しい画像パスが取得できない。.Resources.ByType "image" を使うこと。
参考: 公式ドキュメント

`assets/scss/custom.scss`

 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


@mixin widget {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    margin: 2rem 0;
    padding: 2rem;
    border: 1px solid var(--accent-color-darker);
    margin-bottom: 3rem;
}

@mixin line-clamp($line-num: 1) {
    display: -webkit-box;
    -webkit-line-clamp: $line-num;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@mixin font($size: 1.0, $weight: normal) {
    font-size: #{$size}rem;
    line-height: $size;
    font-weight: $weight;
}

.blogcard {
    @include widget;

    .blogcard-content { flex-grow: 1; }

    .blogcard-title {
        @include font(1.6, bold);
        @include line-clamp;
        padding-right: 2rem;
    }

    .blogcard-thumbnail {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 20%;
        overflow: hidden;

        img {
            max-width: 100%;
            max-height: 100%;
            height: auto;
        }
    }
}