netmark.jpをWordpressからHugoに移設しました

もろもろの契約期限が迫っていたこともあり、 思い切ってこのブログのCMSをWordpressからHugoに移設しました。

The world’s fastest framework for building websites | Hugo

Image

fastest を自称するだけあって、生成がものすごく速いです。 Gatsby.jsで数十秒かかるビルドが1秒かからず終わったのを見たときは感動しました。

hugo server -D でライブプレビューしながら編集できるのもgoodです。 300ページ近い書籍をいくつもMarkdownで書いているくらいMarkdownを書き慣れているので、 Markdownをいい感じにしてくれるのと嬉しくなっちゃいます。

使ったもの

できたこと: 完全移設

元環境をスパッと廃止できました。

要件 実現方法
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 }}/">&larr; {{ i18n "newerPosts" }}</a>
+                <a href="{{ replaceRE "\\.html$" "" .Permalink }}/page/{{ .Paginator.Prev.PageNumber }}.html">&larr; {{ i18n "newerPosts" }}</a>
               </li>
             {{ end }}
             {{ if .Paginator.HasNext }}
               <li class="next">
-                <a href="{{ .Permalink }}page/{{ .Paginator.Next.PageNumber }}/">{{ i18n "olderPosts" }} &rarr;</a>
+                <a href="{{ replaceRE "\\.html$" "" .Permalink }}/page/{{ .Paginator.Next.PageNumber }}.html">{{ i18n "olderPosts" }} &rarr;</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>&nbsp;
+              <a href="{{ $.Site.LanguagePrefix | absURL }}/tags/{{ . | urlize }}.html">{{ . }}</a>&nbsp;
             {{ 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 }}/">&larr; {{ i18n "newerPosts" }}</a>
+                <a href="{{ .Permalink }}page/{{ .Paginator.Prev.PageNumber }}.html">&larr; {{ i18n "newerPosts" }}</a>
               </li>
             {{ end }}
             {{ if .Paginator.HasNext }}
               <li class="next">
-                <a href="{{ .Permalink }}page/{{ .Paginator.Next.PageNumber }}/">{{ i18n "olderPosts" }} &rarr;</a>
+                <a href="{{ .Permalink }}page/{{ .Paginator.Next.PageNumber }}.html">{{ i18n "olderPosts" }} &rarr;</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>&nbsp;
+        <a href="{{ $.Site.LanguagePrefix | absURL }}/tags/{{ . | urlize }}.html">{{ . }}</a>&nbsp;
         {{ end }}
     </div>
     {{ end }}

まとめ

とにかく速いHugo、ぜひ使ってみてください。


See also