banner
克喵爱吃卤面

喵落阁

光就是一切的意义!
telegram
github
qq
email
x
bilibili

Hexo メモ#

私の設定#

  1. Hexo バージョン: hexo-cli: 4.3.2, hexo: 7.3.0 (現在最新)
  2. Node.js バージョン: 22.16.0
  3. Git バージョン: 2.47.0.windows.2
  4. PNPM バージョン: 10.12.4
  5. Windows バージョン: 11

Node.js のインストール#

  1. 公式サイト から LTS バージョンをインストールします。一般的に、コンピュータのメモリが十分であれば C ドライブに直接インストールできますが、もちろんパスを変更することも可能です。私は通常、正常にダウンロードしてパスを変更していますが、問題はありません。

  2. インストールが完了したら、成功したかどうかを確認します。キーボードで 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 のインストール#

  1. Git BASH で以下のコマンドを入力して Hexo をインストールします:
pnpm install -g hexo-cli
  1. インストールが完了したら、hexo -v を入力してインストールが成功したかどうかを確認します。

Github 設定#

上記の操作は前提条件です。次に Github の設定を行います。

Github の登録については言及しません。基本的なことなので、私のようなコード初心者でも理解できることですから。

リポジトリの作成#

  1. GitHub にログインし、右上の + ボタンをクリックして New repository を選択します。
  2. リポジトリ名を入力します。<username>.github.io 形式(例:yourusername.github.io)を使用することをお勧めします。これにより、個人のホームページとして直接使用できます。

ここでは、通常の hexo deploy コマンドを使用して GitHub Pages にデプロイすることは考えていません。なぜなら、記事が増えると生成時間が煩雑になるからです。ここでの推奨は、Github Actions を使用して自動デプロイすることです。

この部分のチュートリアルは 店長の文章 に基づいていますが、少し古くなっているため、いくつか変更を加えました(ここでの画像は 安知魚 からのものです):

  1. まず、ソースコードを置くプライベートリポジトリを作成します。以下を hexo-source と呼びます。
  2. 次に、Github のキーを生成します:

Github にアクセス -> アバター(右上) -> 設定 -> 開発者設定 -> パーソナルアクセストークン -> 新しいトークンを生成します。作成するトークン名は自由ですが、repo と workflows の項目にチェックを入れる必要があります。

リンク にアクセスして生成します。

image
image

[!NOTE]

!!! トークンはこの一度だけ表示され、その後は確認できなくなるため、必ずトークンを記録しておいてください。後で忘れた場合は、再生成して再設定するしかありません。

  1. hexo-source リポジトリの設定で、設定 -> アクション -> 一般 -> ワークフロー権限をクリックします。
    • Read and write permissions にチェックを入れ、Allow <span style="background:#FF0000;"></span>all actions and reusable workflows にもチェックを入れます。
  2. 設定 -> Secrets and variables -> Actions -> 新しいリポジトリシークレットを追加します。
  • GITHUBTOKEN:先ほど生成したトークンを置きます。

上述は前提条件です。次に Hexo をデプロイする必要がありますので、次のステップに進むことができます。#

Hexo の初期化#

  1. ローカルに新しいフォルダを作成します。例えば hexo-solitude です。
  2. ここでは vscode を使用してそのフォルダを開き、ターミナルで以下のコマンドを入力して Hexo を初期化します:
hexo init (プロジェクト名)

私は通常、何も入力せずにそのままフォルダ内で開始しますが、プロジェクト名を追加した場合は、次のステップは:

cd (プロジェクト名)
  1. 依存パッケージをインストールします:
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

ブログの他の変更は基本的にチュートリアルや他のブロガーのサイトからのものです。


プラグイン#

  1. 基本依存関係 hexo-renderer-pug
pnpm i hexo-renderer-pug

  1. 文字数カウント hexo-wordcount
pnpm i hexo-wordcount

設定を変更:

# --------------------------- start ---------------------------
# 文字数カウント
# 警告: まず hexo-wordcount プラグインをインストールしてください。
wordcount: false
# --------------------------- end ---------------------------

  1. 数学公式 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 ---------------------------

  1. 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');

  1. hexo-deploy-git Git にコミットするためのプラグイン
