独自ページからHugoへ乗り換え

前書き ¶

先日まで、Markdownで書ける静的Webサイトを自作していた。

1. ロード時にJavaScript製Markdown Compilerを読み
2. 遷移時XMLHttpReqeustにて生のmarkdownを動的に取得

コンテンツロード数を減らせて、特にモバイルで速い事を期待していた。

• Core
  • marked.js
    • Client SideでのMarkdown Compile
  • vue.js
    • 使ってみたかった
    • 静的サイトなので余り意味無し
• Style
  • github-markdown.css
  • bulma.min.css
  • highlight.js

しかし現実は非情である。

• SEOに悪い
• まともなOGPが作れない
• marked.jsの読み込みがそれなりに遅い
• そもそもモバイル端末の石ではコンパイルが遅い
• 記事のタグを機能させる事が面倒

SNSが流行している現代に於いて、ページ遷移が若干速い程度のメリットの為、 OGPを捨てるのはナンセンスである。

その為、静的サイトジェネレーターであるHugoへの乗り換えを決意した。

何故Hugoか ¶

「宗教上の理由でnode.jsを環境に入れられない」 を条件に、 https://www.staticgen.com/ を探すと、 Hugoがランキングトップ (2020-07-02 01:33:00 JST 現在) である。

そして、速いらしい。 (ref:  gohugoio/hugo )

Config メモ ¶

現在使っているHugoのバージョンは 0.73.0 である。

Markdown Compilerはバージョン標準の  yuin/goldmark を用いる。

( v0.60 未満では、  russross/blackfriday が標準であり、設定方法が異なる。 ref: Hugo v0.60 から既定の Markdown パーサが Goldmark になったようだ )

最も、基本的な事柄は、 Configure Hugo | Hugo と、 Configure Markup | Hugo を読めば解決するはずだ。

H1~ タグ ¶

Hnタグにはその場所にジャンプするリンクがほしい。 以下を参考に、書くだけ。

#Heading link example: Configure Markup | Hugo

HTML 埋め込み 許可 ¶

Hugoはgoldmarkになってから、 何故か標準でMarkdownへの生HTMLの埋め込みが禁止されている。

そもそも静的なMarkdownファイルが侵害されない限り意味を成さない上、 実用上とても不便なので、unsafeを許可する。 (Hugoに於いてどの様な状況で便利なんだろう?)

#Goldmark Configure Markup | Hugo を参考に以下を追加した。

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

Aタグ ¶

外部リンクに対して、target=_blankをつけたり、 また、セキュリティ上の観点から、 rel=nooppener を付けたりしたい。

#Link with title Markdown example: Configure Markup | Hugo を参考に、

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>

と書いた。

goldmarkはMarkdownからコンパイルされた 全てのAタグに対して同様の操作をする事が期待されているが、 この設定には罠があり

* このリンクに対しては有効だが
[example](http://example.com/)

* このリンクに対しては無効である。
http://example.com/

Hugoのディレクトリから Render Hook Templates を使えるのは、限られている。

• Page
• Destination
• Title
• Text
• Plain Text
• Page
• Level
• Anchor
• Text
• PlainText
• Link
• Image
• Heading

(ref: #Render Hook Templates Configure Markup | Hugo )

そして、先程のMarkdown記法にないリンクは、 goldmarkのrenderAutoLinkによって提供される機能で、 goldmarkのrenderLinkとは根本的に異なる機能である。

その為、RenderLinkへのHookだけでなく、RenderAutoLinkへのHookが必要になるが、 Hugo 0.73.0現在、サポートされていない。

Issue ( ref: Support markdown autolinks with Markdown Render Hooks #6667 )

現状は安全の為、以下の設定を入れた方が良いかもしれない。

[markup]
	[markup.goldmark]
		[markup.goldmark.extensions]
			linkify = false

その他趣味 ¶

Theme ¶

Erblog が好き。

Syntax ¶

Hybridが好き。

[markup]
	[markup.highlight]
		style = "hybrid"

最後に ¶

静的サイトジェネレーター思ったより悪くない。

食わず嫌いは良くない。