hexoでブログを構築する

環境構築#

centos7

npm のインストール#

curl -sL https://rpm.nodesource.com/setup_16.x | sudo bash -
sudo yum install nodejs
node --version
npm --version

git のインストール#

yum -y install git

hexo コマンドラインのインストール#

npm install hexo-cli -g

GitHub にブログをデプロイする#

リポジトリを作成（名前の形式に注意、例：1273732363.github.io）
設定ファイル_config.yml

deploy:
  type: 'git'
  repo: 'https://github.com/1273732363/1273732363.github.io.git'
  branch: main

プラグインをダウンロード

npm install hexo-deployer-git --save

キャッシュをクリアし、静的ファイルを生成し、GitHub にデプロイ

hexo clean
hexo g
hexo d

初回のデプロイでは GitHub アカウントにログインする必要があります

デプロイ成功

ユーザー名は同じでなければなりません

actionsに pages が立ち上がっているか確認

vercel カスタムドメインで gitpages へのアクセスを高速化#

アカウントを登録し、GitHub にリンクする
プロジェクトを追加

gitpages のプロジェクトをインポート

指示されたレコード値に基づいて cname を設定、== ホストレコードをカスタマイズ ==

hexo 設定ファイルの url を変更

内容を変更した後に GitHub にアップロード#

package.jsonを変更

デプロイを実行してデバッグ

問題が発生した場合#

ネットワークの問題で、数回デプロイすれば大丈夫です

サーバーにデプロイする#

一、宝塔のインストール#

サイトを追加し、SSL を設定

二、Git リポジトリの構築#

以前は hexo の静的ファイルを GitHub のリポジトリにプッシュしていましたが、今度はサーバーでも同様にリポジトリが必要です。

1. git ユーザーを追加#

サーバー側で

adduser git   # gitユーザーを追加

chmod 740 /etc/sudoers  # sudoersファイルの権限をファイル所有者が書き込み可能に変更

vim /etc/sudoers

# root ALL=(ALL) ALLの下に一行追加

git ALL=(ALL) ALL

chmod 400 /etc/sudoers  # 権限をファイル所有者が読み取り可能に変更

2. git ユーザーに ssh キーを追加#

このステップは、ホストとサーバーの接続を確立し、パスワードなしでログインできるようにするためのものです。

# ホスト側でpowershellを開き、cdをC:\Users\admin\.sshに移動して鍵を生成します。既に鍵がある場合はこのステップをスキップできます。

ssh-keygen -t rsa -C "taitres.cc"

# -tは鍵の種類を指定します。デフォルトはrsaで、省略可能です。

# -Cはこの鍵のコメントを識別するために使用します。任意の内容を入力できます。

# -fは鍵ファイルの保存ファイル名を指定します。デフォルトはid_rsaです。

# サーバー側で

su git  # gitユーザーに切り替え

mkdir -p ~/.ssh

touch ~/.ssh/authorized_keys # authorized_keysファイルを作成

chmod 600 ~/.ssh/authorized_keys  # authorized_keysファイルにファイル所有者が読み書き可能な権限を付与

chmod 700 ~/.ssh  # .sshフォルダにファイル所有者が読み書き実行可能な権限を付与

公鍵 id_rsa.pub の内容をサーバーの /home/git/.ssh/authorized_keys にコピーし、ターミナルを閉じて、ssh git@serverで再度サーバーにログインし、git ユーザーにパスワードなしでログインできるかテストします。Permission denied の問題が発生した場合は、記事の末尾の解決策を試してください。

3. Git リポジトリを作成#

sudo mkdir /home/git/repos    # 新しいディレクトリを作成します。これはgitリポジトリの位置です。

cd /home/git/repos

sudo git init --bare taiblog.git # taiblogという名前のリポジトリを初期化します。

4. フックを設定して自動デプロイを実現#

/home/git/repos/taiblog.git/hooks/post-update.sampleを見つけて名前をpost-updateに変更し、内容を以下のように変更します。

sudo vim post-update

#!/bin/sh

git --work-tree=/www/wwwroot/taitres.cc --git-dir=/home/git/repos/taiblog.git checkout -f

#!/bin/sh

git --work-tree=/www/wwwroot/blog.burnchi.site --git-dir=/home/git/repos/taiblog.git checkout -f

その後、権限を付与します。

cd taiblog.git/hooks/

sudo chmod +x post-update  # 実行権限を付与

sudo chown -R git:git /home/git/repos/ # リポジトリの所有者をgitに変更

