目前市場(chǎng)上比較火的一些博客框架： Hexo、jekyll、Solo、Halo 、gohugo、VuePress、wordpress 等等 ，這些都是開源的靜態(tài)博客框架（沒有登錄注冊(cè)，后臺(tái)管理等等）。

完整部署流程

通過前期的環(huán)境Node、Hexo、Git和VScode的安裝部署，再通過CMD命令行進(jìn)行本地博客環(huán)境的部署，然后將本地博客代碼推送至碼云Gitee，即可搭建個(gè)人博客的框架。

安裝 Node.js 環(huán)境

Hexo 是基于Node.js 的博客框架，使用 Node.js 官方安裝程序時(shí)，請(qǐng)確保勾選 Add to PATH 選項(xiàng)（默認(rèn)已勾選）。

node下載地址：http://nodejs.cn/download/
確認(rèn)node.js安裝成功：運(yùn)行下面兩個(gè)命令打印版本號(hào)即可

node -v #查看node版本
npm -v  #查看npm版本

安裝 Node.js 淘寶鏡像加速器 （cnpm）

npm install -g cnpm --registry=https://registry.npm.taobao.org #安裝Node.js淘寶鏡像加速器
cnpm -v #查看cnpm版本，安裝成功則顯示版本號(hào)
# 修改 node 類庫(kù)默認(rèn)安裝位置
# 默認(rèn)是在 C:\Users\lingStudy\AppData\Roaming\npm
npm config set prefix "D:\nodejs安裝路徑\node_global"
npm config set cache "D:\nodejs安裝路徑\node_cache"
# 查看修改是否成功
npm root -g
# 然后把D:\install\node\node_global配置到環(huán)境變量的 PATH 下即可
123456789101112131415

安裝 Node.js 淘寶鏡像加速器 （cnpm）出錯(cuò)：

npm install -g cnpm --registry=https://registry.npm.taobao.org

錯(cuò)誤代碼：

C:\Users\X-STAR>npm install -g cnpm --registry=https://registry.npm.taobao.org
npm ERR! code EPERM
npm ERR! syscall rename
npm ERR! path C:\Users\X-STAR\AppData\Roaming\npm\node_modules\cnpm
npm ERR! dest C:\Users\X-STAR\AppData\Roaming\npm\node_modules\.cnpm-wxbqVbZB
npm ERR! errno -4048
...

解決方案一：

npm cache verify
#輸入后，npm會(huì)去校驗(yàn)一些緩存依賴的完整和有效性

解決方案二：

npm cache clean --force
#直接用命令清理就行

解決方案二：

打開users目錄下邊AppData\Roaming目錄找到npm文件夾和npm-cache文件夾，刪除這兩個(gè)文件夾里邊所有內(nèi)容，然后再去運(yùn)行npm install就可以了。

Hexo安裝

Hexo 官網(wǎng)： https://hexo.io/zh-cn/

npm install hexo-cli -g
# 查看hexo版本
hexo -v
hexo-cli: 4.2.0
...

Git安裝

Git官網(wǎng)下載：https://git-scm.com/download

git --version  #查看Git版本
git version 2.29.2.windows.2

VScode安裝

VScode官網(wǎng)https://code.visualstudio.com/

本地博客部署

hexo init blog #創(chuàng)建blog目錄
cd blog  #進(jìn)入blog目錄
npm install #blog目錄下安裝
hexo server #本地blog部署完成

Gitee碼云部署

Gitee官網(wǎng)https://gitee.com/

1、新建倉(cāng)庫(kù)，倉(cāng)庫(kù)名字和個(gè)人用戶名保持一致，避免出錯(cuò)。

圖一

2、選擇語言Html，不初始化，點(diǎn)擊創(chuàng)建，若全局設(shè)置沒有顯示個(gè)人郵箱，在設(shè)置郵箱選項(xiàng)選定綁定。

圖二

3、CMD輸入下列代碼，創(chuàng)建密鑰。輸入代碼后出現(xiàn)Enter passphrase（empty for no passphrase ）可不設(shè)置密碼回車即可。

git config --global user.name "huaweiyou"
git config --global user.email "XXXXX@163.com"
ssh keygen -t rsa -C "XXXXX@163.com"

4、個(gè)人文件下的C:\Users\X-STAR \ .ssh文件夾的文件id_rsa.pub用記事本格式打開并全選復(fù)制。

圖四

5、Gitee碼云中設(shè)置選項(xiàng)，SSH公鑰添加復(fù)制好的密鑰確定。

圖五

本地代碼推送Gitee碼云

1、CMD進(jìn)入本地部署的個(gè)人文件夾目錄下，將本地代碼推送到碼云。

cd blog  #進(jìn)入blog目錄
npm install hexo-deployer-git --save #安裝將推送本地代碼到碼云

圖六

圖七

3、進(jìn)入服務(wù)選項(xiàng)，點(diǎn)擊Gitee pages勾選強(qiáng)制使用HTTPS，啟動(dòng)。

圖八

4、啟動(dòng)后，系統(tǒng)自動(dòng)生成網(wǎng)址，點(diǎn)擊進(jìn)入顯示404，因本地博客的代碼未上傳至碼云，下一步上傳代碼至碼云。

圖九

5、個(gè)人文件夾目錄下的config.yml用VScode打開，按圖示要求輸入代碼，注意冒號(hào)后面的空格格式對(duì)齊。repo地址為Gitee地址。

repo: https://gitee.com/huaweiyouyu/huaweiyou.git
branch: master

圖十

圖十一

圖十二

6、第16行代碼改為個(gè)人博客網(wǎng)址鏈接https://huaweiyou.gitee.io/（個(gè)人地址即可，此處為教程測(cè)試地址），然后Language處修改zh-CN語言。

圖十三

7、CMD進(jìn)入本地部署的個(gè)人文件夾目錄下，輸入如下代碼，將本地代碼推送到碼云，然后進(jìn)入Gitee服務(wù)Gitee pages更新選項(xiàng)，即可訪問，至此一個(gè)博客的框架搭建好了，注意每次本地部署都需要在碼云上點(diǎn)擊更新。

cd blog  #進(jìn)入blog目錄
hexo cl #清理緩存
hexo g #生成網(wǎng)站文件
hexo s #本地測(cè)試代碼，Ctrl+c停止本地映射
hexo d #推送本地代碼到碼云，第一推送需要輸入碼云的賬號(hào)密碼

圖十四

本地文件更新

1、個(gè)人博客根目錄文件下的C:\Users\X-STAR\huaweiyouyu\source_posts存放博客的文章，新建txt文件，修改后綴格式為.md,用typroa軟件打開編輯，typora見新手教程http://www.itdecent.cn/p/2cb7fbb9ca3d。

圖十五

2、輸入代碼塊---，然后按格式輸入title和date，統(tǒng)一格式。

title: 文章標(biāo)題
date: 2020/11/10 11:20:28

3、CMD進(jìn)入本地部署的個(gè)人文件夾目錄下，將本地代碼推送到碼云。

cd blog  #進(jìn)入blog目錄
hexo cl && hexo g && hexo s #一鍵三聯(lián)輸入
#清理緩存
#生成網(wǎng)站文件
#本地測(cè)試代碼，Ctrl+c停止本地映射
hexo d #推送本地代碼到碼云