Hexo｜ブログ構築ガイド

1. はじめに#

知らぬ間に、私のブログは風雨の中でしばらく運営されてきました。ブログ構築の過程を詳細に記録する必要があると感じています。そうしないと、うっかりブログを壊してしまうかもしれません…

2. 環境構築#

2.1 Node.js のインストール#

1. 公式サイトにアクセスし、対応するシステムを選択してダウンロード：
公式サイト：https://nodejs.org/en/download/

2. インストール
パスを選択し、インストールを完了します。
3. 確認
cmd または powershell を開き、次のコマンドを入力：

node -v
npm -v

バージョン番号が表示されれば、インストールは成功です。
{% note info simple %} npm は Node.js のパッケージ管理ツールです {% endnote %}

2.2 Git のインストール#

1. 公式サイトからダウンロード
公式サイト：https://git-scm.com/downloads

2. インストール
パスを選択し、インストールを完了します。

3.Git の環境変数を設定
マイコンピュータを右クリック --> プロパティを選択し、高度なシステム設定をクリック、最終的に環境変数に Git のパスを追加します。
Git パスの例

C:\Program Files (x86)\Git\bin

{% note danger simple %} 具体的なパスはあなたのシステムに基づいてください {% endnote %}

4. 確認
git bash または cmd を開き、次のコマンドを入力：

git --version

バージョン番号が表示されれば、インストールは成功です。

5.cmd で Git を使用
cmd で sh と入力すれば使用できます。

6.NPM のミラーソースを変更
公式の NPM ミラーソースは国内では速度が良くないため、淘宝のミラーに変更することをお勧めします。

npm config set registry https://registry.npmmirror.com

2.3 Github アカウントの登録#

1.Github 公式サイトhttps://github.com,でアカウントを登録します。
2. 新しいプロジェクトを作成
プロジェクト名はあなたのニックネーム.github.io、例えば：

// 私のニックネームはxlenco
だから私のプロジェクト名はxlenco.github.io

3. リポジトリの設定
作成後、'<>code' 内の SSH を保存します。すなわち：

[email protected]:XXXX/XXXX.github.io.git

あなたのリポジトリの右側にあるSettingsをクリックします。
下にスクロールしてGithub pagesを見つけ、Launch automatic page generatorをクリックします。Github が自動的にページを作成します。設定に問題がなければ、数分後にyourname.github.ioの URL に正常にアクセスできるようになります。

2.4 Hexo のインストール#

1. 適切な場所、例えば E:/hexo に hexo-cli をインストールします。次のコマンドを入力：

cd /e/hexo/
npm install hexo-cli -g

次に hexo をインストールします。

npm install hexo --save

インストールが完了したら、確認します。

hexo -v

2. フォルダを初期化します：

hexo init blog // hexoはblogというフォルダにインストールされます
cd blog
npm install

3.Hexo ページを生成します：

hexo generate

4. プレビューサービスを起動します：

hexo server

デフォルトは localhost:4000 です。ブラウザを開いて入力してください。

2.5 Github にプッシュ#

1. 個人情報を設定します。

git config --global user.name "XXXX"
git config --global user.email "[email protected]"

2. 鍵を生成します。

ssh-keygen -t rsa -C "[email protected]"

3.id_rsa.pub ファイルを表示し、全体をコピーします。

cat ~/.ssh/id_rsa.pub

4. 次にGithubにssh keyを追加します！
5.hexo のルートディレクトリにある_config.ymlファイルの deploy を変更し、以前に保存した ssh を追加します：

deploy:
   - type: git
     repo: [email protected]:xlenco/xlenco.github.io.git
     branch: main

6.Github にアップロードします：

hexo d -g

もし hexo-deployer-git がなければ、インストールします。

npm install hexo-deployer-git --save

3. Hexo 関連#

1. 新しい記事を作成します。
hexo new post 私の最初の記事
2.hexo が自動的に md ファイルを生成し、md の内容を変更します。
ヘッダーは次のようになります：

---
title: postName # 記事ページに表示される名前
date: 2022-08-28 12:30:16 # 記事生成時間、通常は変更しませんが、もちろん任意に変更できます
categories: デフォルトカテゴリ #カテゴリ
tags: [tag1,tag2,tag3] # 記事タグ、空でも可、複数のタグはフォーマットを使用し、コロン:の後にスペースがあることに注意
description: 概要
---

3. ヘッダーの下に記事内容を書きます。
{% note info simple %} markdown は、html とその独自の構文をサポートしています。Markdown は、通常のテキストエディタで記述できるマークアップ言語であり、簡単なマークアップ構文を使用することで、通常のテキスト内容に一定のフォーマットを持たせることができます。{% endnote %}

3.2 ページの新規作成#

hexo new page "update"
source フォルダ内に update フォルダが生成され、その中の index.md がページの内容です。

3.3 よく使う基本コマンド#

hexo new "記事"
hexo new post "記事"
hexo new page "ページ"

hexo cl # キャッシュをクリア
hexo clean # キャッシュをクリア、再デプロイ時に実行することをお勧めします
hexo g # 静的ページを生成
hexo generate # 静的ページを生成
hexo s # ローカルポートでプレビュー デフォルトは4000で実行
hexo server # ローカルポートでプレビュー
hexo s -p 5000 # ポート5000
hexo d # デプロイ
hexo deploy # デプロイ

毎回のプッシュを便利にするために、次の内容を入力できます。

hexo cl && hexo g && hexo d

4. Hexo の進化#

4.1 おすすめのエディタ#

今後の記事作成やカスタマイズに便利です。
VSCode https://code.visualstudio.com/
Typora https://www.typora.io/
Qexo https://github.com/Qexo/Qexo
Wexagonal https://wexa.top/

4.2 テーマの変更#

1. デフォルトのテーマはあまり見栄えが良くないため、テーマを変更することができます。一般的なテーマはたくさんあります。例えば butterfly、next など...

cd /e/hexo/blog
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

2.hexo のルートディレクトリにある_config.yml の theme: landscape を theme： butterfly に変更します（コロン：の後にスペースがあることに注意）。