基于gitee+hexo搭建個人博客
由于國外的github page訪問總是非常慢的，本文選擇國內(nèi)開源代碼托管平臺碼云，因而可以在國內(nèi)搭建訪問與SEO檢索都優(yōu)于GitHub的個人網(wǎng)站。自己親手勉強搭起個人博客，首先感謝木千之博主的詳細教程，給了清晰的思路，寫下這篇博客將詳細過程記錄，希望幫助更多的人，減少搭建過程中的坑，也希望可以為其他選擇使用Gitee+Hexo搭建個人博客的親們提供幫助。
總體的思路
總體的思路是在本地利用Hexo框架搭建一個靜態(tài)網(wǎng)站，然后將項目推送到碼云上，通過配置Gitee Page，即可根據(jù)Gitee Page網(wǎng)址地址進行訪問，如果顯域名不好看可以在阿里云或者騰訊云上購買自定義域名（需要本案，過程還是挺麻煩的，自己買了也沒用）。Hexo官網(wǎng)地址（https://hexo.io/zh-cn/docs/），Gitee官網(wǎng)地址(https://gitee.com/)，阿里云購買域名。
一、環(huán)境配置
- 由于我們選擇在Windows10平臺上使用Gitee+Hexo來搭建個人博客，且網(wǎng)站/博客本質(zhì)上是一個資源目錄，其中包含了顯示的頁面文本與調(diào)用的樣式（CSS等）文件，因此我們需要首先在本地建立一個存儲個人網(wǎng)站的目錄，如命名為MyWeb。
- 接下來，我們就需要安裝兩個重要的環(huán)境，一個是提供版本克隆與下載追蹤的git，一個是由文本文件生成HTML文件的Hexo框架，注：如果有這兩個工具可以直接跳過。
node.js : 下載可以從其官方界面開始https://nodejs.org/zh-cn/
Gitee：下載則可以從其官方界面開始https://git-scm.com/
上述安裝下載后按照指示安裝即可，安裝成功在MyWeb中單擊空白右鍵，應(yīng)能彈出啟動Git Bash Here的選項。
二、Hexo的安裝與基本命令的使用
接下來我們可以安裝生成網(wǎng)站的關(guān)鍵——Hexo架構(gòu)了，其主要信息和安裝命令、主題等都可以從其官網(wǎng)輕松得到：https://hexo.io/zh-cn/
為了安裝Hexo，只需要在MyWeb目錄中單擊右鍵啟動Git Bash Here，然后輸入命令：
npm install hexo-cli -g
網(wǎng)上有很多其他的命令，建議一切以官網(wǎng)命令為依據(jù)，由于時間版本原因，很有可能未來的命令發(fā)生改變而失效。
然后等待幾分鐘（取決于你的網(wǎng)速），完成后需要首先進行初始化在本地生成Hexo相關(guān)目錄：
hexo init
然后就可以使用Hexo三連了，即我們最常用的三個主要命令（依舊在上述Git Bash命令端口中）：
hexo clean # 清空已有hexo網(wǎng)站文件
hexo generate(or g) # 依據(jù)網(wǎng)頁文本與新的CSS樣式生成新網(wǎng)站文件
hexo server(or s) # 啟動本地服務(wù)器，可以在localhost:4000查看網(wǎng)站修改效果
依次運行上述三個命令，就可以在瀏覽器打開localhost:4000端口，查看對應(yīng)網(wǎng)站界面效果，一般默認的是一個landscape主題，后期當提交新文章或者新的樣式修改時，往往都是先從本地查看結(jié)果無誤后再部署到Gitee Page
三、主題下載與安裝
Hexo官網(wǎng)上提供了豐富的主題可選，你只需要打開對應(yīng)的界面（https://hexo.io/themes/）選擇喜歡的，然后點擊名稱跳轉(zhuǎn)到GitHub倉庫選擇下載或者克隆對應(yīng)的zip文件到本地，并且解壓到網(wǎng)站目錄下的themes目錄即可。
下圖中則是我網(wǎng)站中的主題文件，請注意網(wǎng)站的路徑：
然后接下來，你需要修改兩個配置文件：
你的網(wǎng)站根目錄下的_config.yml文件，即網(wǎng)站配置文件；
你選擇的主題的自帶配置文件_config.yml，即主題配置文件； 網(wǎng)站配置文件會配置你網(wǎng)站的URL地址、博客名稱以及與Gitee上傳的方式等基本信息；而主題配置文件則會定義實際頁面顯示的美觀效果、多媒體（聲音視頻等）以及評論等附加功能。
四、網(wǎng)站配置文件修改
關(guān)于網(wǎng)站配置文件修改很簡單，但是并不容易，因為一不小心就會出現(xiàn)域名帶來的訪問錯誤，在開始修改網(wǎng)站配置文件前，我建議大家先去Gitee上注冊登錄新建一個倉庫用來保存你未來展示的個人博客頁面、樣式等資源，關(guān)于名稱，很多網(wǎng)上教程都說可以自定義，然后在配置文件中正確指定即可，然而這里自己遇到了第一個坑：
坑一：新建倉庫與Gitee不同名導(dǎo)致無法正確解析
網(wǎng)站配置文件采用文本樣式打開后，可以找到下面一段代碼：
url: http://mr-rangerover.gitee.io/ #填寫自己Gitee Page的網(wǎng)站地址
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks
上述說明中提到可以自定義名稱，只需要在root字段修改即可，然而這里有兩個容易出問題的地方：
-
你的URL并不是你所在倉庫的地址，而應(yīng)該是你啟動倉庫的Gitee Page服務(wù)后分配給你的網(wǎng)站靜態(tài)域名，以我個人為例，倉庫地址為：https://gitee.com/mr-rangerover/mr-rangerover.git（我新建的網(wǎng)站名稱與Gitee賬號同名），而網(wǎng)站URL應(yīng)為“服務(wù)–Gitee Page”啟動/更新后顯示的網(wǎng)站地址：http://mr-rangerover.gitee.io
-
你的網(wǎng)站目錄當然可以和賬戶不同名，但是那樣就需要按照文檔說明修改root字段，自己當初定義的名稱不同，結(jié)果導(dǎo)致域名莫名無法解析，總是無法正確訪問網(wǎng)頁，因此干脆像GitHub Page一樣強制要求使用賬號同名新建網(wǎng)站倉庫，這樣還獲得了以賬號名為特征的獨有域名，一舉兩得！
跳過了上面的坑，接下來需要制定網(wǎng)站采用的主題樣式，這里也需要注意：主題文件解壓縮后不要重命名，直接將主題文件名稱復(fù)制后設(shè)置為網(wǎng)站主題，即
#博客樣式
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
## theme: landscape
theme: hexo-theme-pure-master #填寫自己的樣式文件夾的名字
坑二：Git部署目錄不是倉庫地址
網(wǎng)站配置文件修改
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repository: git@gitee.com:mr-rangerover/mr-rangerover.git
branch: master
注意上面的repository地址并不是倉庫的地址，而是你下載/克隆項目時彈出的那個地址，如果使用git就選擇SSH
跳過了上面兩個坑，后面就比較簡單了，你需要仔細閱讀主題文件下的README.md文件以根據(jù)主題特點實現(xiàn)自定制網(wǎng)站。在此之前，你還需要在網(wǎng)站的Git Bash中運行一次安裝所有主題依賴插件包的命令：
npm install
npm install --save hexo-deployer-git #為之后做準備，不裝會報錯：ERROR Deployer not found: git
完成之后可以執(zhí)行三行命令將本地靜態(tài)資源push到碼云
hexo clean #清理
hexo g #生成靜態(tài)資源
hexo d #將本地資源提高到碼云
坑三、Gitee端的更新
其實這也算一個小坑吧，一般而言理解一旦運行了hexo deploy(or d)應(yīng)該就已經(jīng)將新的網(wǎng)站文件（主要是網(wǎng)站目錄下的public目錄）上傳到了Gitee，然而事實上上步之后直接訪問網(wǎng)站URL會發(fā)現(xiàn)頁面沒有改變，原因在于：你、沒有、更新！是的，對于免費Gitee用戶而言，你會需要手動更新一下Gitee Page，然后才可以將修改真的“部署”到可訪問的網(wǎng)站上。折騰了我好久
只需要再次點擊【更新】稍等片刻即可，完成部署后，點擊網(wǎng)站地址可以查看個人博客。如果遠程頁面和本地頁面有出入，可以點擊刷新 F5或者shift+F5
五、末尾
上述過程記錄了一般采用Gitee+Hexo搭建個人博客的過程，除了跳過幾個“坑”之外，還需要認真閱讀主題目錄下的README.md文件，以進一步修改頁面的索引、標簽、圖片風格等具體樣式。
好了，到此為止，你已經(jīng)有了一個初步的個人博客，剩下的是根據(jù)需要添加不同插件或者調(diào)整風格了。
祝愿大家都能有一個屬于自己的個人博客，感興趣的朋友可以隨時聯(lián)系我，也可以訪問我的個人網(wǎng)站 http://mr-rangerover.gitee.io
如果存在問題請同學(xué)給予指正，謝謝。
附屬技巧
一 、寵物插件
輸入命令利用npm安裝相關(guān)包
在MyWeb目錄中單擊右鍵啟動Git Bash Here，然后輸入命令：
npm install hexo-helper-live2d
npm install live2d-widget-model-hijiki
在MyWeb目錄下，配置_config.yml，找到deploy，添加以下代碼文章來源：http://www.zghlxwxcb.cn/news/detail-405311.html
#修改部署方式
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
#控制寵物樣式和狀態(tài)
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/ # 插件在站點上的根目錄(相對路徑)
pluginJsPath: lib/ # 腳本文件相對與插件根目錄路徑
pluginModelPath: assets/ # 模型文件相對與插件根目錄路徑
tagMode: false # 標簽?zāi)Ｊ? 是否僅替換 live2dtag標簽而非插入到所有頁面中
log: false
model:
use: live2d-widget-model-hijiki
display:
position: right
width: 150
height: 300
mobile:
show: true # 是否在移動設(shè)備上顯示
react:
opacity: 0.7
二、Markdown中的圖片上傳到gitee圖床
參考鏈接：https://blog.csdn.net/qq_42661919/article/details/122457892?spm=1001.2014.3001.5501文章來源地址http://www.zghlxwxcb.cn/news/detail-405311.html
到了這里，關(guān)于搭建個人博客詳細教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
