Hexo メモ#
私の設定#
- Hexo バージョン: hexo-cli: 4.3.2, hexo: 7.3.0 (現在最新)
- Node.js バージョン: 22.16.0
- Git バージョン: 2.47.0.windows.2
- PNPM バージョン: 10.12.4
- Windows バージョン: 11
Node.js のインストール#
-
公式サイト から LTS バージョンをインストールします。一般的に、コンピュータのメモリが十分であれば C ドライブに直接インストールできますが、もちろんパスを変更することも可能です。私は通常、正常にダウンロードしてパスを変更していますが、問題はありません。
-
インストールが完了したら、成功したかどうかを確認します。キーボードで win + R を押し、
CMD
と入力して Enter を押し、CMD ウィンドウを開き、node -v
コマンドを実行します。バージョン情報が表示されれば、インストールが成功したことを示します。
Git のインストール#
公式サイト から最新バージョンの 64-bit Git for Windows Setup
インストーラーをインストールします。
インストールが完了したら、コマンドラインで git --version
と入力します。バージョン番号が表示されれば、インストールが成功したことを示します。
よく使うコマンド#
git config -l //すべての設定を表示
git config --system --list //システム設定を表示
git config --global --list //ユーザー(グローバル)設定を表示
Git ユーザー名とメールアドレスの設定#
git config --global user.name "あなたのユーザー名"
git config --global user.email "あなたのメールアドレス"
パッケージマネージャのインストール#
npm のインストールはすべての基礎です。一般的に、Node.js をインストールすると、npm もインストールされます。以下のコマンドで確認します:
npm -v
node -v
npm ソースの変更。npm はさまざまなモジュールをダウンロードしますが、デフォルトでは海外のサーバーからダウンロードされるため、速度が遅くなります。淘宝ミラーに設定することをお勧めします。CMD ウィンドウを開き、以下のコマンドを実行します:
npm config set registry https://registry.npm.taobao.org
pnpm のインストール#
pnpm は高速でディスクスペースを節約するパッケージマネージャで、npm や yarn に似ています。pnpm をインストールするには、以下のコマンドを使用します:
npm install -g pnpm
なぜ pnpm を選ぶのか?それはインストール速度が速く、依存関係の管理がより効率的で、npm に比べて失敗しやすく遅いからです。pnpm の方が私にとっては良い体験を提供してくれます。
Hexo のインストール#
- Git BASH で以下のコマンドを入力して Hexo をインストールします:
pnpm install -g hexo-cli
- インストールが完了したら、
hexo -v
を入力してインストールが成功したかどうかを確認します。
Github 設定#
上記の操作は前提条件です。次に Github の設定を行います。
Github の登録については言及しません。基本的なことなので、私のようなコード初心者でも理解できることですから。
リポジトリの作成#
- GitHub にログインし、右上の
+
ボタンをクリックしてNew repository
を選択します。 - リポジトリ名を入力します。
<username>.github.io
形式(例:yourusername.github.io
)を使用することをお勧めします。これにより、個人のホームページとして直接使用できます。
ここでは、通常の hexo deploy
コマンドを使用して GitHub Pages にデプロイすることは考えていません。なぜなら、記事が増えると生成時間が煩雑になるからです。ここでの推奨は、Github Actions
を使用して自動デプロイすることです。
この部分のチュートリアルは 店長の文章 に基づいていますが、少し古くなっているため、いくつか変更を加えました(ここでの画像は 安知魚 からのものです):
- まず、ソースコードを置くプライベートリポジトリを作成します。以下を
hexo-source
と呼びます。 - 次に、Github のキーを生成します:
Github にアクセス -> アバター(右上) -> 設定 -> 開発者設定 -> パーソナルアクセストークン -> 新しいトークンを生成します。作成するトークン名は自由ですが、repo と workflows の項目にチェックを入れる必要があります。
リンク にアクセスして生成します。
[!NOTE]
!!! トークンはこの一度だけ表示され、その後は確認できなくなるため、必ずトークンを記録しておいてください。後で忘れた場合は、再生成して再設定するしかありません。
hexo-source
リポジトリの設定で、設定 -> アクション -> 一般 -> ワークフロー権限をクリックします。Read and write permissions
にチェックを入れ、Allow <span style="background:#FF0000;"></span>all actions and reusable workflows
にもチェックを入れます。
- 設定 -> Secrets and variables -> Actions -> 新しいリポジトリシークレットを追加します。
GITHUBTOKEN
:先ほど生成したトークンを置きます。
上述は前提条件です。次に Hexo をデプロイする必要がありますので、次のステップに進むことができます。#
Hexo の初期化#
- ローカルに新しいフォルダを作成します。例えば
hexo-solitude
です。 - ここでは vscode を使用してそのフォルダを開き、ターミナルで以下のコマンドを入力して Hexo を初期化します:
hexo init (プロジェクト名)
私は通常、何も入力せずにそのままフォルダ内で開始しますが、プロジェクト名を追加した場合は、次のステップは:
cd (プロジェクト名)
- 依存パッケージをインストールします:
pnpm install
次に、希望するテーマを選択します。ここでは Solitude を使用しています。具体的な設定については詳しくは説明しませんが、一部をお話しします:
まず基本的なインストールですが、ここでは git clone
を選択します。他に理由はありませんが、ソースコードを少し変更する予定なので、変更したくない場合は直接 pnpm でダウンロードできます:
// git インストール
git clone -b dev https://github.com/everfu/hexo-theme-solitude.git themes/solitude
// pnpm インストール
pnpm i hexo-theme-solitude
次に、_config.yml
を以下のように変更します:
theme: solitude
設定#
以下のコードは私のメモです:
# Hexo 設定
## ドキュメント: https://hexo.io/docs/configuration.html
## ソース: https://github.com/hexojs/hexo/
# サイト
title: 喵落阁
subtitle: '克喵のブログ'
description: 'あなたがすべての真実を見た後でも、あなたの家族や友人を愛し続けることを願っています。'
keywords: 克喵,kemiao,ブログ
author: 克喵愛卤面
language: ja-JP
timezone: 'Asia/Tokyo'
# URL
## ここにサイトの URL を設定します。例えば、GitHub Pages を使用する場合、url を 'https://username.github.io/project' に設定します。
url: # ウェブサイトのアドレスを入力
permalink: posts/:abbrlink.html
permalink_defaults:
pretty_urls:
trailing_index: true # パーマリンクから trailing 'index.html' を削除するには false に設定します。
trailing_html: true # パーマリンクから trailing '.html' を削除するには false に設定します。
# ディレクトリ
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# 執筆
new_post_name: :title.md # 新しい投稿のファイル名
default_layout: post
titlecase: false # タイトルをタイトルケースに変換します。
external_link:
enable: true # 外部リンクを新しいタブで開きます。
field: site # サイト全体に適用します。
exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
line_number: false
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
preprocess: true
line_number: true
tab_replace: ''
# ホームページ設定
# path: ブログのインデックスページのルートパス。 (デフォルト = '')
# per_page: ページごとに表示される投稿数。 (0 = ページネーションを無効にします)
# order_by: 投稿の順序。 (デフォルトでは日付の降順で並べ替えます)
index_generator:
path: ''
per_page: 10
order_by: -date
# カテゴリ & タグ
default_category: uncategorized
category_map:
tag_map:
# メタデータ要素
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true
# 日付 / 時間形式
## Hexo は Moment.js を使用して日付を解析および表示します。
## 日付形式は http://momentjs.com/docs/#/displaying/format/ で定義されています。
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option は 'mtime', 'date', 'empty' をサポートします。
updated_option: 'mtime'
# ページネーション
## per_page を 0 に設定するとページネーションが無効になります。
per_page: 10
pagination_dir: page
# ファイルの含める / 除外する
## include:/exclude: オプションは 'source/' フォルダにのみ適用されます。
include: []
exclude: []
ignore: []
# 拡張機能
## プラグイン: https://hexo.io/plugins/
## テーマ: https://hexo.io/themes/
theme: solitude
# デプロイ
## ドキュメント: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: [email protected]:kemiaofxjun/kemiaofxjun.github.io.git
branch: main
# RSS フィード設定
feed:
type: atom # atom.xml を生成
path: atom.xml # 出力ファイル名
limit: 20 # 最大表示記事数 (0=すべて)
hub: # PubSubHubbub 中心 (オプション)
content: true # 全文を含めるか (true=はい, false=要約のみ)
content_limit: 140 # 要約の長さ(content=false の場合に有効)
content_limit_delim: ' ' # 切り捨て区切り文字
order_by: -date # 日付の降順で並べ替え
autodiscovery: true # HTML ヘッダーに自動発見タグを追加
# 数学公式レンダリング設定
markdown:
preset: 'default' # 使用する MD 構文、デフォルトは GFM
render:
html: true # html をレンダリング
xhtmlOut: false
langPrefix: 'language-' # コードブロックのクラス名に前置詞を追加します(指定された言語の場合)。
breaks: true
linkify: true # リンクを [name](link) 形式ではなく書いた場合、自動的にリンクとして認識してレンダリングします。
typographer: true # 一般的な印刷要素を置き換えます。
quotes: '“”‘’' # 文章の "" '' を置き換えます。
enable_rules:
disable_rules:
plugins: # プラグインを使用
anchors:
level: 2 # タイトルのレベルをレンダリングします(h1,h2,h3)
collisionSuffix: ''
permalink: true
permalinkClass: 'headerlink'
permalinkSide: 'left'
permalinkSymbol: ''
case: 0
separator: '-'
images: # 画像のいくつかのコンパイル
lazyload: true # lazyload をレンダリングする必要がありますか
prepend_root: false
post_asset: false
inline: false
swpp:
# プラグインを有効にするか
enable: true
# 公開前にスクリプトを自動実行するか
auto_exec: true
gen_dom: true
# 記事リンクを数字または文字に変換:https://github.com/rozbo/hexo-abbrlink
abbrlink:
alg: crc16 #アルゴリズム: crc16(デフォルト)および crc32
rep: hex #進数: dec(デフォルト)および hex: dec #出力進数:十進法と十六進法、デフォルトは10進法。丨decは十進法、hex
# https://github.com/hexojs/hexo-generator-sitemap
sitemap:
path: sitemap.xml
rel: false
tags: true
categories: true
algolia:
appId: ""
apiKey: ""
adminApiKey: ""
chunkSize: 5000
indexName: "index-name"
fields:
- content:strip:truncate,0,500
- excerpt:strip
- gallery
- permalink
- photos
- slug
- tags
- title
# hexo-safego セキュリティリダイレクトプラグイン
# see https://blog.liushen.fun/posts/1dfd1f41/
hexo_safego:
# 基本機能設定
general:
enable: true # プラグインを有効にする
enable_base64_encode: true # Base64 エンコードを使用
enable_target_blank: true # 新しいウィンドウでリダイレクトページを開く
# セキュリティ設定
security:
url_param_name: 'u' # URL パラメータ名
html_file_name: 'go.html' # リダイレクトページのファイル名
ignore_attrs: # 処理を無視する HTML 構造
- 'data-fancybox'
# コンテナとページ設定
scope:
apply_containers: # 適用するコンテナセレクタ
- '#article-container'
apply_pages: # 適用するページパス
- "/posts/"
- "/devices/"
exclude_pages: # 除外するページパス
# ドメインホワイトリスト
whitelist:
domain_whitelist: # 許可されるホワイトリストドメイン
- "kemeow.top"
- "kemiaosw.top"
- "050815.xyz"
- "314926.xyz"
- "051531.xyz"
# ページ外観設定
appearance:
avatar: https://img.314926.xyz/images/2025/08/13/no-background-kemiaofxjun.webp # リダイレクトページのアバターのパス
title: "喵洛阁" # リダイレクトページのタイトル
subtitle: "安全センター" # リダイレクトページのサブタイトル
darkmode: auto # ダークモードを有効にするか
countdowntime: 4 # リダイレクトページのカウントダウン秒数。負の数に設定すると自動的にリダイレクトしません。
# デバッグ設定
debug:
enable: false # デバッグモードを有効にする
# アニメ追跡プラグイン
# https://github.com/HCLonely/hexo-bilibili-bangumi
bangumi: # アニメ追跡設定
enable: true
source: bili
path:
vmid: 3546643173477234
title: "アニメ追跡リスト"
quote: "生命は続く、アニメ追跡も続く!"
show: 1
lazyload: false
loading:
showMyComment: true
pagination: false
extra_options:
top_img: false
lazyload:
enable: false
ブログの他の変更は基本的にチュートリアルや他のブロガーのサイトからのものです。
プラグイン#
- 基本依存関係
hexo-renderer-pug
pnpm i hexo-renderer-pug
- 文字数カウント
hexo-wordcount
pnpm i hexo-wordcount
設定を変更:
# --------------------------- start ---------------------------
# 文字数カウント
# 警告: まず hexo-wordcount プラグインをインストールしてください。
wordcount: false
# --------------------------- end ---------------------------
- 数学公式
hexo-render-marked
をアンインストール
npm un hexo-renderer-marked
hexo-renderer-markdown-it
katex
@renbaoshuo/markdown-it-katex
をインストール
pnpm i hexo-renderer-markdown-it katex @renbaoshuo/markdown-it-katex
設定を変更:
# --------------------------- start ---------------------------
# Katex
# Latex 公式サポート
katex:
enable: false
# 各ページで読み込むか
per_page: false
# 公式をコピーするか
copytex: false
# --------------------------- end ---------------------------
以下の内容を _config.yml
に追加:
markdown:
preset: 'default'
render:
html: true
xhtmlOut: false
langPrefix: 'language-'
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
enable_rules:
disable_rules:
plugins:
- '@renbaoshuo/markdown-it-katex'
anchors:
level: 2
collisionSuffix: ''
permalink: false
permalinkClass: 'header-anchor'
permalinkSide: 'left'
permalinkSymbol: '¶'
case: 0
separator: '-'
images:
lazyload: false
prepend_root: false
post_asset: false
inline: false # https://markdown-it.github.io/markdown-it/#MarkdownIt.renderInline
設定項目を有効にする:
# --------------------------- start ---------------------------
# Katex
# Latex 公式サポート
katex:
enable: true
# 各ページで読み込むか
per_page: true
# 公式をコピーするか
copytex: false
# --------------------------- end ---------------------------
- PWA hexo-swpp と swpp-backends プラグインをインストール
ブログのルートディレクトリで実行:
pnpm i hexo-swpp
pnpm i swpp-backends
設定を有効にする:
# 約773行目
# --------------------------- start ---------------------------
# PWA
pwa:
enable: true
manifest: /manifest.json # manifest.json
theme_color: "#006a73" # テーマカラー
mask_icon: /img/pwa/favicon.png # マスクアイコン
apple_touch_icon: /img/pwa/favicon.png # Apple タッチアイコン
bookmark_icon: /img/pwa/favicon.png # ブックマークアイコン
favicon_32_32: /img/pwa/favicon_32.png # 32x32 アイコン
favicon_16_16: /img/pwa/favicon_16.png # 16x16 アイコン
# --------------------------- end ---------------------------
_config.yml
に swpp 設定を追加:
swpp:
# プラグインを有効にするか
enable: true
# 公開前にスクリプトを自動実行するか
auto_exec: true
gen_dom: true
source
ディレクトリに manifest.json
ファイルを作成:
{
"name": "ウェブサイト名",
"short_name": "ウェブサイト名の略称",
"theme_color": "#006a73",
"background_color": "#006a73",
"display": "fullscreen",
"scope": "/",
"start_url": "/",
"id": "/",
"icons": [
{
"src": "/img/pwa/favicon_16.png",
"sizes": "16x16",
"type": "image/png",
"purpose": "any"
},
{
"src": "/img/pwa/favicon_16.png",
"sizes": "16x16",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/img/pwa/favicon_32.png",
"sizes": "32x32",
"type": "image/png",
"purpose": "any"
},
{
"src": "/img/pwa/favicon_32.png",
"sizes": "32x32",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/img/pwa/favicon.png",
"sizes": "180x180",
"type": "image/png",
"purpose": "any"
},
{
"src": "/img/pwa/favicon.png",
"sizes": "180x180",
"type": "image/png",
"purpose": "maskable"
}
],
"splash_pages": null
}
ブログのルートディレクトリに sw-rules.js
ファイルを作成:
module.exports.config = {
/** @type {?ServiceWorkerConfig|boolean} */
serviceWorker: {
escape: 1,
cacheName: 'SolitudeCache',
debug: false,
},
register: {
onsuccess: undefined,
onerror: () =>
console.error(
'Service Worker 登録失敗!おそらくあなたのブラウザがこの機能をサポートしていないためです!'
),
builder: (root, framework, pluginConfig) => {
const { onerror, onsuccess } = pluginConfig.register;
return `
<script>
(() => {
const sw = navigator.serviceWorker;
const error = ${onerror && onerror.toString()};
if (!sw?.register('${new URL(root).pathname}sw.js')
${onsuccess ? `?.then(${onsuccess.toString()})` : ""}
?.catch(error)
) error()
})()
</script>`;
},
},
/** @type {?DomConfig|boolean} */
dom: {
/** @type {?VoidFunction} */
onsuccess: () => {
caches
.match('https://id.v3/')
.then((res) => {
if (res)
res.json().then((json) => {
utils &&
utils.snackbarShow(
`キャッシュが更新され、${json.escape + '.' + json.global + '.' + json.local
} バージョンの最新内容に更新されました`,
false,
2500
);
});
else console.info('キャッシュが見つかりませんでした');
})
.catch((error) => console.error('キャッシュマッチエラー', error));
},
},
/** @type {?VersionJsonConfig|boolean} */
json: {
/** @type {number} */
maxHtml: 15,
/** @type {number} */
charLimit: 1024,
/** @type {string[]} */
merge: [],
exclude: {
/** @type {RegExp[]} */
localhost: [],
/** @type {RegExp[]} */
other: [],
},
},
/** @type {?ExternalMonitorConfig|boolean} */
external: {
/** @type {number} */
timeout: 5000,
/** ファイルを取得する際の並行制限 */
concurrencyLimit: 100,
/** @type {({head: string, tail: string}|function(string):string[])[]} */
js: [],
/** @type {RegExp[]} */
stable: [
/^https:\/\/npm\.elemecdn\.com\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
/^https:\/\/cdn\.cbd\.int\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
/^https:\/\/cdn\.jsdelivr\.net\/npm\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
],
replacer: (srcUrl) => {
if (srcUrl.startsWith('https://cdn.jsdelivr.net/npm/')) {
const pathname = new URL(srcUrl).pathname;
return [
srcUrl,
`https://cdn.cbd.int/${pathname}`,
`https://npm.elemecdn.com/${pathname}`,
`https://fastly.jsdelivr.net/npm/${pathname}`,
];
} else {
return srcUrl;
}
},
},
};
module.exports.cacheRules = {
simple: {
clean: true,
search: false,
match: (url, $eject) =>
url.host === $eject.domain && ['/404.html'].includes(url.pathname),
},
cdn: {
clean: true,
match: (url) =>
[
'cdn.cbd.int',
'lf26-cdn-tos.bytecdntp.com',
'lf6-cdn-tos.bytecdntp.com',
'lf3-cdn-tos.bytecdntp.com',
'lf9-cdn-tos.bytecdntp.com',
'cdn.staticfile.org',
'npm.elemecdn.com',
].includes(url.host) &&
url.pathname.match(/\.(js|css|woff2|woff|ttf|cur)$/),
},
};
module.exports.getSpareUrls = (srcUrl) => {
if (srcUrl.startsWith('https://npm.elemecdn.com')) {
return {
timeout: 3000,
list: [
srcUrl,
`https://fastly.jsdelivr.net/${new URL(srcUrl).pathname}`,
],
};
}
};
module.exports.ejectValues = (hexo, rules) => {
return {
domain: {
prefix: 'const',
value: new URL(hexo.config.url).host,
},
};
};
module.exports.skipRequest = (request) => request.url.startsWith("https://i0.hdslb.com") ||
request.url.startsWith('https://meting.qjqq.cn') ||
request.url.startsWith('https://api.i-meto.com');
- hexo-deploy-git Git にコミットするためのプラグイン
pnpm i hexo-deploy-git --save
- hexo-generator-feed Hexo の RSS プラグイン
pnpm i hexo-generator-feed --save
- Hexo の短リンク:
hexo-abbrlink
pnpm i hexo-abbrlink --save
_config.yml
で変更:
permalink: posts/:abbrlink/
# または
permalink: posts/:abbrlink.html
追加:
# abbrlink 設定
abbrlink:
alg: crc32 # 短リンクを計算するために使用されるアルゴリズム。crc16(デフォルト)および crc32 をサポート
rep: hex # 短リンクの URL での表現。dec(デフォルト)および hex をサポート
drafts: false # 下書きに対して短リンクを生成するかどうか(デフォルトは false)
force: false # 強制モードを有効にする。このモードでは、プラグインはキャッシュを無視し、すべての投稿に対して短リンクを計算します(すでに短リンクがある場合でも)。デフォルトは false
writeback: true # フロントマターの変更を実際のマークダウンファイルに書き戻すかどうか(デフォルトは true)
- ブログのサイトマップ :
hexo-generator-sitemap
pnpm i hexo-generator-sitemap --save
_config.yml
に設定を追加:
sitemap:
path:
- sitemap.xml
- sitemap.txt
template: ./sitemap_template.xml
template_txt: ./sitemap_template.txt
rel: false
tags: true
categories: true
- Algolia 検索の使用 :
hexo-algoliasearch
- Algolia に登録:
登録ページ:dashboard.algolia.com/users/sign_up
- アプリを作成:
登録成功後、アプリを作成:dashboard.algolia.com/account/plan/create?from=dashboard
- 検索 -> 設定 -> インデックスに index_name を追加します。
ブログで以下のコマンドを実行:
pnpm i hexo-algoliasearch --save
_config.yml
に追加:
algolia:
appId: "Z7A3XW4R2I"
apiKey: "12db1ad54372045549ef465881c17e743"
adminApiKey: "40321c7c207e7f73b63a19aa24c4761b"
chunkSize: 5000
indexName: "my-hexo-blog"
fields:
- content:strip:truncate,0,500
- excerpt:strip
- gallery
- permalink
- photos
- slug
- tags
- title
[!NOTE]
!!! 設定が完了したら
hexo clean
を実行することを忘れないでください。
hexo g
の後に以下のコードを実行:
hexo algolia
- hexo-safego セキュリティリダイレクトプラグイン
このプラグインを使用する前に、cheerio
をインストールする必要があります。cheerio
は、サーバーサイドで jQuery のコア機能を迅速かつ柔軟に実装するための軽量ライブラリです。hexo-safego
プラグインでは、cheerio
を使用して生成された静的 HTML コンテンツを解析および操作し、クライアントサイドで jQuery を導入することなく、外部リンクを処理および置き換えることでブログのセキュリティを強化します。Hexo には通常このプラグインが含まれているため、node_modules
を確認してください。もしなければ、次のコマンドを実行してください:
pnpm i cheerio --save
その後、このプラグインをインストールできます:
pnpm i hexo-safego --save
hexo
のルートディレクトリの _config.yml
ファイルに以下の設定を追加:
# hexo-safego セキュリティリダイレクトプラグイン
# see https://blog.liushen.fun/posts/1dfd1f41/
hexo_safego:
# 基本機能設定
general:
enable: true # プラグインを有効にする
enable_base64_encode: true # Base64 エンコードを使用
enable_target_blank: true # 新しいウィンドウで開く
# セキュリティ設定
security:
url_param_name: 'u' # URL パラメータ名
html_file_name: 'go.html' # リダイレクトページのファイル名
ignore_attrs: # 処理を無視する HTML 属性
- 'data-fancybox'
# コンテナとページ設定
scope:
apply_containers: # 適用するコンテナセレクタ
- '#article-container'
apply_pages: # 適用するページパス
- "/posts/"
- "/devices/"
exclude_pages: # 除外するページパス
# ドメインホワイトリスト
whitelist:
domain_whitelist: # 許可されるホワイトリストドメイン
- "qyliu.top"
- "liushen.fun"
# ページ外観設定
appearance:
avatar: /info/avatar.ico # アバターのパス
title: "清羽飞扬" # ページタイトル
subtitle: "安全センター" # ページサブタイトル
darkmode: true # ダークモードを有効にするか
countdowntime: -1 # カウントダウン秒数
# デバッグ設定
debug:
enable: false # デバッグモードを有効にする
- Hexo のアニメ追跡ページ:hexo-bilibili-bangumi
pnpm i hexo-bilibili-bangumi --save
_config.yml
で設定:
bangumi: # アニメ追跡設定
enable: true # 有効にするか
source: bili # データソース
path: bangumis/index.html # ページパス
vmid: # ユーザーID
title: 'アニメ追跡リスト' # ページタイトル
quote: '生命は続く、アニメ追跡も続く!' # ページ引用
show: 1 # 初期表示ページ: 0=見たい, 1=見ている, 2=見た
lazyload: true # 画像の遅延読み込みを有効にするか
metaColor: # メタ情報のフォントカラー
color: # 概要のフォントカラー
webp: true # webp 形式の画像を使用するか
progress: true # 進捗バーを表示するか
...
cinema: # ドラマ設定
enable: true # 有効にするか
source: bili
...
game: # ゲーム設定、source: bgmv0 のみサポート
enable: true # 有効にするか
source: bgmv0
...
まだ更新中です。。。
Github Action 設定#
段落 の続きです。将来的には 次の章 を水に流すかもしれません。
次にプライベートリポジトリを作成します。これは Token を保護するためです。見解は分かれるかもしれませんが。
このプライベートリポジトリは Hexo ブログのコードを保存するためのもので、Qexo を使用する場合には必須です。
作成が完了したら、ブログのソースコードをここにプッシュする必要があります。まず、リモートリポジトリのアドレスを取得します。ここでは SSH と HTTPS の両方が使用できます。SSH は SSH キーをバインドしたデバイス上ではパスワードを再入力する必要がありませんが、HTTPS ではパスワードを入力する必要があります。ただし、SSH は時々ポート占有の問題が発生することがありますので、自主的に選択してください。
[!TIP]
ここでプライベートリポジトリを選択する理由は、次の設定で
Token
を使用するためです。もしToken
が盗まれた場合、他の人があなたの GitHub リポジトリの内容を自由に操作できるため、このリスクを避けるためにブログのソースコードを非公開にすることを選択しました。
Github Action の設定#
[Blogroot]
に.github
フォルダを新規作成します。注意:先頭に.
が付いています。その後、.github
内にworkflows
フォルダを新規作成し、workflows
フォルダ内にautodeploy.yml
を新規作成します。[Blogroot]/.github/workflows/autodeploy.yml
に以下を入力します。
# main ブランチに変更がプッシュされたときに Action を開始します。
name: 自動デプロイ
on:
push:
branches:
- main # 自由に選択したブランチ
release:
types:
- published
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: ブランチを確認
uses: actions/checkout@v4
with:
ref: main # 自由に選択したブランチ
- name: Node をインストール
uses: actions/setup-node@v4
with:
node-version: "22.x" # Node バージョン
- name: Hexo をインストール
run: |
export TZ='Asia/Shanghai'
npm install hexo-cli -g
npm install yamljs --save
- name: Hexo をキャッシュ
uses: actions/cache@v4
id: cache
with:
path: node_modules
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
- name: 依存関係をインストール
if: steps.cache.outputs.cache-hit != 'true'
run: |
npm install --save
npm install hexo-algoliasearch --save
npm install hexo-bilibili-bangumi --save
- name: 静的ファイルを生成
run: |
node ./link.js
hexo clean
hexo generate
hexo bangumi -u
hexo algolia
- name: デプロイ
run: |
cd ./public
git init -b main
git config --global user.name '${{ secrets.GITHUBUSERNAME }}'
git config --global user.email '${{ secrets.GITHUBEMAIL }}'
git add .
git commit -m "${{ github.event.head_commit.message }} $(date +"%Z %Y-%m-%d %A %H:%M:%S") Updated by GitHub Actions"
git push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/${{ secrets.GITHUBUSERNAME }}.github.io.git" main
上記のコードは 店長 からの修正自用です。なぜ 安知魚 のコードを使用しないのか?
-
まず、トークンをリポジトリのファイルに直接置くのはあまり良くないと思います。
-
私のようにローカルで作業している場合、リポジトリにプッシュできないため、ここでのトークンは直接アップロードできません。
token:
をtoken: ${{ servets.GH_token }}
に変更しようとしましたが、さまざまな問題が発生しました。逆に店長のコードを使用した後は、ほぼ問題なく、AI に問い合わせた結果、現在のコードが得られ、正式にアップロードできるようになりました(悪意はありません)。 -
その後、リポジトリの設定 -> Secrets -> actions で環境変数を追加する必要があります。変数名はスクリプトに出てくるものを参考にして、順に追加します。
リモートリポジトリとブランチの再設定#
🍼 初めて git でブログソースを管理する
1. `[Blogroot]/themes/solitude/.git` を削除するか、別のフォルダに移動します。テーマフォルダ内の `.git` フォルダが存在すると、サブプロジェクトとして認識され、ソースコードリポジトリにアップロードできなくなります。- ブログのルートディレクトリ
[Blogroot]
で以下のコマンドを実行します:
git init # 初期化
git remote add origin [email protected]:[GithubUsername]/[SourceRepo].git #[SourceRepo] はソースコードを保存する GitHub プライベートリポジトリ
git checkout -b master # master ブランチに切り替えます。
# 2020年10月以降、GitHub で新しいリポジトリを作成するとデフォルトのブランチが main に変更されるため、注意してください。
# そうでない場合、後のすべての設定ブランチを一致させる必要があります。
- 除外項目を追加します:
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/solitude/.git
もし solitude
テーマでない場合、最後の行を現在使用しているテーマに置き換えてください。
4. その後、git コミットコマンドを実行して、ブログソースコードを GitHub にプッシュします。
git add .
git commit -m "github action update"
git push origin master
# 2020年10月以降、GitHub で新しいリポジトリを作成するとデフォルトのブランチが main に変更されるため、注意してください。
- この時、テーマフォルダが正常にアップロードされ、テーマフォルダ内の .git フォルダの除外項目も追加されていれば、2 番目のステップで移動または削除した
.git
を戻すことを検討できます。将来的にアップグレードに使用するためです。(本当にこの方法でアップグレードする人がいるのか疑問です)
🍾 以前に git でソースコードを管理したことがある
1. 除外項目を追加します。インストールコマンドで使用できる内容は、提出するソースコードには含まれないため、これらの内容を除外項目に追加し、GitHub にアップロードしないことを示します。これにより、提出するファイル量を大幅に減らし、提出速度を向上させることができます。
[Blogroot]/.gitignore
を開き、以下の内容を入力します:
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/solitude/.git
もし solitude
テーマでない場合、最後の行を現在使用しているテーマに置き換えてください。
- ソースコードをプライベートリポジトリ
[SourceRepo]
に提出します。
ブログのルートディレクトリ[Blogroot]
でターミナルを起動し、git コマンドでリポジトリのアドレスをリセットします。これにより、新しいリポジトリを作成しても貴重なコミット履歴を保持し、バージョンをロールバックできるようになります。
git remote rm origin # 既存のリポジトリリンクを削除
git remote add origin [email protected]:[GithubUsername]/[SourceRepo].git #[SourceRepo] は新しいソースコードを保存する GitHub プライベートリポジトリ
git checkout -b master # master ブランチに切り替えます。
# 2020年10月以降、GitHub で新しいリポジトリを作成するとデフォルトのブランチが main に変更されるため、注意してください。
# そうでない場合、後のすべての設定ブランチを一致させる必要があります。
git add .
git commit -m "github action update"
git push origin master
# 2020年10月以降、GitHub で新しいリポジトリを作成するとデフォルトのブランチが main に変更されるため、注意してください。
- 直面する可能性のあるバグ
solitude テーマフォルダ内の .git フォルダが存在すると、テーマフォルダがサブプロジェクトとして認識され、ソースコードリポジトリに正常にアップロードできなくなります。除外項目を追加しても正常にテーマフォルダをアップロードできない場合は、まずローカルソースの themes フォルダを別のディレクトリに移動します。次に、一度コミットします。その後、themes フォルダを戻し、再度コミットします。
Important
それでもうまくいかない場合は、solitude テーマフォルダ内の .git フォルダを削除し、再度コミット操作を繰り返してください。
穴を掘る#
大体ここまで書きましたが、将来的には 次の章 を掘るかもしれません。しかし、現在の一般的な内容はここまでです。今後は Qexo の簡単な使用方法、solitude のいくつかの設定変更、そして私の経験について書く予定です。