もろもろの契約期限が迫っていたこともあり、 思い切ってこのブログのCMSをWordpressからHugoに移設しました。
The world’s fastest framework for building websites | Hugo
fastest を自称するだけあって、生成がものすごく速いです。 Gatsby.jsで数十秒かかるビルドが1秒かからず終わったのを見たときは感動しました。
hugo server -D でライブプレビューしながら編集できるのもgoodです。
300ページ近い書籍をいくつもMarkdownで書いているくらいMarkdownを書き慣れているので、
Markdownをいい感じにしてくれるのと嬉しくなっちゃいます。
使ったもの
- Hugo: 0.63.2
- Theme: Beautiful Hugo
できたこと: 完全移設
元環境をスパッと廃止できました。
| 要件 | 実現方法 |
|---|---|
| URL指定(ディレクトリパス) | configの [permalinks] で posts = "/:year/:month/:slug" |
URL指定(.htmlにする) |
configの uglyurls = true canonifyURLs = true と、レイアウト調整をいくつか |
| 画像 | /wp-content を持ってきて ./static/. に置く |
| 下書き保存 | 各contentsのヘッダの draft: True |
| Code block syntax highlight | OK |
| タグ | 各contentsのヘッダで普通にできる |
| 複数タグ | 各contentsのヘッダで普通にできる |
| SNS連携 | configの [params] で socialShare = true |
| Raw HTML出力 | [markup.goldmark.renderer] で unsafe = false |
| テンプレートカスタマイズ | ./themes/beautifulhugo/layouts 配下のファイルを ./layouts 配下にコピーして変更するとオーバーライドできる |
| HTTPS | AWSのCloudFront + ACM (※Hugo関係ないといえば関係ない) |
Hugo公式のドキュメントと、
beautifulhugoの exampleSite/config.toml が大変参考になりました。
SNS連携に、はてなブックマークがないので、そこだけは今後なんとかしたいところ。
レイアウト調整
今回はURLを維持したかったので、
デフォルトのディレクトリインデックスを利用する方式(URLが/xxx/yyy/zzz/のように / で終わる)ではなく、
/xxx/yyy/zzz.html としました。
ここが少し曲者でして、 設定だけでなく少しレイアウトを調整しています。
普段Goを書いている身としては特に違和感なく読み書きすることができました。
LANG=C diff -ru --ignore-trailing-space themes/beautifulhugo/layouts layouts | grep -v "^Only in"
diff -ru --ignore-trailing-space themes/beautifulhugo/layouts/_default/list.html layouts/_default/list.html
--- themes/beautifulhugo/layouts/_default/list.html 2020-01-30 20:00:56.313105953 +0900
+++ layouts/_default/list.html 2020-01-30 20:00:36.722942961 +0900
@@ -16,12 +16,12 @@
<ul class="pager main-pager">
{{ if .Paginator.HasPrev }}
<li class="previous">
- <a href="{{ .Permalink }}page/{{ .Paginator.Prev.PageNumber }}/">← {{ i18n "newerPosts" }}</a>
+ <a href="{{ replaceRE "\\.html$" "" .Permalink }}/page/{{ .Paginator.Prev.PageNumber }}.html">← {{ i18n "newerPosts" }}</a>
</li>
{{ end }}
{{ if .Paginator.HasNext }}
<li class="next">
- <a href="{{ .Permalink }}page/{{ .Paginator.Next.PageNumber }}/">{{ i18n "olderPosts" }} →</a>
+ <a href="{{ replaceRE "\\.html$" "" .Permalink }}/page/{{ .Paginator.Next.PageNumber }}.html">{{ i18n "olderPosts" }} →</a>
</li>
{{ end }}
</ul>
diff -ru --ignore-trailing-space themes/beautifulhugo/layouts/_default/single.html layouts/_default/single.html
--- themes/beautifulhugo/layouts/_default/single.html 2020-01-30 20:00:56.313105953 +0900
+++ layouts/_default/single.html 2020-01-30 20:00:36.722942961 +0900
@@ -8,7 +8,7 @@
{{ if .Params.tags }}
<div class="blog-tags">
{{ range .Params.tags }}
- <a href="{{ $.Site.LanguagePrefix | absURL }}/tags/{{ . | urlize }}/">{{ . }}</a>
+ <a href="{{ $.Site.LanguagePrefix | absURL }}/tags/{{ . | urlize }}.html">{{ . }}</a>
{{ end }}
</div>
{{ end }}
diff -ru --ignore-trailing-space themes/beautifulhugo/layouts/index.html layouts/index.html
--- themes/beautifulhugo/layouts/index.html 2020-01-30 20:00:56.313105953 +0900
+++ layouts/index.html 2020-01-30 20:00:36.722942961 +0900
@@ -19,12 +19,12 @@
<ul class="pager main-pager">
{{ if .Paginator.HasPrev }}
<li class="previous">
- <a href="{{ .Permalink }}page/{{ .Paginator.Prev.PageNumber }}/">← {{ i18n "newerPosts" }}</a>
+ <a href="{{ .Permalink }}page/{{ .Paginator.Prev.PageNumber }}.html">← {{ i18n "newerPosts" }}</a>
</li>
{{ end }}
{{ if .Paginator.HasNext }}
<li class="next">
- <a href="{{ .Permalink }}page/{{ .Paginator.Next.PageNumber }}/">{{ i18n "olderPosts" }} →</a>
+ <a href="{{ .Permalink }}page/{{ .Paginator.Next.PageNumber }}.html">{{ i18n "olderPosts" }} →</a>
</li>
{{ end }}
</ul>
diff -ru --ignore-trailing-space themes/beautifulhugo/layouts/partials/footer.html layouts/partials/footer.html
--- themes/beautifulhugo/layouts/partials/footer.html 2020-01-30 20:00:56.313105953 +0900
+++ layouts/partials/footer.html 2020-01-30 20:00:36.722942961 +0900
@@ -19,6 +19,8 @@
{{- end -}}
{{ end }}
{{ if .Site.Params.rss }}
+ {{$hasRSSPermalink := .OutputFormats.Get "RSS"}}
+ {{ if $hasRSSPermalink }}
<li>
<a href="{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}" title="RSS">
<span class="fa-stack fa-lg">
@@ -27,6 +29,16 @@
</span>
</a>
</li>
+ {{ else }}
+ <li>
+ <a href="/index.xml" title="RSS">
+ <span class="fa-stack fa-lg">
+ <i class="fas fa-circle fa-stack-2x"></i>
+ <i class="fas fa-rss fa-stack-1x fa-inverse"></i>
+ </span>
+ </a>
+ </li>
+ {{ end }}
{{ end }}
</ul>
<p class="credits copyright text-muted">
diff -ru --ignore-trailing-space themes/beautifulhugo/layouts/partials/post_preview.html layouts/partials/post_preview.html
--- themes/beautifulhugo/layouts/partials/post_preview.html 2020-01-30 20:00:56.323106036 +0900
+++ layouts/partials/post_preview.html 2020-01-30 20:00:36.722942961 +0900
@@ -31,7 +31,7 @@
{{ if .Params.tags }}
<div class="blog-tags">
{{ range .Params.tags }}
- <a href="{{ $.Site.LanguagePrefix | absURL }}/tags/{{ . | urlize }}/">{{ . }}</a>
+ <a href="{{ $.Site.LanguagePrefix | absURL }}/tags/{{ . | urlize }}.html">{{ . }}</a>
{{ end }}
</div>
{{ end }}
まとめ
とにかく速いHugo、ぜひ使ってみてください。