ブログの構築記録

前書き#

ブログは MIT ライセンスに基づいて GitHub でオープンソースされています、感謝
ブログエンジンはhexoから来ています、感謝
ブログテンプレートはSiricee の Chicから来ています、感謝
動的背景はcanvas-colorful-nest.jsから来ています、感謝
書籍リストページはプラグインhexo-doubanから来ています、感謝
CDN 加速サービスはCloudflareから来ています、感謝
デプロイサービスはvercelを使用しています、感謝
ローカル環境は MacOS に基づいています

Node 環境準備#

NVMを使用してnodeのバージョンを管理することをお勧めします、リポジトリアドレス:nvm
インストール後、ターミナルを開いてnode -vとnpm -vを実行し、エラーが表示されなければインストール成功です

hexo ローカル環境初期化#

まず、hexo-cli をインストールします npm install -g hexo-cli
上記のコードはグローバルインストールです。npm に慣れている場合は、-g を削除してローカルインストールを使用できます

インストール後、以下の 2 つの方法で hexo を実行できます：npm hexo <command>
または Hexo を環境変数に追加して直接hexo <command>を使用できます

まず、コマンドラインで npm root -g を入力してグローバルインストールのディレクトリを確認します
次に、そのディレクトリ内のnode_modules\hexo-cli\binディレクトリを環境変数 PATH に追加します
その後、hexo versionを使用して成功を確認します

ローカルサイト構築#

以下のコマンドを実行すると、<folder>ディレクトリが自動的に作成され、コードがダウンロードされます。ディレクトリを blog と仮定します

hexo init <folder>
cd <folder>
npm i

実行後の指定ファイルフォルダ構造：

blog
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

config.yml：ウェブサイトの設定情報です。ここでほとんどのパラメータを設定できます。テーマを使用する場合は、テーマに従って修正してください
package.json：アプリケーションの情報、hexoおよびそのいくつかのプラグインのインストールバージョン情報がここにあります
scaffolds：テンプレートフォルダです。新しい記事を作成するとき、Hexoはscaffoldに基づいてファイルを作成し、いくつかのテンプレート内容を埋め込みます
source：リソースフォルダはユーザーリソースを保存する場所です。_postsフォルダを除き、先頭に_（アンダースコア）が付いたファイル / フォルダと隠しファイルは無視されます
themes：テーマフォルダです。Hexo はテーマに基づいて静的ページを生成します

最後に実行します

hexo clean	# キャッシュファイル (db.json) と生成された静的ファイル (public) を削除します。初めてのサイト構築では実行しなくても構いません
hexo generate # 静的ファイルを生成します。
hexo server # ローカルサーバーを起動します。デフォルトでは、アクセスURLは：http://localhost:4000/です。

vercel デプロイ#

GitHubで新しいリポジトリを作成し、ローカルブログディレクトリファイルをリポジトリに同期します

git init
git add .
git commit -m "init commit"
git remote add origin [email protected]:xxx/blog.git
git push -u origin main

vercelアカウントを登録します https://vercel.com/
vercelで自分のリポジトリをインポートし、指示に従ってdepolyデプロイします

問題#

node バージョンの問題#

デプロイ時にエラーが発生します:

TypeError [ERR_INVALID_ARG_TYPE]: The "mode" argument must be of type number. Received an instance of Object
.....

vercelではデフォルトのnodeバージョンが高いため、現在のhexo環境との互換性に注意が必要です Node.js バージョン制限

Node のアップグレード#

以前はnvmを使用していたので、比較的簡単です、

nvm ls-remote
nvm install --lts     # 最新のltsバージョンをインストールします、比較的推奨されます
nvm ls                # 現在インストールされているバージョンを確認します
nvm uninstall v8.12.0 # 古いバージョンを見つけて削除します

Hexo のアップグレード#

グローバルにhexo-cliをアップグレードします
npm-checkを使用して、システム内のプラグインがアップグレードされているか確認します。
npm-upgradeを使用して、システム内の関連プラグインをアップグレードします。
npm update -gを使用して npm 自体のアップグレードを確認します。

npm install -g hexo-cli
hexo version

npm install -g npm-check
npm-check

npm install -g npm-upgrade
npm-upgrade

npm update -g
npm install -g npm

hexo clean # hexoデータをクリアし、ページを再生成してデプロイします
hexo g -s
hexo d

vercel バージョンデプロイ成功後、ページが空白#

設定したテーマが有効か確認します
テーマファイル、つまり theme ディレクトリ内のテーマ設定ファイルが GitHub リポジトリにアップロードされているか確認します
テーマを削除して再取得する必要がある場合は、設定ファイルを保持することを忘れないでください