実績がある hexo-theme-butterfly テーマを導入

前提

  • Node.js v20.11.1
  • Git v2.44.0
  • VSCode v1.87.1
  • Hexo v6.3.0
  • Windows 10 (PowerShell 使用前提のコマンド例です)

Hexo アップグレード

1
2
hexo init <blog-name>
hexo -v

hexo-cli でインストールすると hexo v6.3.0 がインストールされるので、

1
2
npm update hexo@latest
hexo -v

これで最新版の hexo v7.1.1 が導入できた

テーマをダウンロード

テーマの導入では、git clone ではなく、zip でダウンロードと解凍を行う

1
2
3
4
Invoke-WebRequest -Uri "https://github.com/jerryc127/hexo-theme-butterfly/archive/refs/heads/master.zip" -OutFile "themes/butterfly.zip"
Expand-Archive -LiteralPath "themes/butterfly.zip" -DestinationPath ".\themes"
Rename-Item -Path "themes/hexo-theme-butterfly-master" -NewName "butterfly"
Remove-Item -Path "themes/butterfly.zip"

また、必要な追加モジュールがあるので、別途インストール

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

themes/butterfly が生成されるので、その中の設定ファイルをコピー

また、日本語リソースがないので、themes/butterfly/anguages/default.yml からひな形を起こしておく

1
2
Copy-Item -Path "themes/butterfly/_config.yml" -Destination "_config.butterfly.yml"
Copy-Item -Path "themes/butterfly/languages/default.yml" -Destination "themes/butterfly/languages/japanese.yml"

テーマ反映

_config.yml の theme を butterfly に変更します

手で書き換えてもいいけど、シェルで書くとこんな感じ

1
(Get-Content _config.yml) -replace '^theme: .*$','theme: butterfly' | Set-Content _config.yml

これで hexo server にて、ローカルで実行が可能です

ローカル確認

設定変更

一見問題なさそうですが、各種リンク・表示内容が異なるので、修正が必要です
(特に、直・反・所・戻 などの漢字が中華フォントで表示されている点)

_config.yml サイト情報

  • タイトル・著者・言語・タイムゾーンとURLを修正
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Site
-title: Hexo
+title: <blog-name>
subtitle: ''
description: ''
keywords:
-author: Hohn Doe
+author: <username>
-language: en
+language: ja
-timezone: ''
+timezone: 'Japan'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
- url: http://example.com
+ url: <blog-url>

_config.butterfly.yml のフォント設定

  • 中華フォント表示問題の修正
1
2
3
4
5
6
7
8
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size:
  code-font-size:
-  font-family:
+  font-family: Noto Sans JP, sans-serif
  code-font-family:

_config.butterfly.yml のアバター設定

  • アバター画像URLを指定
    • GitHub のアバター画像 (https:/github.com/<username>.png でリダイレクトされるURL) を指定すると楽
1
2
3
4
5
# Avatar (頭像)
avatar:
-  img: https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png
+  img: https://avatars.githubusercontent.com/u/<user-id>?v=4
  effect: false

_config.butterfly.yml のカード表示設定

  • github のボタンのリンク‘修正
  • announcement は無効化
  • info 無効化 (PV / UV の表示には別途、busuanzi の設定が必要)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# aside (側邊欄)
# --------------------------------------

aside:
(中略)
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
-      link: https://github.com/xxxxxx
+      link: https://github.com/<username>
  card_announcement:
-    enable: true
+    enable: false
    content: This is my Blog
(中略)
  card_archives:
    enable: true
    type: monthly # yearly or monthly
-    format: MMMM YYYY # eg: YYYY年MM月
+    format: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
    sort_order: # Don't modify the setting unless you know how it works
  card_webinfo:
-    enable: true
+    enable: false
    post_count: true
    last_push_date: true
    sort_order: # Don't modify the setting unless you know how it works

_config.butterfly.yml のコピーライト表示設定

  • ライセンスをお好みで修正してください
1
2
3
4
5
6
7
8
post_copyright:
  enable: true
  decode: false
  author_href:
-  license: CC BY-NC-SA 4.0
+  license: CC BY 4.0
-  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
+  license_url: https://creativecommons.org/licenses/by/4.0/

これで最低限の公開ができる状況になります

完成

参考