基于gitee+hexo搭建個(gè)人博客

由于國(guó)外的github page訪問總是非常慢的，本文選擇國(guó)內(nèi)開源代碼托管平臺(tái)碼云，因而可以在國(guó)內(nèi)搭建訪問與SEO檢索都優(yōu)于GitHub的個(gè)人網(wǎng)站。自己親手勉強(qiáng)搭起個(gè)人博客，首先感謝木千之博主的詳細(xì)教程，給了清晰的思路，寫下這篇博客將詳細(xì)過程記錄，希望幫助更多的人，減少搭建過程中的坑，也希望可以為其他選擇使用Gitee+Hexo搭建個(gè)人博客的親們提供幫助。

總體的思路

總體的思路是在本地利用Hexo框架搭建一個(gè)靜態(tài)網(wǎng)站，然后將項(xiàng)目推送到碼云上，通過配置Gitee Page，即可根據(jù)Gitee Page網(wǎng)址地址進(jìn)行訪問，如果顯域名不好看可以在阿里云或者騰訊云上購買自定義域名（需要本案，過程還是挺麻煩的，自己買了也沒用）。Hexo官網(wǎng)地址（https://hexo.io/zh-cn/docs/），Gitee官網(wǎng)地址(https://gitee.com/)，阿里云購買域名。

一、環(huán)境配置

由于我們選擇在Windows10平臺(tái)上使用Gitee+Hexo來搭建個(gè)人博客，且網(wǎng)站/博客本質(zhì)上是一個(gè)資源目錄，其中包含了顯示的頁面文本與調(diào)用的樣式（CSS等）文件，因此我們需要首先在本地建立一個(gè)存儲(chǔ)個(gè)人網(wǎng)站的目錄，如命名為MyWeb。

接下來，我們就需要安裝兩個(gè)重要的環(huán)境，一個(gè)是提供版本克隆與下載追蹤的git，一個(gè)是由文本文件生成HTML文件的Hexo框架，注：如果有這兩個(gè)工具可以直接跳過。

node.js : 下載可以從其官方界面開始https://nodejs.org/zh-cn/
Gitee：下載則可以從其官方界面開始https://git-scm.com/

上述安裝下載后按照指示安裝即可，安裝成功在MyWeb中單擊空白右鍵，應(yīng)能彈出啟動(dòng)Git Bash Here的選項(xiàng)。

二、Hexo的安裝與基本命令的使用

接下來我們可以安裝生成網(wǎng)站的關(guān)鍵——Hexo架構(gòu)了，其主要信息和安裝命令、主題等都可以從其官網(wǎng)輕松得到：https://hexo.io/zh-cn/

為了安裝Hexo，只需要在MyWeb目錄中單擊右鍵啟動(dòng)Git Bash Here，然后輸入命令：

npm install hexo-cli -g

網(wǎng)上有很多其他的命令，建議一切以官網(wǎng)命令為依據(jù)，由于時(shí)間版本原因，很有可能未來的命令發(fā)生改變而失效。

然后等待幾分鐘（取決于你的網(wǎng)速），完成后需要首先進(jìn)行初始化在本地生成Hexo相關(guān)目錄：

hexo init

然后就可以使用Hexo三連了，即我們最常用的三個(gè)主要命令（依舊在上述Git Bash命令端口中）：

hexo clean # 清空已有hexo網(wǎng)站文件 hexo generate(or g) # 依據(jù)網(wǎng)頁文本與新的CSS樣式生成新網(wǎng)站文件 hexo server(or s) # 啟動(dòng)本地服務(wù)器，可以在localhost:4000查看網(wǎng)站修改效果

依次運(yùn)行上述三個(gè)命令，就可以在瀏覽器打開localhost:4000端口，查看對(duì)應(yīng)網(wǎng)站界面效果，一般默認(rèn)的是一個(gè)landscape主題，后期當(dāng)提交新文章或者新的樣式修改時(shí)，往往都是先從本地查看結(jié)果無誤后再部署到Gitee Page

三、主題下載與安裝

Hexo官網(wǎng)上提供了豐富的主題可選，你只需要打開對(duì)應(yīng)的界面（https://hexo.io/themes/）選擇喜歡的，然后點(diǎn)擊名稱跳轉(zhuǎn)到GitHub倉庫選擇下載或者克隆對(duì)應(yīng)的zip文件到本地，并且解壓到網(wǎng)站目錄下的themes目錄即可。

下圖中則是我網(wǎng)站中的主題文件，請(qǐng)注意網(wǎng)站的路徑：

然后接下來，你需要修改兩個(gè)配置文件：
你的網(wǎng)站根目錄下的_config.yml文件，即網(wǎng)站配置文件；
你選擇的主題的自帶配置文件_config.yml，即主題配置文件； 網(wǎng)站配置文件會(huì)配置你網(wǎng)站的URL地址、博客名稱以及與Gitee上傳的方式等基本信息；而主題配置文件則會(huì)定義實(shí)際頁面顯示的美觀效果、多媒體（聲音視頻等）以及評(píng)論等附加功能。

四、網(wǎng)站配置文件修改

關(guān)于網(wǎng)站配置文件修改很簡(jiǎn)單，但是并不容易，因?yàn)橐徊恍⌒木蜁?huì)出現(xiàn)域名帶來的訪問錯(cuò)誤，在開始修改網(wǎng)站配置文件前，我建議大家先去Gitee上注冊(cè)登錄新建一個(gè)倉庫用來保存你未來展示的個(gè)人博客頁面、樣式等資源，關(guān)于名稱，很多網(wǎng)上教程都說可以自定義，然后在配置文件中正確指定即可，然而這里自己遇到了第一個(gè)坑：
坑一：新建倉庫與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 permalinkstrailing_html: true # Set to false to remove trailing '.html' from permalinks