pnpm i hexo-deploy-git --save

  1. hexo-generator-feed Hexo の RSS プラグイン
pnpm i hexo-generator-feed --save

  1. 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)

  1. ブログのサイトマップ : 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

  1. 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

  1. 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               # デバッグモードを有効にする
  1. 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 を使用する場合には必須です。

image

作成が完了したら、ブログのソースコードをここにプッシュする必要があります。まず、リモートリポジトリのアドレスを取得します。ここでは SSH と HTTPS の両方が使用できます。SSH は SSH キーをバインドしたデバイス上ではパスワードを再入力する必要がありませんが、HTTPS ではパスワードを入力する必要があります。ただし、SSH は時々ポート占有の問題が発生することがありますので、自主的に選択してください。

image

[!TIP]

ここでプライベートリポジトリを選択する理由は、次の設定で Token を使用するためです。もし Token が盗まれた場合、他の人があなたの GitHub リポジトリの内容を自由に操作できるため、このリスクを避けるためにブログのソースコードを非公開にすることを選択しました。

Github Action の設定#

  1. [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

上記のコードは 店長 からの修正自用です。なぜ 安知魚 のコードを使用しないのか?

  1. まず、トークンをリポジトリのファイルに直接置くのはあまり良くないと思います。

  2. 私のようにローカルで作業している場合、リポジトリにプッシュできないため、ここでのトークンは直接アップロードできません。token: token: ${{ servets.GH_token }} に変更しようとしましたが、さまざまな問題が発生しました。逆に店長のコードを使用した後は、ほぼ問題なく、AI に問い合わせた結果、現在のコードが得られ、正式にアップロードできるようになりました(悪意はありません)。

  3. その後、リポジトリの設定 -> Secrets -> actions で環境変数を追加する必要があります。変数名はスクリプトに出てくるものを参考にして、順に追加します。

image

リモートリポジトリとブランチの再設定#

🍼 初めて git でブログソースを管理する 1. `[Blogroot]/themes/solitude/.git` を削除するか、別のフォルダに移動します。テーマフォルダ内の `.git` フォルダが存在すると、サブプロジェクトとして認識され、ソースコードリポジトリにアップロードできなくなります。
  1. ブログのルートディレクトリ [Blogroot] で以下のコマンドを実行します:
git init # 初期化
git remote add origin [email protected]:[GithubUsername]/[SourceRepo].git #[SourceRepo] はソースコードを保存する GitHub プライベートリポジトリ
git checkout -b master # master ブランチに切り替えます。
# 2020年10月以降、GitHub で新しいリポジトリを作成するとデフォルトのブランチが main に変更されるため、注意してください。
# そうでない場合、後のすべての設定ブランチを一致させる必要があります。
  1. 除外項目を追加します:
.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 に変更されるため、注意してください。
  1. この時、テーマフォルダが正常にアップロードされ、テーマフォルダ内の .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 テーマでない場合、最後の行を現在使用しているテーマに置き換えてください。

  1. ソースコードをプライベートリポジトリ [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 に変更されるため、注意してください。
  1. 直面する可能性のあるバグ
    solitude テーマフォルダ内の .git フォルダが存在すると、テーマフォルダがサブプロジェクトとして認識され、ソースコードリポジトリに正常にアップロードできなくなります。除外項目を追加しても正常にテーマフォルダをアップロードできない場合は、まずローカルソースの themes フォルダを別のディレクトリに移動します。次に、一度コミットします。その後、themes フォルダを戻し、再度コミットします。

Important

それでもうまくいかない場合は、solitude テーマフォルダ内の .git フォルダを削除し、再度コミット操作を繰り返してください。

穴を掘る#

大体ここまで書きましたが、将来的には 次の章 を掘るかもしれません。しかし、現在の一般的な内容はここまでです。今後は Qexo の簡単な使用方法、solitude のいくつかの設定変更、そして私の経験について書く予定です。

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。