「2023.001|JP」Hexo NexT アップグレードノート

投稿日 2023-03-29 編集日 2023-04-16 閲覧数：単語数： 2k 読書の時間 ≈ 7 分

アップグレードの理由

私の古いブログは2016年にHexoとNexTテーマで構築されており、2020年にはこの2つのプロジェクトが大きく変化し、多くの新しい強力な機能があるため、その時点で一度更新されました。

今日、3年後、再び更新する時が来ました。前回とは異なり、今回は新しいGitHubアカウントpwnfanと新しいドメイン名pwn.fanを使用するため、実際には更新ではなく再構築です。

古いブログの記事に関しては、まだ時代遅れでないコンテンツを新しいブログに移動します。

pwn.fanについて

Pwnはネットワーク用語で、特にネットワークセキュリティサークルで人気があり、通常「突破と超越」を意味します。 pwn.fanというドメイン名は、「継続的な革新と突破への熱意」を表すハッカー精神を表しています。

前のブログとの違い

新しいブログでは、GitHub アクションを使用します：
- この方法では、新しいブログのソースコードをソースコードリポジトリ（プライベート）にプッシュするだけで、このリポジトリに既に設定されているGitHubアクションを介して、静的ページが自動的に生成され、GitHubページが配置されているディレクトリhttps://github.com/pwnfan/pwnfan.github.ioにプッシュされます。
- 前のブログでは、hexo deploy コマンドを手動で実行してデプロイする必要がありました。
  - 以下を参照してください Configuring a publishing source for your GitHub Pages site
  - 以下を参照してください Managing a custom domain for your GitHub Pages site

stateDiagram
state "github: blog/main" as s1
state "github: pwnfan.github.io/gh-pages" as s2
state "site: https://pwnfan.github.io" as s3
[*] --> s1: blog update commit
note right of s1: private
s1 --> s2: (through github action hook)\n1. build static pages\n 2. auto commit to
note right of s2: public
s2 --> s3: served by github

多言語（英語、日本語、中国語）が有効になっており、多言語で記事を発表する予定です。
- 私は英語と日本語を学び続けているので、過去にも英語のブログを書いてみましたが、複数言語でブログを書くのは大変な作業であり、高品質の翻訳を確保するのに多くの時間がかかります。ChatGPT の登場により、比較的高品質な翻訳の作業量が大幅に減少したため、将来的には3つの言語で同時に記事を公開してみようと思います。
- 1つの言語で記事を表示したい場合は、ページの下部の言語切り替えメニューを使用して切り替えることができます。

問題と解決策

カスタムの404ページが機能しない

問題

存在しないページにアクセスすると、以下の図のようにgithubの404ページが表示されます。

解決策

404ページのFront-matterにpermalink: /404.htmlを追加します。

1
2
3
4
---
title: 404
permalink: /404.html
---
KRISTOF ZERBE404 Page in Hexo for GitHub Pages

Sitemapの生成時に特定のページを無視する方法

問題

Sitemapを生成する際に、404ページのような特定のページを無視する必要があります。しかし、HexoとNextの既存のドキュメントにはそれに関する内容がありません。

解決策

Hexoのソースコードを調べたところ、sitemap生成機能がプラグインhexo-generator-sitemapを使用していることがわかりました。プラグインのREADMEには、特定のページを無視する方法が説明されています。Front-matterにsitemap: falseを追加するだけです：

1
2
3
4
5
---
title: lorem ipsum
date: 2020-01-02
sitemap: false
---
hexo-generator-sitemap, READMEExclude Posts/Pages

多言語の問題

多言語の問題については、別の記事「2023.002|JP」Issuesシリーズ: HexoとNexTテーマの多言語サポートについてを参照してください。

Google Analytics

設定が有効にならず、Google Analytics にカウントされない問題があります。

原因は、Google Analyticsは既にバージョン4になりましたため、tracking_idのフォーマットがG-XXXXXXXXXXに変更されたことであり、古いフォーマットはUA-XXXXXXXXX-Xとなっています。こちらは参考です。

NexT公式ドキュメントに従って以下のように設定すると、問題なく動作します。

# Google Analytics
google_analytics:
  tracking_id: UA-XXXXXXXX-X
  only_pageview: false

しかし、only_pageviewを削除するか、trueに設定すると、最新のv4バージョンのtracking_idをサポートしなくなります。後で、関連ソースコードrelated source codeを確認したところ、そうでした。NexTの公式ドキュメントには特に説明がありません。関連するissueを投稿している人もいます。

[GA4] Introducing the next generation of Analytics, Google Analytics 4の説明によると、Googleは2023年7月1日に古いバージョンのGoogle Analytics（UA-XXXXXXXXX-Xなど）をサポートを終了するということです。これは、データ統計に使用する古いバージョンのGoogle Analytics tracking_idを使用するウェブサイトはもはや使用できなくなることを意味します。上記の設定を確認して、2023年にブログが正常に機能するようにすることをお勧めします。この問題について議論している他のものもありますので、[Implementation Notes] Hexo Update Google Analytics 4を参考にしてください。

Firebase 構成の問題

Next の公式ドキュメントFirebase の構成の説明はほとんど言及されていますが、実際の設定はより複雑で、さまざまな問題に遭遇しました。以下は、解決策を見つけた記事であるため、詳細について議論しません：

Hexo - Add View Count based on FireBase
Application Note #4 - Configure hexo-theme-next
【2021年最新】React×firebaseにて「Uncaught (in promise) FirebaseError: Missing or insufficient permissions.」エラーが出力される原因とその対策
【解決】FirebaseError: Missing or insufficient permissions.
https://firebase.google.com/docs/firestore/security/get-started?hl=en&authuser=0#deny-all
Structuring Cloud Firestore Security Rules
Fix: 'The Cloud Firestore API is not available for Datastore Mode projects.'

ここでは、関連するいくつかの問題について具体的に話します。

一つ目、Firestore DatabaseのデフォルトモードはDatastoreモードであるため、Firebase Firestore Databaseのメインインターフェースから記事閲覧統計などの情報を見ることはできませんが、Google Cloud内に隠されています。以下が直接リンクです：https://console.cloud.google.com/firestore/databases/-default-/data/panel/。

二つ目、Firebase Databaseの役割の書き込みはセキュリティ上の問題を引き起こす可能性があります。ここではFirebaseの公式ドキュメントに従って安全な書き込みを行うために、作成したコレクションの名前が「articles」であるとします：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /articles/{article} {
      allow read, write;
    }
  }
}

Github Actionの問題

前の節で、CI/CDにGithub Actionを使用したことを述べました。車輪の再発明を避けるため、sma11black / hexo-actionを直接使用しました。これは、Hexo CI/CD Actionであり、デプロイの自動化を行います。

使用中に、ビルド時にエラーが発生しました：[hexo-renderer-pandoc] pandoc exited with code null.

NexTテーマのドキュメントによると、数式/化学式用に2つのレンダリングエンジンが利用可能です：

MathJax
- hexo-renderer-pandocが必要
KaTeX

2つを比較した後、MathJaxを使用することを選択し、設定ファイルに設定し、ローカルにhexo-renderer-pandocをインストールしました。

問題は、sma11black / hexo-actionによって作成されたDockerイメージがhexo-renderer-pandocをインストールしていなかったため、hexo-renderer-pandocの欠如によりブログのコンパイルが失敗したことでした。

私は自分のフォークリポジトリpwnfan/blog-github-actionでpandocの問題を修正しました。