sudo chown -R git:git /www/wwwroot/blog.burnchi.site/ # サイトフォルダの所有者をgitに変更

5. Git リポジトリが使用可能かテスト#

# ホスト側で、リポジトリをクローンできれば、Gitリポジトリの構築が成功したことを示します。
git clone git@154.31.162.142:/home/git/repos/taiblog.git

三、ローカル設定とテスト#

1. ローカル設定#

ローカル Hexo ブログフォルダ内の\_config.ymlファイルを変更します。

deploy:

  type: git

  repo: git@server:/home/git/repos/taiblog.git

  branch: master

2. テスト#

hexo clean  # キャッシュをクリア

hexo generate # 静的ページを生成

hexo deploy  # ローカル静的ページディレクトリをクラウドサーバーにデプロイ

デプロイできない理由#

_config の branch が間違っている場合、master と main に注意してください。

webp の設定#

libaom-devel をダウンロード

yum install libaom-devel

バイナリ webp-server-linux-amd64 をダウンロード

Releases

opt 下に webps ディレクトリを作成

chmod +x webp-server-linux-amd64
mkdir -p /opt/webps
mv webp-server-linux-amd64 /opt/webps/webp-server
cd /opt/webps
./webp-server -dump-config > config.json

設定ファイルを変更

vim config.json

設定の説明

私の設定

{
  "HOST": "127.0.0.1",
  "PORT": "3333",
  "QUALITY": "80",
  "IMG_PATH": "/www/wwwroot/blog.burnchi.site",
  "EXHAUST_PATH": "/var/cache/webp",
  "ALLOWED_TYPES": ["jpg","png","jpeg","bmp"],
  "ENABLE_AVIF": false
}

webp サービスを開始

./webp-server -dump-systemd > /lib/systemd/system/webp-server.service
systemctl daemon-reload
systemctl enable webp-server.service
systemctl start webp-server.service

nginx 仮想ホスト設定を変更

pwd 
/www/server/panel/vhost/nginx  （nginx設定ファイルのパスを変更）

vim /www/server/panel/vhost/nginx/blog.burnchi.site.conf

以下のように変更

。。。
#    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
#    {
#        expires      30d;
#        error_log /dev/null;
#        access_log /dev/null;
#    }

。。。
location ~* \.(?:jpg|jpeg|gif|png)$ {
    proxy_pass http://127.0.0.1:3333;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_hide_header X-Powered-By;
    proxy_set_header HOST $http_host;
    add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
}

。。。

効果がない場合は、画像の拡張子が正しくない可能性があります。

jpg から png に変更すると webp に変換できました。

画像ホスティングの設定#

== 新しいリポジトリを作成 ==

== トークンの取得 ==

GitHub のアイコンをクリック

左側の開発者ツール

personal access tokens でトークンを生成

== カスタムドメイン ==

GitHub リポジトリリソースへのアクセスを加速する無料 CDN

https://www.jsdelivr.com/?docs=gh 無料 CDN

https://cdn.jsdelivr.net/gh/user/repo@version/file
https://cdn.jsdelivr.net/gh/ユーザー名/リポジトリ名

==picgo の設定 ==

画像をアップロード

適当にスクリーンショットを撮り、その後

== アップロードできない問題 ==

プロキシを設定（魔法が必要）

以前にアップロードした可能性があるため、md ファイル内の画像の url を直接変更すれば効果があります。

GitHub リポジトリにその画像があるか確認してください。

余談モジュール#

docker run -d --name memos -p 5230:5230 -v ~/.memos/:/var/opt/memos neosmemo/memos:latest

新しいサイトを作成

リバースプロキシを設定

デプロイコマンドのショートカット#

ターミナル

npm run dd

バックアップ#

git status  ローカルファイルの状態を確認
git commit -a -m "テーマがほぼ完成しました"     （-aはaddを意味します）
git remote -v リモートリポジトリを確認（なければ以下を追加）
git remote add origin https://github.com/burnchi/blog.git  （blogは新しいリポジトリで、一度だけ実行すればよく、以降は不要です。originはリポジトリのエイリアスです）
git push -u origin main  リモートリポジトリにプッシュ

復元#

git clone ...blog.git
cd hexo
npm install
hexo s

ブログを美化する（butterfly）#

タグページ#

あなたのHexoブログのルートディレクトリに移動します。
hexo new page tagsと入力します。
source/tags/index.mdというファイルが見つかります。
このファイルを変更します：
type: "tags"を追加することを忘れないでください。

