中国語公式サイト：hexo
hexo のインストール#
前提条件：
# ソースを切り替え、以降cnpmでパッケージをインストールする際に使用できます
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install hexo-cil -g
hexo init blog # 現在のディレクトリにblogディレクトリを作成します
cd blog
cnpm install
hexo server # 短縮形は hexo s
ブラウザにlocalhost:4000と入力すると、ブログが開発モードで正常に動作しているのが確認できます。
hexo の設定#
ルートディレクトリの_.config.ymファイルに、以下の内容を設定します：
# サイト
title: 菜小牛のBlog # サイトタイトル
subtitle: 真のマスターは常に徒弟の心を持っている # サイトサブタイトル
description: 菜小牛のブログ # サイトの説明、主にSEOに使用
keywords: 菜小牛 Cirry # サイトのキーワード。複数のキーワードをサポート
author: Cirry # あなたの名前
language: ja-JP # 日本語に設定
timezone: 'Asia/Tokyo' # 国内のタイムゾーンに変更
# URL
## ここにサイトのURLを設定します。例えば、GitHub Pagesを使用する場合は、urlを 'https://username.github.io/project' に設定します
url: http://cirry.cn # あなたのブログのアドレスに変更
...
highlight: # コードハイライトを有効にする
enable: true
line_number: true
auto_detect: true
...
mathjax: true # これを追加して、数式サポートを有効にします。対応する記事でもmathjaxサポートを有効にする必要があります
他のパラメータは変更する必要はなく、保存後にhexo serverを再実行する必要があります（もちろんnpm run serverを使用してアプリを再起動することもできます）。ページをリフレッシュして最新の効果を確認できます。
基本コマンド#
| コマンド | 使用方法 | コマンド参考 | 説明 |
|---|---|---|---|
| init | hexo init [folder] | hexo init blog | ブログプロジェクトを初期化します。作成時にのみ使用します。 |
| new | hexo new [layout] <title> | hexo new post "hello" | 新しいブログ記事を作成します。source/_posts ディレクトリに hello.md という名前のファイルを新規作成します。 |
| generate | hexo generate | hexo g | 静的ファイルを生成します。 |
| publish | hexo publish [layout] <filename> | hexo publish post "hello" | 草稿を公開します。 |
| deploy | hexo deploy | hexo deploy | サイトをデプロイします。 |
| render | hexo render <file1> [file2] ... | ファイルをレンダリングします。 | |
| migrate | hexo migrate <type> | 他のブログシステムから コンテンツを移行 | |
| clean | hexo clean | hexo clean | キャッシュファイル (db.json) と生成された静的ファイル (public) を削除します。 |
| list | hexo list <type> | サイトの資料をリストします。 | |
| version | hexo version | hexo version | Hexo のバージョンを表示します。 |
| hexo --draft | source/_draftsフォルダ内の草稿記事を表示します。 |
よく使うコマンドの例：
hexo new post --path hexo/hexo.md "hexo" # source/_posts/hexo/フォルダ内にhexo.md文書を作成し、タイトルは"hexo"
hexo new page test # source/testフォルダ内にindex.md文書を作成します
hexo new draft "草稿" # source/_draftsフォルダ内に草稿.mdを作成します。draftフォルダ内のファイルはページにレンダリングされません。
hexo new publish "草稿" # 草稿を_postsフォルダ内に公開し、publish後はページにレンダリングされます。
git でブログ記事を管理する#
まず、github、gitee、または自分で構築した git リポジトリに git リポジトリを作成します。
リポジトリ作成後に表示されるコマンドに従ってコードをコミットします。
git init
git add .
git commit -m "最初のコミット"
git remote add origin [url] # あなたのリポジトリのurlアドレスに置き換えます
git push -u origin master
git 基本コマンド#
| コマンド | 説明 |
|---|---|
| git pull | コードを更新します。 |
| git add . | コードをキャッシュに追加します。 |
| git commit -m "記事更新" | 説明を追加します。 |
| git push -u origin master | コードをリポジトリにコミットします。 |
上記のコマンドの順序に従って、ブログリポジトリを正常にコミットおよび更新できます。
Maupassant テーマのインストール#
ここでは、デモ用に良いテーマMaupassantを見つけました。
git clone https://github.com/tufu9441/maupassant-hexo.git # 適切な場所にテーマコードをダウンロードします
管理を容易にするために、ダウンロードしたファイルの_config.ymlを_config.maupassant.ymlに名前を変更し、ブログのルートディレクトリに置きます。以降はここでテーマを設定できます。なぜこのように操作するかは公式サイトの代替テーマ設定ファイルの使用を参照してください。
ダウンロードしたファイルのlanguages、layout、sourceをブログのthemes/maupassantに移動します。該当するフォルダがない場合は作成します。
次に、テーマに必要な npm パッケージをインストールします：
cnpm install hexo-renderer-pug --save
cnpm install hexo-renderer-sass-next --save
テーマの設定#
_config.maupassant.ymlファイルで対応する属性を見つけます。
menu:
- page: home
directory: .
icon: fa-home
- page: archive
directory: archives/
icon: fa-archive
- page: about
directory: about/
icon: fa-user
- page: history
directory: timeline/
- page: guestbook
directory: guestbook/
icon: fa-comments
設定が完了したらプロジェクトを再起動し、プロジェクトに「私について」と「ゲストブック」ページがないことを確認します。以下のコマンドを使用して作成できます：
hexo new page guestbook # ゲストブックページを作成します
hexo new page about # 私についてページを作成します
hexo new page history # タイムラインページを作成します
注意：タイムラインページの内容は_config.maupassant.ymlのtimeline属性に記入します。また、タイムラインページのfront-matterは以下のようにする必要があります：
---
title: タイムライン
date: 2022-08-28 13:02:01
layout: timeline
comments: false
---
サイトアイコンの設定#
サイトの Favicon を設定するには、favicon.icoを Hexo のルートディレクトリのsourceフォルダに置きます。推奨サイズは 32px*32px です。
サイトに Apple デバイスアイコンを追加するには、apple-touch-icon.pngという名前の画像を同じ場所に置きます。推奨サイズは 114px*114px です。
このサイトでアイコンスタイルを確認できますfavicon-checkerが各ブラウザに適しているかどうかを確認します。
記事テンプレートの設定#
記事を作成するコマンドはhexo new post "hello"であることはすでに知っていますが、postというパラメータをどのように理解すればよいのでしょうか？
公式サイトでは、これを layout（レイアウト）として説明していますが、デフォルトでは_.config.ymlのdefault_layoutを代わりに使用します。私はこれを記事テンプレートとして理解する方が好きです。コマンドを使用して作成した記事の中には、すでにいくつかの内容が含まれていますが、この内容はどこから来るのでしょうか？
プロジェクトのルートディレクトリにあるscaffoldsフォルダを開くと、すでに 3 つのデフォルトファイル：draft.md、post.md、page.mdがあることがわかります。post.mdの内容をよく見ると、私たちが作成したhello.mdの内容と実際には同じです。
したがって、このフォルダには記事テンプレートが含まれており、記事のタグ、カテゴリ、toc などの共通内容をカスタマイズするために使用できます。今後作成する記事にはこれらの内容が自動的に含まれます。post.mdを以下のように変更します：
title: {{ title }}
date: {{ date }}
tags:
category:
- []
mathjax: true
toc: true
注意：category は配列を使用でき、tags は直接タグを記入できます。例えば：tags: hexo blog、カスタムリンクアドレス permalink は/で終わる必要があります。例えば：permalink: /hexo/install/1/。
記事の要約#
ホームページにはデフォルトで記事の要約が表示され、全文は表示されません。記事のfront-matterにdescription:を記入して表示したい要約を設定するか、記事の内容に<!--more-->を挿入して後の内容を隠すことができます。どちらも設定されていない場合、記事の最初の段落が自動的に要約として切り取られます。
hexo new post helloを使用して、新しい hello.md 文書を作成し、内容は以下のようになります：
hello.md
---
title: hello
date: 2022-08-18 18:44:43
tags: hexo
toc: true
description: 現実について
mathjax: true
---
# こんにちは
またその言葉が出てきました。「重い」。未来の物事はなぜこんなに重いのでしょうか？地球の重力に問題があるのでしょうか？
## 世界
知識は金よりも価値があるかもしれませんし、短剣よりも致命的かもしれません。
$$ f(x)=sin(x) + 12 $$
備考：title は記事のタイトル、toc は記事目次を有効にし、description は記事の要約内容、mathjax は数式サポートを有効にします。
保存して実行すると、記事が正常に表示され、スムーズに執筆できるようになります。
デプロイ#
デプロイのこの部分では、以前に準備したサーバーを使用する必要があります。nginx や caddy などの他のリバースプロキシ web サービスがすでにインストールされている必要があります。面倒だと感じる場合は、直接github pagesを使用してブログをデプロイすることもできます。具体的には# Hexo を GitHub Pages にデプロイするを参照してください。
hexo のデプロイ方法は多くありますが、今回は比較的簡単なデプロイ方法SFTPを選択します。今後、もっと多くの人が必要とする場合は、drone 自動デプロイなどの他のデプロイ方法についても書くことができます。
ssh ツールを使用してサーバーに接続した後、まずユーザーと対応するブログディレクトリを作成します。
$ useradd -m -s /bin/bash hexo # ユーザーを作成します
$ passwd hexo # パスワードを設定します
# ログアウトし、hexoユーザーで再ログインします
$ cd ~
$ mkdir blog # blogディレクトリを作成し、デプロイファイルの場所を置きます
まず、このプラグインをインストールする必要があります：
npm install hexo-deployer-sftp --save
次に、ルートディレクトリの_config.ymlの末尾に以下の設定を追加します：
deploy:
type: sftp
host: 159.75.81.123
user: hexo
pass: 123456
remotePath: /home/hexo/blog
port: 22
hexo g -dコマンドを使用して、ブログをサーバーに自動デプロイします。
私が使用している caddy で web のリバースプロキシを行い、caddy 設定ファイルCaddyfileを変更し、caddy を再起動すると、正しくウェブページが開けます：
cirry.cn{
root * /home/hexo/blog
file_server
}
これで、ブログの基本設定とデプロイ機能が完了しました。次の章ではテーマの設定について説明します。