基于gitee+hexo搭建個人博客

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

總體的思路

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

一、環境配置

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

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

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

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

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

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

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

npm install hexo-cli -g

網上有很多其他的命令，建議一切以官網命令為依據，由于時間版本原因，很有可能未來的命令發生改變而失效。

然后等待幾分鐘（取決于你的網速），完成后需要首先進行初始化在本地生成Hexo相關目錄：

hexo init

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

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

依次運行上述三個命令，就可以在瀏覽器打開localhost:4000端口，查看對應網站界面效果，一般默認的是一個landscape主題，后期當提交新文章或者新的樣式修改時，往往都是先從本地查看結果無誤后再部署到Gitee Page

三、主題下載與安裝

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

下圖中則是我網站中的主題文件，請注意網站的路徑：

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

四、網站配置文件修改

關于網站配置文件修改很簡單，但是并不容易，因為一不小心就會出現域名帶來的訪問錯誤，在開始修改網站配置文件前，我建議大家先去Gitee上注冊登錄新建一個倉庫用來保存你未來展示的個人博客頁面、樣式等資源，關于名稱，很多網上教程都說可以自定義，然后在配置文件中正確指定即可，然而這里自己遇到了第一個坑：
坑一：新建倉庫與Gitee不同名導致無法正確解析
網站配置文件采用文本樣式打開后，可以找到下面一段代碼：

url: http://mr-rangerover.gitee.io/ #填寫自己Gitee Page的網站地址 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字段修改即可，然而這里有兩個容易出問題的地方：

你的URL并不是你所在倉庫的地址，而應該是你啟動倉庫的Gitee Page服務后分配給你的網站靜態域名，以我個人為例，倉庫地址為：https://gitee.com/mr-rangerover/mr-rangerover.git（我新建的網站名稱與Gitee賬號同名），而網站URL應為“服務–Gitee Page”啟動/更新后顯示的網站地址：http://mr-rangerover.gitee.io

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

跳過了上面的坑，接下來需要制定網站采用的主題樣式，這里也需要注意：主題文件解壓縮后不要重命名，直接將主題文件名稱復制后設置為網站主題，即

#博客樣式 # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ ## theme: landscape theme: hexo-theme-pure-master #填寫自己的樣式文件夾的名字

坑二：Git部署目錄不是倉庫地址
網站配置文件修改

# Deployment ## Docs: https://hexo.io/docs/one-command-deployment deploy:type: gitrepository: git@gitee.com:mr-rangerover/mr-rangerover.gitbranch: master

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

跳過了上面兩個坑，后面就比較簡單了，你需要仔細閱讀主題文件下的README.md文件以根據主題特點實現自定制網站。在此之前，你還需要在網站的Git Bash中運行一次安裝所有主題依賴插件包的命令：

npm install npm install --save hexo-deployer-git #為之后做準備，不裝會報錯：ERROR Deployer not found: git

完成之后可以執行三行命令將本地靜態資源push到碼云

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

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

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

五、末尾

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

好了，到此為止，你已經有了一個初步的個人博客，剩下的是根據需要添加不同插件或者調整風格了。

祝愿大家都能有一個屬于自己的個人博客，感興趣的朋友可以隨時聯系我，也可以訪問我的個人網站 http://mr-rangerover.gitee.io

如果存在問題請同學給予指正，謝謝。

附屬技巧

一 、寵物插件

輸入命令利用npm安裝相關包

在MyWeb目錄中單擊右鍵啟動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#控制寵物樣式和狀態 live2d:enable: truescriptFrom: localpluginRootPath: live2dw/ # 插件在站點上的根目錄(相對路徑)pluginJsPath: lib/ # 腳本文件相對與插件根目錄路徑pluginModelPath: assets/ # 模型文件相對與插件根目錄路徑tagMode: false # 標簽模式, 是否僅替換 live2dtag標簽而非插入到所有頁面中log: false model:use: live2d-widget-model-hijikidisplay:position: rightwidth: 150height: 300mobile:show: true # 是否在移動設備上顯示react:opacity: 0.7

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。