HugoのテーマをJaneからStackに変えた

はじめに

HugoのテーマをJaneからStackに変えたのでメモ書き

環境

Windows 11 Professional
Hugo-extended v0.131.0
WSL2 Ubuntu 24.04 LTS
Docker Desktop 4.34.2 (167172)

テーマ変更に関連する作業

まずは、StackのテーマのGetting Started を行う。
https://stack.jimmycai.com/guide/getting-started

Stackのテーマをgit submoduleで入れる

ルートディレクトリで下記を実行し、テーマを入れる。

git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

これに伴い、.gitmodulejaneを削除しておく。

-[submodule "themes/jane"]
-	path = themes/jane
-	url = https://github.com/xianmin/hugo-theme-jane.git

config.yamlを変更する

exampleSite/hugo.yamlをコピーしてきて config/_default/config.yamlとする。

サイトのURL/タイトルの変更

-baseurl: https://example.com/
+baseurl: https://blog.k-bushi.com/

- title: Example Site
+ title: かつおぶしのブログ

-copyright: Example Person
+copyright: kbushi

-DefaultContentLanguage: en
+DefaultContentLanguage: ja

- hasCJKLanguage:false
+ hasCJKLanguage:true

hasCJKLanguagehttps://maku77.github.io/p/rqcwgyj/#google_vignette を参照して、trueにした。
日本語の文字数を正しくカウントしてくれるようだ。

言語の変更

-languageCode: en-us
+languageCode: ja-JP

languagesに関しては、en, zh-cn, arを消して、jaのみにした。
多言語対応する場合は、残しておいてよい。
自分のブログは、多言語対応できていないので jaのみとした。

+languages:
+    ja:
+        languageName: 日本語
+        title: かつおぶしのブログ
+        weight: 1
+        params:
+            description: 技術ブログ

GoogleAnalyticsの設定

googleAnalyticsidに設定する。

services:
  googleAnalytics:
+     id: G-XXXXXXXX

ページネーションの設定

1ページにどれくらいの記事を表示するかの設定

pagination:
-  pagerSize: 3
+  pagerSize: 5

記事のURLのパス設定

Janeで使っていたURLのパスと同じ(Hugoのデフォルト)にしたいので、下記のように設定した。

permalinks:
-    post: /p/:slug/
+#   post: # postのURLはコンテンツのディレクトリの階層として自動で生成させる
    page: /:slug/

これによって、ディレクトリの階層をもとにURLが生成されるのでこうした。

ブログのプロフィール設定

ブログの左上にあるプロフィールやアバター画像とかの設定

params:
  ...
  sidebar:
-   emoji: 🍥
+   emoji:
-   subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+   subtitle: やったことの備忘録をまとめたり
    avatar:
        enabled: true
-       local: true
+       local: false
-       src: img/avatar.png
+       src: /images/avatar.png

ブログのコメントの設定

コメントは利用していないので、falseにした。

    comments:
-       enabled: true
+       enabled: false

ウィジェットの設定

右にあるウィジェットの設定
タグクラウドを表示したいので追加した。

widgets:
        homepage:
            - type: search
            - type: archives
              params:
                  limit: 5
            - type: categories
              params:
                  limit: 10
            - type: tag-cloud
              params:
                  limit: 10
        page:
            - type: toc
            - type: categories
              params:
                  limit: 10
+           - type: tag-cloud
+             params:
+                 limit: 10

OGPの設定

TwitterのIDを入力した。

    opengraph:
        twitter:
-           site:
+           site: katsuobushiFPGA
            card: summary_large_image

ダークモード/ライトモードの設定

ダークモード、ライトモードが選べるが、ダークモードにすると一部の mermaid形式の図がまともに見えないので、ライトモードだけにした。

このあたり改善出来たら、この機能をONにするかも。

    colorScheme:
        # Display toggle
-        toggle: true
+        toggle: false

        # Available values: auto, light, dark
-       default: auto
+       default: light

カスタムメニュー設定

左に表示される、カスタムメニューを追加した。
Homeを表示させたいので、下記のように設定

menu:
-   main: []
+   main:
+       - identifier: home
+         name: Home
+         url: /
+         weight: -100
+         params:
+           icon: home
+           newTab: false

ソーシャルリンク設定

ソーシャルネットワークサービスのリンク設定

    social:
        - identifier: github
          name: GitHub
