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

2020-06-30 note hugo web

前書き

先日まで、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"

最後に

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

食わず嫌いは良くない。

Relevant Topics

外部サービス無しでOBSから配信した話

2019-09-24 note obs web

VRChatのiwaSyncVideoへの配信レイテンシの軽減を試みた Read More


Recent Posts

Realme X2 Proの導入

2020-07-09 note android device smartphone

安く速いスマートフォンを導入した Read More

MDR-100A メンテナンス

2020-07-09 note audio device repair

ヘッドホンから異音がした為、いじった Read More

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

2020-06-30 note hugo web

自前フレームワークからHugoへの乗り換え。その利点と欠点。 Read More

AutoImageCompresserの制作

2020-02-22 portfolio booth csharp oss vrchat windows

軽快なファイル同期 (スクリーンショット想定) の為の画像圧縮デーモン Read More

MultiShortcutの制作

2020-02-15 portfolio booth csharp oss vrchat windows

複数のショートカットをまとめて起動するショートカットを作成するアプリケーション Read More