前言#
- 博客基於 MIT License 開源於 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 刪掉，使用局部安裝
安裝以後，可以使用以下兩種方式執行 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 # 啟動本地伺服器。默認情況下，訪問網址為： 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 倉庫
- 如果需要刪除主題重新拉取，記得保留配置文件