-         url: https://github.com/CaiJimmy/hugo-theme-stack
+         url: https://github.com/katsuobushiFPGA
          params:
              icon: brand-github

        - identifier: twitter
          name: Twitter
-         url: https://twitter.com
+         url: https://twitter.com/KatsuoBushiFPGA
          params:
              icon: brand-twitter

コードのハイライト設定

コードに行番号を表示させたくないので修正した。

markup:
...
    highlight:
        noClasses: false
        codeFences: true
        guessSyntax: true
        lineNoStart: 1
-       lineNos: true
+       lineNos: false
-       lineNumbersInTable: true
+       lineNumbersInTable: false
        tabWidth: 4

pageの作成

exampleSiteを見ると、ディレクトリ構造が少し変わっているのでちょっと修正した。

content以下に、直接.mdファイルを置いていたのだが、content/page以下に固定ページを置くようなので、ここに入れた。

content
├── page
│   ├── about
│   │   └── index.md
│   ├── archives
│   │   └── index.md
│   ├── search
│   │   └── index.md
│   ├── tag-cloud
│   │   └── index.md
│   └── watch-list
│       └── index.md

exampleSiteにある、index.mdをそのまま持ってきているので中身は以下になっている。

---
title: "Archives"
date: 2019-05-28
layout: "archives"
slug: "archives"
menu:
    main:
        weight: -70
        params: 
            icon: archives
---

OGPについて修正

StackではどうやらOGPを自動で設定してくれるらしいが、Janeの時に使っていたOGP画像を生成してそれを使う仕組みを使いたいので修正する。

layouts/_internal/opengraph.htmllayouts/partials/head/opengraph/include.htmlにパスを変更した。
include.htmlは以下のようになっている。

include.html
<!-- General -->
<meta property="og:url" content="{{ .Permalink }}" />
<meta property="og:type" content="{{ if .IsHome }}website{{ else }}article{{ end }}" />
<meta property="og:site_name" content="{{ .Site.Title }}" />
<meta property="og:title" content="{{ .Title }}" />
<meta property="og:description" content="{{ with .Description -}}{{ . }}{{ else -}}{{ if .IsPage }}{{ substr .Summary 0 300 }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
<meta property="og:image" content='
{{ if .Params.thumbnail -}}
    {{ .Params.thumbnail|absURL }}
{{- else if and .File (hasPrefix .File.Path "post") -}}
    {{ path.Join "tcard" (print .File.BaseFileName ".png") | absURL }}
{{ else -}}
    {{ "images/card.png" | absURL }}
{{ end -}}
' />

static/tcard/xxxx.png に生成されたOGP用の画像があるのでこれを参照するようになっている。
詳しくは、 HugoでOGPとXのカード設定を行うを参照。

フォントの修正

layoyts/partials/head/custom.htmlを作成して、下記のように設定 Noto Sans JP を使うようにした。

  <style>
    :root {
      --ja-g-font-family: 'Noto Sans JP', '游ゴシック', '游ゴシック Medium',
        'Yu Gothic Medium', '游ゴシック体', 'Yu Gothic', YuGothic,
        'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo';

      --article-font-family: var(--ja-g-font-family), var(--base-font-family);
      --base-font-family: var(--ja-g-font-family), 'Lato', var(--sys-font-family),
        var(--zh-font-family), sans-serif;
      --code-font-family: 'Ricty Diminished', Menlo, Monaco, Consolas,
        'Courier New', monospace;
      --article-line-height: 1.9;
    }
  </style>

  <script>
    (function () {
      const customFont = document.createElement('link');
      customFont.href =
        'https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap';

      customFont.type = 'text/css';
      customFont.rel = 'stylesheet';

      document.head.appendChild(customFont);
    })();
  </script>

解決したいこと

  • CloudflareのDNSのCNAMEレコードにnetlifyのホスト名を指定しているが、Cloudflareのプロキシを経由すると、ちらつきが発生する。

参考

おわりに

HugoのテーマをJaneからStackに変えたので備忘録として記載した。
Janeの最新のバージョンで思った以上に変わってしまっていたので他にいいテーマを探した結果Stackにした。
古い記事のFront matterJaneの時のままなので、ちょこちょこ直していきたい。

Licensed under CC BY-NC-SA 4.0
Hugo で構築されています。
テーマ StackJimmy によって設計されています。