上述說明中提到可以自定義名稱，只需要在root字段修改即可，然而這里有兩個(gè)容易出問題的地方：

你的URL并不是你所在倉庫的地址，而應(yīng)該是你啟動(dòng)倉庫的Gitee Page服務(wù)后分配給你的網(wǎng)站靜態(tài)域名，以我個(gè)人為例，倉庫地址為：https://gitee.com/mr-rangerover/mr-rangerover.git（我新建的網(wǎng)站名稱與Gitee賬號(hào)同名），而網(wǎng)站URL應(yīng)為“服務(wù)–Gitee Page”啟動(dòng)/更新后顯示的網(wǎng)站地址：http://mr-rangerover.gitee.io

你的網(wǎng)站目錄當(dāng)然可以和賬戶不同名，但是那樣就需要按照文檔說明修改root字段，自己當(dāng)初定義的名稱不同，結(jié)果導(dǎo)致域名莫名無法解析，總是無法正確訪問網(wǎng)頁，因此干脆像GitHub Page一樣強(qiáng)制要求使用賬號(hào)同名新建網(wǎng)站倉庫，這樣還獲得了以賬號(hào)名為特征的獨(dú)有域名，一舉兩得！

跳過了上面的坑，接下來需要制定網(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: gitrepository: git@gitee.com:mr-rangerover/mr-rangerover.gitbranch: master

注意上面的repository地址并不是倉庫的地址，而是你下載/克隆項(xiàng)目時(shí)彈出的那個(gè)地址，如果使用git就選擇SSH

跳過了上面兩個(gè)坑，后面就比較簡(jiǎn)單了，你需要仔細(xì)閱讀主題文件下的README.md文件以根據(jù)主題特點(diǎn)實(shí)現(xiàn)自定制網(wǎng)站。在此之前，你還需要在網(wǎng)站的Git Bash中運(yùn)行一次安裝所有主題依賴插件包的命令：

npm install npm install --save hexo-deployer-git #為之后做準(zhǔn)備，不裝會(huì)報(bào)錯(cuò)：ERROR Deployer not found: git

完成之后可以執(zhí)行三行命令將本地靜態(tài)資源push到碼云

hexo clean #清理 hexo g #生成靜態(tài)資源 hexo d #將本地資源提高到碼云

坑三、Gitee端的更新
其實(shí)這也算一個(gè)小坑吧，一般而言理解一旦運(yùn)行了hexo deploy(or d)應(yīng)該就已經(jīng)將新的網(wǎng)站文件（主要是網(wǎng)站目錄下的public目錄）上傳到了Gitee，然而事實(shí)上上步之后直接訪問網(wǎng)站URL會(huì)發(fā)現(xiàn)頁面沒有改變，原因在于：你、沒有、更新！是的，對(duì)于免費(fèi)Gitee用戶而言，你會(huì)需要手動(dòng)更新一下Gitee Page，然后才可以將修改真的“部署”到可訪問的網(wǎng)站上。折騰了我好久

只需要再次點(diǎn)擊【更新】稍等片刻即可，完成部署后，點(diǎn)擊網(wǎng)站地址可以查看個(gè)人博客。如果遠(yuǎn)程頁面和本地頁面有出入，可以點(diǎn)擊刷新 F5或者shift+F5

五、末尾

上述過程記錄了一般采用Gitee+Hexo搭建個(gè)人博客的過程，除了跳過幾個(gè)“坑”之外，還需要認(rèn)真閱讀主題目錄下的README.md文件，以進(jìn)一步修改頁面的索引、標(biāo)簽、圖片風(fēng)格等具體樣式。

好了，到此為止，你已經(jīng)有了一個(gè)初步的個(gè)人博客，剩下的是根據(jù)需要添加不同插件或者調(diào)整風(fēng)格了。

祝愿大家都能有一個(gè)屬于自己的個(gè)人博客，感興趣的朋友可以隨時(shí)聯(lián)系我，也可以訪問我的個(gè)人網(wǎng)站 http://mr-rangerover.gitee.io

如果存在問題請(qǐng)同學(xué)給予指正，謝謝。

附屬技巧

一 、寵物插件

輸入命令利用npm安裝相關(guān)包

在MyWeb目錄中單擊右鍵啟動(dòng)Git Bash Here，然后輸入命令：

npm install hexo-helper-live2d npm install live2d-widget-model-hijiki

在MyWeb目錄下，配置_config.yml，找到deploy，添加以下代碼

#修改部署方式 # Deployment ## Docs: https://hexo.io/docs/one-command-deployment deploy:type: git#控制寵物樣式和狀態(tài) live2d:enable: truescriptFrom: localpluginRootPath: live2dw/ # 插件在站點(diǎn)上的根目錄(相對(duì)路徑)pluginJsPath: lib/ # 腳本文件相對(duì)與插件根目錄路徑pluginModelPath: assets/ # 模型文件相對(duì)與插件根目錄路徑tagMode: false # 標(biāo)簽?zāi)Ｊ? 是否僅替換 live2dtag標(biāo)簽而非插入到所有頁面中log: false model:use: live2d-widget-model-hijikidisplay:position: rightwidth: 150height: 300mobile:show: true # 是否在移動(dòng)設(shè)備上顯示react:opacity: 0.7

二、Markdown中的圖片上傳到gitee圖床

參考鏈接：https://blog.csdn.net/qq_42661919/article/details/122457892?spm=1001.2014.3001.5501

總結(jié)

以上是生活随笔為你收集整理的搭建个人博客详细教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。