パラメータ説明
type 【必須】ページタイプ、tags でなければなりません。
orderby 【オプション】ソート方法：random/name/length
order 【オプション】ソート順序：1、asc は昇順；-1、desc は降順

カテゴリページ#

あなたのHexoブログのルートディレクトリに移動します。

hexo new page categoriesと入力します。

source/categories/index.mdというファイルが見つかります。

このファイルを変更します：

type: "categories"を追加することを忘れないでください。

---
title: カテゴリ
date: 2018-01-05 00:00:00
type: "categories"
---

ナビゲーションバー#

テーマ設定ファイルを変更します。

Home: / || fas fa-home
Archives: /archives/ || fas fa-archive
Tags: /tags/ || fas fa-tags
Categories: /categories/ || fas fa-folder-open
List||fas fa-list:
  Music: /music/ || fas fa-music
  Movie: /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart

メニュー画像#

各 md ファイルに top_img 属性を追加する必要があります。

記事設定#

記事の説明#

書き方説明
title 【必須】記事タイトル
date 【必須】記事作成日
updated 【オプション】記事更新日
tags 【オプション】記事タグ
categories 【オプション】記事カテゴリ
keywords 【オプション】記事キーワード
description 【オプション】記事説明
top_img 【オプション】記事上部画像
cover 【オプション】記事サムネイル（top_img が設定されていない場合、記事ページの上部にサムネイルが表示されます。false / 画像の URL / 空白に設定できます）
comments 【オプション】記事コメントモジュールを表示（デフォルトは true）
toc 【オプション】記事 TOC を表示（デフォルトは設定中 toc の enable 設定）
toc_number 【オプション】toc_number を表示（デフォルトは設定中 toc の number 設定）
toc_style_simple 【オプション】toc の簡潔モードを表示
copyright 【オプション】記事著作権モジュールを表示（デフォルトは設定中 post_copyright の enable 設定）
copyright_author 【オプション】記事著作権モジュールの著者
copyright_author_href 【オプション】記事著作権モジュールの著者リンク
copyright_url 【オプション】記事著作権モジュールのリンク
copyright_info 【オプション】記事著作権モジュールの著作権声明文
mathjax 【オプション】mathjax を表示（mathjax の per_page: false が設定されている場合にのみ必要で、デフォルトは false）
katex 【オプション】katex を表示（katex の per_page: false が設定されている場合にのみ必要で、デフォルトは false）
aplayer 【オプション】必要なページに aplayer の js と css を読み込む。音楽設定を参照してください。
highlight_shrink 【オプション】コードボックスが展開されるかどうかを設定（true/false）（デフォルトは設定中 highlight_shrink の設定）
aside 【オプション】サイドバーを表示（デフォルトは true）

記事のカバー#

テーマ設定ファイル

md ファイルに cover: を追加します。

記事の固定#

属性 sticky:1 を追加します。

記事の転載#

記事の投げ銭#

# Sponsor/reward
reward:
  enable: true
  QR_code:
     - img: /img/wechat.png
       link:
       text: 微信
     - img: /img/ali.png
       link:
       text: 支付宝

記事の目次#

単独で目次番号を設定しない

md に属性 number: false を追加します。

インタラクションを追加#

https://butterfly.js.org/posts/4aa8abbe/#tag-hide

バージョン管理#

バックアップのセクションを参照してください。

サイドバー#

テーマ設定

aside:
  enable: true
  hide: false
  button: true
  mobile: true # モバイルで表示
  position: right # 左または右
  display:
    archive: true
    tag: true
    category: true
    ...

ブログ作成日時#

runtimeshow:
  enable: true
  publish_date: 2023/4/7 17:26:00

記事を書く#

source/_postsの下に新しいフォルダを作成（カテゴリとして扱う）

記事を書くときは、まずカテゴリテンプレートを新規作成します（主に categories 属性を変更）。

内容は以下の通りです。

---
title: {{ title }}
date: {{ date }}
tags:
categories: web安全
cover: /img/1.jpg
---

その後、新しい記事を作成します。

テンプレート：hexo new <layout> <記事タイトル> -p <保存するディレクトリ名>/<ファイル名> 
例：hexo new webanquan ssrf -p web安全/ssrf 
hexo new pages -p web安全/ssrf

保存するディレクトリは自動的に新規作成されます

テンプレートはカテゴリテンプレートを使用し、カバー記事のカバーを変更するだけで、タグはお好みで設定してください。