當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

Hexo+Github: 博客网站搭建完全教程(看这篇就够了)

發(fā)布時(shí)間：2023/12/20 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 Hexo+Github: 博客网站搭建完全教程(看这篇就够了) 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

本篇教程首次發(fā)布在個(gè)人博客：sunhwee.com，想要獲得最佳閱讀體驗(yàn)，歡迎前往，建議用電腦查看教程文檔。

文章目錄

閱讀須知
博客開(kāi)源
前言
第一部分搭建
- Hexo搭建步驟
- 1. 安裝Git
- 2. 安裝nodejs
- 3. 安裝Hexo
- 4. 注冊(cè)Github賬號(hào)創(chuàng)建個(gè)人倉(cāng)庫(kù)
- 5. 生成SSH添加到GitHub
- 6. 將hexo部署到GitHub
- 7. 設(shè)置個(gè)人域名
- 8. 寫文章、發(fā)布文章
第二部分定制
- 1. Hexo相關(guān)目錄文件
- - 1.1 博客目錄構(gòu)成介紹
  - 1.2 hexo基本配置
  - - 1.2.1 網(wǎng)站
    - 1.2.2 網(wǎng)址
    - 1.2.3 Front-matter
    - 1.2.4 layout（布局）
- 2. 更換主題
- - 2.1 新建文章模板修改
  - 2.2 添加404頁(yè)面
  - 2.3“關(guān)于”頁(yè)面增加簡(jiǎn)歷（可選）
  - 2.4 數(shù)學(xué)公式渲染和代碼高亮
  - 2.5 增加建站時(shí)間
  - 2.6 修改不蒜子初始化計(jì)數(shù)
  - 2.7 添加動(dòng)漫人物
  - 2.8 添加評(píng)論插件
  - 2.9 添加網(wǎng)易云音樂(lè)BGM
  - 2.10 博客音樂(lè)板塊
  - 2.11 增加emoji支持
  - 2.12 Valine評(píng)論模塊修改
  - 2.13 添加博客動(dòng)態(tài)標(biāo)簽
第三部分優(yōu)化
- 1. 網(wǎng)站SEO優(yōu)化
- - 1.1 讓百度收錄你的站點(diǎn)
  - - 1.1.1 驗(yàn)證網(wǎng)站所有權(quán)
    - 1.1.2 生成網(wǎng)站地圖
    - - 1.1.2.1 安裝sitemap插件
      - 1.1.2.2 修改博客配置文件
    - 1.1.3 向百度提交鏈接
    - - 1.1.3.1 設(shè)置主動(dòng)推送
      - 1.1.3.2 設(shè)置自動(dòng)推送
      - 1.1.3.3 **sitemap**方式
  - 1.2 讓google收錄你的站點(diǎn)
  - - 1.2.1 操作步驟
    - 1.2.2 提交 robots.txt:
  - 1.3 讓其他搜索引擎收錄你的站點(diǎn)
  - 1.4 優(yōu)化你的url
  - 1.5 其他seo優(yōu)化
- 2. 優(yōu)化代碼塊樣式
- - 2.1 給代碼塊開(kāi)啟行號(hào)
  - 2.2 添加代碼塊復(fù)制功能
- 3. 優(yōu)化網(wǎng)站加載速度
- - 3.1 優(yōu)化圖片加載
  - 3.2 Gulp實(shí)現(xiàn)代碼壓縮
- 3. 一些注意事項(xiàng)
- - 3.1 備份博客源文件

閱讀須知

注意，這篇文章篇幅較長(zhǎng)，主要針對(duì)新手，每一步很詳細(xì)，所以可能會(huì)顯得比較啰嗦，所以建議基礎(chǔ)比較好小伙伴根據(jù)目錄選擇自己感興趣的部分跳著看，不要文章沒(méi)看，上來(lái)先噴一下！謝謝( ⊙ o ⊙ )。
教程內(nèi)容隨意復(fù)制使用，引用的話請(qǐng)加一個(gè)參考鏈接，謝謝！

博客開(kāi)源

倒騰了一兩周總算把個(gè)人博客網(wǎng)站完善了，目前這個(gè)版本使用應(yīng)該是夠了，當(dāng)然還有一些優(yōu)化項(xiàng)和功能增加后續(xù)在慢慢更新，為了回饋開(kāi)源，今天準(zhǔn)備把我自己修改完善的blog網(wǎng)站源代碼開(kāi)源。這不是生成后的網(wǎng)頁(yè)文件，是您可以直接使用的源碼，您只需要把博客相關(guān)信息換成您自己的就可以部署了，對(duì)于新手或者不懂編程的小伙伴來(lái)說(shuō)，簡(jiǎn)直是福音，極大簡(jiǎn)化了您構(gòu)建博客的工作量和復(fù)雜度，每個(gè)人都可以下載并修改成自己喜歡樣式！如果你有修改想法，歡迎PR！最后，我們還是給這個(gè)開(kāi)源小項(xiàng)目取個(gè)名字吧，就叫hexo-blog-fly吧，怎么樣？<<<<<源代碼下載>>>>>

本博客基于Hexo框架搭建，用到hexo-theme-matery主題,并在此基礎(chǔ)之上做了很多修改，修復(fù)了一些bug，增加了一些新的特性和功能，博客地址：https://shw2018.github.io，博客演示：sunhwee.com。

簡(jiǎn)單使用方法：

star 本項(xiàng)目倉(cāng)庫(kù)^o

安裝Git, 安裝nodeJS

你可以直接fork一份源碼到你的倉(cāng)庫(kù)，clone到本地

在本地博客倉(cāng)庫(kù)運(yùn)行npm i命令安裝依賴包

修改配置信息，改成自己的信息

運(yùn)行命令hexo clean（清除生成文件），hexo g（生成網(wǎng)頁(yè)）， hexo s（本地預(yù)覽），hexo d（部署）

更多詳情教程，強(qiáng)烈推薦看我寫的：Hexo+Github博客搭建完全教程

有什么問(wèn)題可以在文章最后評(píng)論區(qū)留言和討論，當(dāng)然，歡迎在文章最后打賞投幣，請(qǐng)博主一杯冰闊樂(lè)，笑～

最后，如果項(xiàng)目和教程對(duì)你有所幫助或者你看見(jiàn)了還算比較喜歡，歡迎給我的該github項(xiàng)目倉(cāng)庫(kù)star，謝謝您！

前言

去年在博客園注冊(cè)了自己的第一個(gè)博客，當(dāng)時(shí)初衷就是想拿來(lái)作為自己的在線筆記本，做做學(xué)習(xí)記錄，分享一些學(xué)到的東西，使用第三方提供的博客服務(wù)其實(shí)也挺方便，現(xiàn)在市面上提供類似服務(wù)的博客網(wǎng)站也很多，如CSDN，博客園，簡(jiǎn)書等平臺(tái)，可以直接在上面發(fā)表，用戶交互做的好，寫的文章百度也能搜索的到。但是缺點(diǎn)是比較不自由，會(huì)受到平臺(tái)的各種限制和惡心的廣告，個(gè)性化不足。而自己購(gòu)買域名和服務(wù)器，搭建博客的成本實(shí)在是太高了，不光是說(shuō)這些購(gòu)買成本，單單是花力氣去自己搭這么一個(gè)網(wǎng)站，還要定期的維護(hù)它，對(duì)于我們大多數(shù)人來(lái)說(shuō)，也是沒(méi)有這樣的精力和時(shí)間。那么，我們能不能自己定制一個(gè)自己喜歡的個(gè)性化博客，同時(shí)也不用付出太高的成本啦？

這就引出了第三種選擇，基于開(kāi)源框架搭建博客，然后直接在github page平臺(tái)上托管我們的博客。這樣就可以安心的來(lái)寫作，又不需要定期維護(hù)，基于這個(gè)想法，今年8月初的時(shí)候開(kāi)始搭建第一個(gè)屬于自己的獨(dú)立博客，前后斷續(xù)弄了近一周，到現(xiàn)在稍微有點(diǎn)模樣了。我想可能有很多小伙伴應(yīng)該也想過(guò)搭建一個(gè)自己的博客，當(dāng)然，網(wǎng)上也有一堆詳細(xì)教程。寫這篇博客的目的大概有兩個(gè)，第一個(gè)是當(dāng)做自己的搭建記錄，方便以后自己隨時(shí)查看提示修改，第二個(gè)是稍稍總結(jié)一下具體的搭建步驟以及一些支持個(gè)性化定制的博客源碼修改的教程，稍稍分享一下這些修改經(jīng)驗(yàn)，當(dāng)然，更多的一些個(gè)性化操作需要你自己以后在這個(gè)基礎(chǔ)上慢慢去摸索，有些寫的不太好的地方還希望看到的小伙伴多多包涵。

博客初步的頁(yè)面效果可以看一下我的博客：sunhwee.com，歡迎大家支持。

本博客基于Hexo，所以首先要了解一下我們搭建博客所要用到的框架。Hexo是高效的靜態(tài)網(wǎng)站生成框架，它基于Node.js，快速，簡(jiǎn)單且功能強(qiáng)大，是搭建博客的首選框架。大家可以進(jìn)入hexo官網(wǎng)進(jìn)行詳細(xì)查看，因?yàn)镠exo的創(chuàng)建者是臺(tái)灣人，對(duì)中文的支持很友好，可以選擇中文進(jìn)行查看。通過(guò)Hexo，你可以直接使用Markdown語(yǔ)法來(lái)撰寫博客。相信很多小伙伴寫工程都寫過(guò)README.md文件吧，對(duì)，就是這個(gè)格式的！寫完后只需兩三條命令即可將生成的網(wǎng)頁(yè)上傳到github或者coding等代碼管理托管平臺(tái)，然后別人就可以瀏覽你的博客網(wǎng)頁(yè)啦。是不是很簡(jiǎn)單？你無(wú)需關(guān)心網(wǎng)頁(yè)源代碼的具體生成細(xì)節(jié)，只需要用心寫好你的博客文章內(nèi)容就行了。

簡(jiǎn)單總結(jié)：Hexo, 產(chǎn)品成熟，使用簡(jiǎn)單，功能強(qiáng)大，有豐富的各種插件資源；但，像發(fā)布后臺(tái)、站內(nèi)搜索，評(píng)論系統(tǒng)類似訴求，雖然有對(duì)應(yīng)的工具，但也需要自己折騰下，后續(xù)我們一步一步介紹。

教程大致分三個(gè)部分，

第一部分：hexo的初級(jí)搭建還有部署到github page上，以及個(gè)人域名的綁定。
第二部分：hexo的基本配置，更換主題，實(shí)現(xiàn)多終端工作，以及在coding page部署實(shí)現(xiàn)國(guó)內(nèi)外分流
第三部分：hexo添加各種功能，包括搜索的SEO，閱讀量統(tǒng)計(jì)，訪問(wèn)量統(tǒng)計(jì)和評(píng)論系統(tǒng)等。

第一部分搭建

hexo的初級(jí)搭建還有部署到github page上，以及個(gè)人域名的綁定。

Hexo搭建步驟

1.安裝Git
2.安裝Node.js
3.安裝Hexo
4.GitHub創(chuàng)建個(gè)人倉(cāng)庫(kù)
5.生成SSH添加到GitHub
6.將hexo部署到GitHub
7.設(shè)置個(gè)人域名
8.發(fā)布文章

1. 安裝Git

為了把本地的網(wǎng)頁(yè)文件上傳到github上面去，需要用到工具———Git[下載地址]。Git是目前世界上最先進(jìn)的分布式版本控制系統(tǒng)，可以有效、高速的處理從很小到非常大的項(xiàng)目版本管理。Git非常強(qiáng)大，建議每個(gè)人都去了解一下。廖雪峰老師的Git教程寫的非常好，大家可以看一下。Git教程

**windows：**到git官網(wǎng)上下載.exe文件,Download git,安裝選項(xiàng)還是全部默認(rèn)，只不過(guò)最后一步添加路徑時(shí)選擇Use Git from the Windows Command Prompt，這樣我們就可以直接在命令提示符里打開(kāi)git了。

順便說(shuō)一下，windows在git安裝完后，就可以直接使用git bash來(lái)敲命令行了，不用自帶的cmd，cmd有點(diǎn)難用。

**linux：**對(duì)linux來(lái)說(shuō)實(shí)在是太簡(jiǎn)單了，因?yàn)樽钤绲膅it就是在linux上編寫的，只需要一行代碼

sudo apt-get install git

安裝完成后在命令提示符中輸入git --version來(lái)查看一下版本驗(yàn)證是否安裝成功。

2. 安裝nodejs

Hexo是基于node.js編寫的，所以需要安裝一下node.js和里面的npm工具。

**windows：**下載穩(wěn)定版或者最新版都可以Node.js，安裝選項(xiàng)全部默認(rèn)，一路點(diǎn)擊Next。
最后安裝好之后，按Win+R打開(kāi)命令提示符，輸入node -v和npm -v，如果出現(xiàn)版本號(hào)，那么就安裝成功了。

**linux：**命令行安裝：

sudo apt-get install nodejs sudo apt-get install npm

不過(guò)不推薦命令行安裝，有時(shí)候有問(wèn)題，建議直接到官網(wǎng)去下載編譯好的壓縮文件，如下所示:
[外鏈圖片轉(zhuǎn)存失敗(img-3jYM5iOs-1566969757045)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/1.png)]
然后解壓到你指定的文件夾即可，比如我解壓到我系統(tǒng)的/home/shw/MySoftwares目錄下了，如圖:

注意本壓縮包是.tar.xz格式的，需要兩次解壓

配置一下環(huán)境變量

sudo vim /etc/profile

復(fù)制下面兩行到剛打開(kāi)的profile文件最底部(注意node的安裝地址/home/shw/MySoftwares/node-v12.8.0-linux-x64換成自己的)：

export NODE_HOME=/home/shw/MySoftwares/node-v12.8.0-linux-x64 export PATH=$PATH:$NODE_HOME/bin

保存后退出，再執(zhí)行下面命令將環(huán)境變量生效：

source /etc/profile

將目錄軟鏈接到全局環(huán)境下（命令后面的/usr/local/bin/node是固定的）

sudo ln -s /home/shw/MySoftwares/node-v12.8.0-linux-x64/node /usr/local/bin/node sudo ln -s /home/shw/MySoftwares/node-v12.8.0-linux-x64/npm /usr/local/bin/npm

這樣安裝好了以后使用npm安裝的包(比如：ionic serve)，使用包的命令時(shí)可能會(huì)提示找不到命令，沒(méi)關(guān)系，在用戶目錄下終端執(zhí)行下面命令(固定寫法)：

echo -e "export PATH=$(npm prefix -g)/bin:$PATH" >> ~/.bashrc && source ~/.bashrc

這樣我們?cè)谒杏脩粝?#xff0c;都可以使用npm，也可以使用npm安裝的包的命令。成功的將nodejs安裝并配置到全局環(huán)境下。

安裝完后，打開(kāi)命令行終端，輸入:

node -v npm -v

檢查一下有沒(méi)有安裝成功

添加國(guó)內(nèi)鏡像源

如果沒(méi)有梯子的話，可以使用阿里的國(guó)內(nèi)鏡像進(jìn)行加速。

npm config set registry https://registry.npm.taobao.org

3. 安裝Hexo

前面git和nodejs安裝好后，就可以安裝hexo了，你可以先創(chuàng)建一個(gè)文件夾MyBlog，用來(lái)存放自己的博客文件，然后cd到這個(gè)文件夾下（或者在這個(gè)文件夾下直接右鍵git bash打開(kāi)）。

比如我的博客文件都存放在D:\Study\MyBlog目錄下。

在該目錄下右鍵點(diǎn)擊Git Bash Here，打開(kāi)git的控制臺(tái)窗口，以后我們所有的操作都在git控制臺(tái)進(jìn)行，就不用Windows自帶的cmd了。

定位到該目錄下，輸入npm install -g hexo-cli安裝Hexo。可能會(huì)有幾個(gè)報(bào)錯(cuò)，無(wú)視它就行。

npm install -g hexo-cli

安裝完后輸入hexo -v驗(yàn)證是否安裝成功。

至此hexo就安裝完了。

接下來(lái)初始化一下hexo,即初始化我們的網(wǎng)站，輸入hexo init初始化文件夾

hexo init MyBlog

這個(gè)MyBlog可以自己取什么名字都行，然后，接著輸入npm install安裝必備的組件。

cd MyBlog //進(jìn)入這個(gè)MyBlog文件夾 npm install

新建完成后，指定文件夾MyBlog目錄下有：

node_modules: 依賴包
public：存放生成的頁(yè)面
scaffolds：生成文章的一些模板
source：用來(lái)存放你的文章
themes：主題**
_config.yml: 博客的配置文件**

這樣本地的網(wǎng)站配置也弄好啦，輸入hexo g生成靜態(tài)網(wǎng)頁(yè)，然后輸入hexo s打開(kāi)本地服務(wù)器，

hexo g hexo server(或者簡(jiǎn)寫:hexo s）)

然后瀏覽器打開(kāi)http://localhost:4000/，就可以看到我們的博客啦，效果如下：
[外鏈圖片轉(zhuǎn)存失敗(img-5agFYiiE-1566969757046)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/3.png)]

按ctrl+c關(guān)閉本地服務(wù)器。

4. 注冊(cè)Github賬號(hào)創(chuàng)建個(gè)人倉(cāng)庫(kù)

接下來(lái)就去注冊(cè)一個(gè)github賬號(hào)，用來(lái)存放我們的網(wǎng)站。大多數(shù)小伙伴應(yīng)該都有了吧，作為一個(gè)合格的程序猿（媛）還是要有一個(gè)的。

打開(kāi)https://github.com/，新建一個(gè)項(xiàng)目倉(cāng)庫(kù)New repository，如下所示：

然后如下圖所示，輸入自己的項(xiàng)目名字，后面一定要加.github.io后綴，README初始化也要勾上。
[外鏈圖片轉(zhuǎn)存失敗(img-gt2XfSf4-1566969757046)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/5.png)]

要?jiǎng)?chuàng)建一個(gè)和你用戶名相同的倉(cāng)庫(kù)，后面加.http://github.io，只有這樣，將來(lái)要部署到GitHub page的時(shí)候，才會(huì)被識(shí)別，也就是http://xxxx.github.io，其中xxx就是你注冊(cè)GitHub的用戶名。例如我的：http://shw2018.github.io

5. 生成SSH添加到GitHub

生成SSH添加到GitHub，連接Github與本地。
右鍵打開(kāi)git bash，然后輸入下面命令：

git config --global user.name "yourname" git config --global user.email "youremail"

這里的yourname輸入你的GitHub用戶名，youremail輸入你GitHub的郵箱。這樣GitHub才能知道你是不是對(duì)應(yīng)它的賬戶。例如我的：

git config --global user.name "shw2018" git config --global user.email "hwsun@std.uestc.edu.cn"

可以用以下兩條，檢查一下你有沒(méi)有輸對(duì)

git config user.name git config user.email

然后創(chuàng)建SSH,一路回車

ssh，簡(jiǎn)單來(lái)講，就是一個(gè)秘鑰，其中，id_rsa是你這臺(tái)電腦的私人秘鑰，不能給別人看的，id_rsa.pub是公共秘鑰，可以隨便給別人看。把這個(gè)公鑰放在GitHub上，這樣當(dāng)你鏈接GitHub自己的賬戶時(shí)，它就會(huì)根據(jù)公鑰匹配你的私鑰，當(dāng)能夠相互匹配時(shí)，才能夠順利的通過(guò)git上傳你的文件到GitHub上。

ssh-keygen -t rsa -C "youremail"

這個(gè)時(shí)候它會(huì)告訴你已經(jīng)生成了.ssh的文件夾。在你的電腦中找到這個(gè)文件夾。或者git bash中輸入

cat ~/.ssh/id_rsa.pub

將輸出的內(nèi)容復(fù)制到框中，點(diǎn)擊確定保存。

打開(kāi)github，在頭像下面點(diǎn)擊settings，再點(diǎn)擊SSH and GPG keys，新建一個(gè)SSH，名字隨便取一個(gè)都可以，把你的id_rsa.pub里面的信息復(fù)制進(jìn)去。如圖：
[外鏈圖片轉(zhuǎn)存失敗(img-4zsPuG2V-1566969757046)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/6.png)]
在git bash輸入ssh -T git@github.com，如果如下圖所示，出現(xiàn)你的用戶名，那就成功了。

6. 將hexo部署到GitHub

這一步，我們就可以將hexo和GitHub關(guān)聯(lián)起來(lái)，也就是將hexo生成的文章部署到GitHub上，打開(kāi)博客根目錄下的_config.yml文件，這是博客的配置文件，在這里你可以修改與博客配置相關(guān)的各種信息。

修改最后一行的配置：

deploy:type: gitrepository: https://github.com/shw2018/shw2018.github.iobranch: master

repository修改為你自己的github項(xiàng)目地址即可，就是部署時(shí)，告訴工具，將生成網(wǎng)頁(yè)通過(guò)git方式上傳到你對(duì)應(yīng)的鏈接倉(cāng)庫(kù)中。

這個(gè)時(shí)候需要先安裝deploy-git ，也就是部署的命令,這樣你才能用命令部署到GitHub。

npm install hexo-deployer-git --save

然后

hexo clean hexo generate hexo deploy

其中 hexo clean清除了你之前生成的東西，也可以不加。 hexo generate顧名思義，生成靜態(tài)文章，可以用 hexo g縮寫，hexo deploy部署文章，可以用hexo d縮寫

注意deploy時(shí)可能要你輸入username和password。

得到下圖就說(shuō)明部署成功了，過(guò)一會(huì)兒就可以在http://yourname.github.io 這個(gè)網(wǎng)站看到你的博客了！！

7. 設(shè)置個(gè)人域名

現(xiàn)在你的個(gè)人網(wǎng)站的地址是yourname.github.io，如果覺(jué)得這個(gè)網(wǎng)址逼格不太夠，這就需要你設(shè)置個(gè)人域名了。但是需要花錢。

不過(guò)，這一步不是必要的，如果目前還不想買域名可以先跳過(guò)，繼續(xù)看后面的，以后想買域名了在還看這塊

首先你得購(gòu)買一個(gè)專屬域名，xx云都能買，看你個(gè)人喜好了。

這篇以騰訊云為例，騰訊云官網(wǎng)購(gòu)買：
[外鏈圖片轉(zhuǎn)存失敗(img-R4rcmadN-1566969757047)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/9.png)]
然后實(shí)名認(rèn)證后進(jìn)入騰訊云控制臺(tái)，點(diǎn)云解析進(jìn)去，找到你剛買的域名，點(diǎn)進(jìn)去添加兩條解析記錄，如下圖所示：
[外鏈圖片轉(zhuǎn)存失敗(img-hi5FgG4j-1566969757047)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/10.png)]

然后打開(kāi)你的github博客項(xiàng)目，點(diǎn)擊settings，拉到下面Custom domain處，填上你自己的域名，保存：
[外鏈圖片轉(zhuǎn)存失敗(img-nTOWkH8d-1566969757047)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/11.png)]

這時(shí)候你的項(xiàng)目根目錄應(yīng)該會(huì)出現(xiàn)一個(gè)名為CNAME的文件了。如果沒(méi)有的話，打開(kāi)你本地博客/source目錄，我的是D:\Study\MyBlog\source，新建CNAME文件，注意沒(méi)有后綴。然后在里面寫上你的域名，保存。最后運(yùn)行hexo g、hexo d上傳到github。

過(guò)不了多久，再打開(kāi)你的瀏覽器，輸入你自己的專屬域名，就可以看到搭建的網(wǎng)站啦！

8. 寫文章、發(fā)布文章

首先在博客根目錄下右鍵打開(kāi)git bash，安裝一個(gè)擴(kuò)展npm i hexo-deployer-git。

然后輸入hexo new post "article title"，新建一篇文章。

然后打開(kāi)D:\Study\MyBlog\source\_posts的目錄，可以發(fā)現(xiàn)下面多了一個(gè)文件夾和一個(gè).md文件，一個(gè)用來(lái)存放你的圖片等數(shù)據(jù)，另一個(gè)就是你的文章文件啦。
你可以會(huì)直接在vscode里面編寫markdown文件，可以實(shí)時(shí)預(yù)覽，也可以用用其他編輯md文件的軟件的工具編寫。
編寫完markdown文件后，根目錄下輸入hexo g生成靜態(tài)網(wǎng)頁(yè)，然后輸入hexo s可以本地預(yù)覽效果，最后輸入hexo d上傳到github上。這時(shí)打開(kāi)你的github.io主頁(yè)就能看到發(fā)布的文章啦。

到這兒基本第一部分就完成了，已經(jīng)完整搭建起一個(gè)比較簡(jiǎn)陋的個(gè)人博客了，接下來(lái)我們就可以對(duì)我們的博客進(jìn)行個(gè)性化定制了。

第二部分定制

我們要定制自己的博客的話，首先就要來(lái)了解一下Hexo博客的一些目錄和文件的作用，以及如何平滑更換漂亮的主題模板并加入自己的定制源代碼實(shí)現(xiàn)個(gè)性化定制

1. Hexo相關(guān)目錄文件

1.1 博客目錄構(gòu)成介紹

從上圖可以看出，博客的目錄結(jié)構(gòu)如下：

- node_modules - public - scaffolds - source- _data- _posts- about- archives- categories- friends- tags - themes

node_modules是node.js各種庫(kù)的目錄，public是生成的網(wǎng)頁(yè)文件目錄，scaffolds里面就三個(gè)文件，存儲(chǔ)著新文章和新頁(yè)面的初始設(shè)置，source是我們最常用到的一個(gè)目錄，里面存放著文章、各類頁(yè)面、圖像等文件，themes存放著主題文件，一般也用不到。

我們平時(shí)寫文章只需要關(guān)注source/_posts這個(gè)文件夾就行了。

1.2 hexo基本配置

在文件根目錄下的_config.yml，就是整個(gè)hexo框架的配置文件了。可以在里面修改大部分的配置。詳細(xì)可參考官方的配置描述。

1.2.1 網(wǎng)站

參數(shù)描述title網(wǎng)站標(biāo)題subtitle網(wǎng)站副標(biāo)題description網(wǎng)站描述author您的名字language網(wǎng)站使用的語(yǔ)言timezone網(wǎng)站時(shí)區(qū)。Hexo 默認(rèn)使用您電腦的時(shí)區(qū)。時(shí)區(qū)列表。比如說(shuō)：America/New_York, Japan, 和 UTC 。

其中，description主要用于SEO，告訴搜索引擎一個(gè)關(guān)于您站點(diǎn)的簡(jiǎn)單描述，通常建議在其中包含您網(wǎng)站的關(guān)鍵詞。author參數(shù)用于主題顯示文章的作者。

1.2.2 網(wǎng)址

參數(shù)描述url網(wǎng)址root網(wǎng)站根目錄 permalink文章的永久鏈接格式permalink_defaults永久鏈接中各部分的默認(rèn)值

在這里，你需要把url改成你的網(wǎng)站域名。

permalink，也就是你生成某個(gè)文章時(shí)的那個(gè)鏈接格式。

比如我新建一個(gè)文章叫temp.md，那么這個(gè)時(shí)候他自動(dòng)生成的地址就是http://yoursite.com/2018/09/05/temp。

以下是官方給出的示例，關(guān)于鏈接的變量還有很多，需要的可以去官網(wǎng)上查找永久鏈接。

參數(shù)結(jié)果:year/:month/:day/:title/2019/08/10/hello-world :year-:month-:day-:title.html 2019-08-10-hello-world.html :category/:titlefoo/bar/hello-world

再往下翻，中間這些都默認(rèn)就好了。

theme: landscap

theme就是選擇什么主題，也就是在themes這個(gè)文件夾下，在官網(wǎng)上有很多個(gè)主題，默認(rèn)給你安裝的是lanscape這個(gè)主題。當(dāng)你需要更換主題時(shí)，在官網(wǎng)上下載，把主題的文件放在themes文件夾下，再修改這個(gè)主題參數(shù)就可以了。

1.2.3 Front-matter

Front-matter 是md文件最上方以 ---分隔的區(qū)域，用于指定個(gè)別文件的變量，舉例來(lái)說(shuō)：

title: Hexo+Github博客搭建記錄 date: 2019-08-10 21:44:44

下是預(yù)先定義的參數(shù)，您可在模板中使用這些參數(shù)值并加以利用。

參數(shù)描述layout布局title標(biāo)題date建立日期updated更新日期comments開(kāi)啟文章的評(píng)論功能tags標(biāo)簽（不適用于分頁(yè)）categories分類（不適用于分頁(yè)）permalink覆蓋文章網(wǎng)址

其中，分類和標(biāo)簽需要區(qū)別一下，分類具有順序性和層次性，也就是說(shuō)Foo，Bar不等于Bar，Foo；而標(biāo)簽沒(méi)有順序和層次。

--- title: Hexo+Github博客搭建記錄 date: 2019-08-10 21:44:44 author: 洪衛(wèi) img: /medias/banner/7.jpg coverImg: /medias/banner/7.jpg top: true cover: true toc: true password: 5f15b28ffe43f8be4f239bdd9b69af9d80dbafcb20a5f0df5d1677a120ae9110 mathjax: true summary: 這是你自定義的文章摘要內(nèi)容，如果這個(gè)屬性有值，文章卡片摘要就顯示這段文字，否則程序會(huì)自動(dòng)截取文章的部分內(nèi)容作為摘要 tags: - Hexo - Github - 博客 categories: - 軟件安裝與配置 ---

1.2.4 layout（布局）

1.2.4.1 post

當(dāng)你每一次使用代碼

hexo new XXX

它其實(shí)默認(rèn)使用的是post這個(gè)布局，也就是在source文件夾下的_post里面。

Hexo有三種默認(rèn)布局：post、page和draft，它們分別對(duì)應(yīng)不同的路徑，而您自定義的其他布局和post相同，都將儲(chǔ)存到source/_posts文件夾。

而new這個(gè)命令其實(shí)是：

hexo new [layout] <title>

只不過(guò)這個(gè)layout默認(rèn)是post罷了。

1.2.4.2 page

如果你想另起一頁(yè)，那么可以使用

hexo new page newpage

系統(tǒng)會(huì)自動(dòng)給你在source文件夾下創(chuàng)建一個(gè)newpage文件夾，以及newpage文件夾中的index.md，這樣你訪問(wèn)的newpage對(duì)應(yīng)的鏈接就是http://xxx.xxx/newpage

1.2.4.3 draft

draft是草稿的意思，也就是你如果想寫文章，又不希望被看到，那么可以

hexo new draft newdraft

這樣會(huì)在source/_draft中新建一個(gè)newdraft.md文件，如果你的草稿文件寫的過(guò)程中，想要預(yù)覽一下，那么可以使用

hexo server --draft

在本地端口中開(kāi)啟服務(wù)預(yù)覽。

如果你的草稿文件寫完了，想要發(fā)表到post中，

hexo publish draft newdraft

就會(huì)自動(dòng)把newdraft.md發(fā)送到post中。

2. 更換主題

我們?cè)诹私釮exo博客文件基礎(chǔ)之后，知道主題文件就放在themes文件下，那么我們就可以去Hexo官網(wǎng)下載喜歡的主題，復(fù)制進(jìn)去然后修改參數(shù)即可。
網(wǎng)上大多數(shù)主題都是github排名第一的Next主題，但是我個(gè)人不是很喜歡，我在網(wǎng)上看到一個(gè)主題感覺(jué)還不錯(cuò)：hexo-theme-matery，地址在傳送門。這個(gè)主題看著比較漂亮，并且響應(yīng)式比較友好，點(diǎn)起來(lái)很舒服，功能也比較很多。

當(dāng)然，人各有異，這個(gè)主題風(fēng)格也不一定是你喜歡，那么你也可以跟著這教程類似的方法替換成你喜歡的就行了。

特性：

簡(jiǎn)單漂亮，文章內(nèi)容美觀易讀
Material Design 設(shè)計(jì)
響應(yīng)式設(shè)計(jì)，博客在桌面端、平板、手機(jī)等設(shè)備上均能很好的展現(xiàn)
首頁(yè)輪播文章及每天動(dòng)態(tài)切換 Banner 圖片
瀑布流式的博客文章列表（文章無(wú)特色圖片時(shí)會(huì)有 24 張漂亮的圖片代替）
時(shí)間軸式的歸檔頁(yè)
詞云的標(biāo)簽頁(yè)和雷達(dá)圖的分類頁(yè)
豐富的關(guān)于我頁(yè)面（包括關(guān)于我、文章統(tǒng)計(jì)圖、我的項(xiàng)目、我的技能、相冊(cè)等）
可自定義的數(shù)據(jù)的友情鏈接頁(yè)面
支持文章置頂和文章打賞
支持 MathJax
TOC 目錄
可設(shè)置復(fù)制文章內(nèi)容時(shí)追加版權(quán)信息
可設(shè)置閱讀文章時(shí)做密碼驗(yàn)證
Gitalk、Gitment、Valine 和 Disqus 評(píng)論模塊（推薦使用 Gitalk）
集成了不蒜子統(tǒng)計(jì)、谷歌分析（Google Analytics）和文章字?jǐn)?shù)統(tǒng)計(jì)等功能
支持在首頁(yè)的音樂(lè)播放和視頻播放功能

他的介紹文檔寫得非常的詳細(xì)，還有中英文兩個(gè)版本。效果圖如下：
[外鏈圖片轉(zhuǎn)存失敗(img-r9qoTdRP-1566969757048)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/12.png)]

首先先按照文檔教程安裝一遍主題，然后是可以正常打開(kāi)的，如果你是一般使用的話，基本沒(méi)啥問(wèn)題了。不過(guò)有些地方有些地方可以根據(jù)你自己的習(xí)慣和喜好修改一下，下面記錄一下我這個(gè)博客修改了的一些地方。

2.1 新建文章模板修改

首先為了新建文章方便，我們可以修改一下文章模板，建議將/scaffolds/post.md修改為如下代碼：

--- title: {{ title }} date: {{ date }} author: img: coverImg: top: false cover: false toc: true mathjax: false password: summary: tags: categories: ---

這樣新建文章后一些Front-matter參數(shù)不用你自己補(bǔ)充了，修改對(duì)應(yīng)信息就可以了。

2.2 添加404頁(yè)面

原來(lái)的主題沒(méi)有404頁(yè)面，我們加一個(gè)。首先在/source/目錄下新建一個(gè)404.md，內(nèi)容如下：

title: 404 date: 2019-08-5 16:41:10 type: "404" layout: "404" description: "Oops～，我崩潰了！找不到你想要的頁(yè)面 :("

然后在/themes/matery/layout/目錄下新建一個(gè)404.ejs文件，內(nèi)容如下：

2.3“關(guān)于”頁(yè)面增加簡(jiǎn)歷（可選）

修改/themes/matery/layout/about.ejs，找到<div class="card">標(biāo)簽，然后找到它對(duì)應(yīng)的</div>標(biāo)簽，接在后面新增一個(gè)card，語(yǔ)句如下：

這樣就會(huì)多出一張card，然后可以在/source/about/index.md下面寫上你的簡(jiǎn)歷了，當(dāng)然這里的位置隨你自己設(shè)置，你也可以把簡(jiǎn)歷作為第一個(gè)card。

2.4 數(shù)學(xué)公式渲染和代碼高亮

2.4.1 解決mathjax與代碼高亮的沖突

如果你按照教程安裝了代碼高亮插件hexo-prism-plugin，單獨(dú)使用是沒(méi)有問(wèn)題的，但如果你又使用了mathjax，并且按照網(wǎng)上教程，安裝kramed插件并修改了js文件里的正則表達(dá)式（為了解決markdown和mathjax的語(yǔ)法沖突），那你的代碼就無(wú)法高亮了。解決方法很簡(jiǎn)單，別用kramed插件了，還用原來(lái)自帶的marked插件，直接改它的正則表達(dá)式就行了。

2.4.2 加數(shù)學(xué)公式顯示

打開(kāi)/themes/matery/layout中的post.ejs文件，在最下方粘貼如下代碼：

由于markdown語(yǔ)法與mathjax語(yǔ)法存在沖突，所以還需要修改源文件。

打開(kāi)/node_modules/marked/lib中的marked.js文件，第539行的escape:處替換成：

escape: /^$[`*\[\]()#$+\-.!_>])/

第553行的em:處替換成：

em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

這時(shí)在文章里寫數(shù)學(xué)公式基本沒(méi)有問(wèn)題了，但是要注意：
數(shù)學(xué)公式中如果出現(xiàn)了連續(xù)兩個(gè){，中間一定要加空格！

舉個(gè)例子:
行內(nèi)公式： $y = f (x)$
代碼：

$y = f(x)$

行間公式：
\[y = {f_{ {g_1}}}(x)\]
代碼：

\\[y = {f_{ {g_1}}}(x)\\]

注意上面花括號(hào)之間有空格！

2.5 增加建站時(shí)間

修改/themes/matery/layout/_partial中的footer.ejs，在最后加上：

然后在合適的地方（比如copyright聲明后面）加上下面的代碼就行了：

2.6 修改不蒜子初始化計(jì)數(shù)

因?yàn)椴凰庾又两裎撮_(kāi)放注冊(cè)，所以沒(méi)辦法在官網(wǎng)修改初始化，只能自己動(dòng)手了。和上一條一樣，我們?cè)?themes/matery/layout/_partial里的footer.ejs文件最后加上：

然后把上面幾行有段代碼：

<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %><span id="busuanzi_container_site_pv"><i class="fa fa-heart-o"></i>本站總訪問(wèn)量 <span id="busuanzi_value_site_pv" class="white-color"></span></span> <% } %> <% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %><span id="busuanzi_container_site_uv">人次, 訪客數(shù) <span id="busuanzi_value_site_uv" class="white-color"></span> 人.</span> <% } %>

修改為：

<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %><span id="busuanzi_container_site_pv" style='display:none'><i class="fa fa-heart-o"></i>本站總訪問(wèn)量 <span id="busuanzi_value_site_pv" class="white-color"></span></span> <% } %> <% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %><span id="busuanzi_container_site_uv" style='display:none'>人次, 訪客數(shù) <span id="busuanzi_value_site_uv" class="white-color"></span> 人.</span> <% } %>

其實(shí)就是增加了兩個(gè)style='display:none'而已。

2.7 添加動(dòng)漫人物

其實(shí)三步就行了，不用像網(wǎng)上有些教程那么復(fù)雜。

第一步：

npm install --save hexo-helper-live2d

第二步：

npm install live2d-widget-model-shizuku

這里的動(dòng)漫模型可以改，只需要下載對(duì)應(yīng)模型就行了，你可以官方倉(cāng)庫(kù)去看有哪些模型，下載你喜歡的就行。

第三步：
在根目錄配置文件中添加如下代碼：

live2d:enable: truescriptFrom: localpluginRootPath: live2dw/pluginJsPath: lib/pluginModelPath: assets/tagMode: falselog: falsemodel:use: live2d-widget-model-shizukudisplay:position: rightwidth: 150height: 300mobile:show: falsereact:opacity: 0.7

然后hexo g再hexo s就能預(yù)覽出效果了，但是有個(gè)注意的地方，這個(gè)動(dòng)漫人物最好不要和不蒜子同時(shí)使用，不然不蒜子會(huì)顯示不出來(lái)。至于解決辦法后續(xù)更新。

解決動(dòng)漫人物和不蒜子不能同時(shí)使用的bug（2019.08.11）：

打開(kāi)themes\matery\layout\_partial中的footer.ejs，將本站總訪問(wèn)量和訪客數(shù)的代碼改為如下：

<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %> <span id="busuanzi_container_site_pv" style='display:none'></span><i class="fa fa-heart-o"></i>本站總訪問(wèn)量 <span id="busuanzi_value_site_pv" class="white-color"></span><% } %><% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %><span id="busuanzi_container_site_uv" style='display:none'></span>人次, 訪客數(shù) <span id="busuanzi_value_site_uv" class="white-color"></span> 人.<% } %>

變化就在下面兩句，將源代碼對(duì)應(yīng)字段后面的＜/span＞寫在前面了。

發(fā)現(xiàn)按照上面改了過(guò)后，又出現(xiàn)一個(gè)新bug：文章頭部的閱讀次數(shù)不顯示了，解決辦法：（2019.08.11）：

打開(kāi)themes\matery\layout\_partial中的post-detail.ejs，找到對(duì)應(yīng)代碼字段：

<% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %><div id="busuanzi_container_page_pv" class="info-break-policy"><i class="fa fa-eye fa-fw"></i><%- __('readCount') %>:  <span id="busuanzi_value_page_pv" ></span></div><% } %>

修改為下面的就可以了：

<% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %><span id="busuanzi_container_site_pv" style='display:none'></span><i class="fa fa-eye fa-fw"></i><%- __('readCount') %>:  <span id="busuanzi_value_page_pv" ></span><% } %>

2.8 添加評(píng)論插件

由于這個(gè)主題自帶了gittalk、gitment、valine等評(píng)論插件，所以我們只需要對(duì)應(yīng)插件參數(shù)就行了，這個(gè)博客用的是gittalk，如下：
[外鏈圖片轉(zhuǎn)存失敗(img-J270HDhP-1566969757048)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/13.png)]

當(dāng)然也可以用其他評(píng)論插件，只需要配置對(duì)應(yīng)項(xiàng)就是了，不是自帶的可以照著網(wǎng)上的教程自己弄一個(gè)，類似的文章有很多，可以搜索關(guān)鍵字就行了。

2.9 添加網(wǎng)易云音樂(lè)BGM

寫文章的時(shí)候，想插入一段BGM怎么辦？

其實(shí)我們可以借助一些在線音樂(lè)的外鏈播放方式，首先打開(kāi)網(wǎng)易云網(wǎng)頁(yè)版，找到想聽(tīng)的歌曲，然后點(diǎn)擊生成外鏈：
[外鏈圖片轉(zhuǎn)存失敗(img-W7n4YtiA-1566969757049)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/14.png)]

可能你會(huì)遇到問(wèn)題，比如點(diǎn)擊生成外鏈會(huì)提示你由于版權(quán)原因，不能生成，那么可以用下面辦法(目前還有效，不知道后面會(huì)不會(huì)失效)

(以 Chrome為例，其他瀏覽器類似) 打開(kāi)歌單頁(yè)面，在“生成外鏈播放器”上右擊，點(diǎn)擊審查元素（檢查）ctrl+shift+i；

接著找到生成外鏈播放器這段文字直接雙擊復(fù)制前面的/outchain/2/20707408/

[外鏈圖片轉(zhuǎn)存失敗(img-pOPSMgVE-1566969757049)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/15.png)]

然后在瀏覽器地址欄修改歌單鏈接，示例：http://music.163.com/#//outchain/2/20707408/

然后就轉(zhuǎn)到外鏈設(shè)置頁(yè)面了。

復(fù)制如下代碼：

粘貼到文章對(duì)應(yīng)位置就行了，為了美觀，設(shè)置一下居中，具體代碼如下：

<div align="middle">這里粘貼剛剛復(fù)制的代碼</div>

2.10 博客音樂(lè)板塊

如果我們自己寫博客寫疲勞了，想放松一下聽(tīng)聽(tīng)歌又不想切出博客主頁(yè)，那么我們可以自己定制一個(gè)博客音樂(lè)播放界面，把自己喜歡的歌曲都放進(jìn)來(lái)，這里用到是Aplayer插件，但是歌曲來(lái)源需要我們自己定義，但是，因?yàn)楦鞔笠魳?lè)平臺(tái)，由于版權(quán)原因，很多歌曲是不支持外鏈播放的，難道我們就必須每首歌下載然后上傳云空間，再獲取詞曲封面么？這就比較麻煩了。其實(shí)不然，研究了半個(gè)小時(shí)，我發(fā)現(xiàn)可以采取下面的辦法，很方便：

首先我們找到網(wǎng)易云在線平臺(tái)，任意找到一首歌點(diǎn)進(jìn)去播放，可以在地址欄拿到音樂(lè)ID號(hào)
然后通過(guò)下面網(wǎng)址：http://music.163.com/song/media/outer/url?id=XXXXXX.mp3， XXXXXX就是歌曲ID號(hào)，每一首歌我們只需要換掉這個(gè)ID號(hào)就行了,就相當(dāng)于每一首的外鏈了
最后封面圖也可以按F12去找頁(yè)面元素的鏈接，填到對(duì)應(yīng)的musics.jason文件中就可以，批量填入，聽(tīng)到好聽(tīng)的歌曲隨時(shí)更換隨時(shí)新增，很方便。

操作如下圖：
[外鏈圖片轉(zhuǎn)存失敗(img-aCBTIHOn-1566969757049)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/17.png)]

2.11 增加emoji支持

為博客新增對(duì)emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件來(lái)支持 emoji表情的生成，把對(duì)應(yīng)的markdown emoji語(yǔ)法（::,例如：? :smile:）轉(zhuǎn)變成會(huì)跳躍的emoji表情，安裝命令如下：

npm install hexo-filter-github-emojis --save

在 Hexo 根目錄下的 _config.yml 文件中，新增以下的配置項(xiàng)：

githubEmojis:enable: trueclassName: github-emojiinject: truestyles:customEmojis:

執(zhí)行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中對(duì)應(yīng)位置看到你用emoji語(yǔ)法寫的表情了。
如下圖：
[外鏈圖片轉(zhuǎn)存失敗(img-S104o6y4-1566969757050)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/18.gif)]

2.12 Valine評(píng)論模塊修改

matery主題已經(jīng)集成Valine評(píng)論模塊，在主題配置文件.yml中配置相應(yīng)的字段就行了。enable: true，XXX字段是需要自己注冊(cè)登錄leancloud官網(wǎng)，創(chuàng)建應(yīng)用然后獲取appId和appKey，其他參數(shù)根據(jù)自己的需求修改就是，如下：

valine:enable: trueappId: XXXXXXXXXXXXXXXXXXXXXappKey: XXXXXXXXXXXXXXXXXXXXnotify: trueverify: truevisitor: trueavatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hidepageSize: 10placeholder: 'just go go' # Comment Box placeholder

注意：Valine用在matery主題上有個(gè)bug就是第一條評(píng)論位置會(huì)錯(cuò)位

如下圖：
[外鏈圖片轉(zhuǎn)存失敗(img-naNuZ7cx-1566969757050)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/19.png)]

解決辦法：
F12開(kāi)發(fā)者模式，控制臺(tái)定位bug位置，修改參數(shù)，調(diào)整對(duì)應(yīng)主題源文件參數(shù)，得以解決，如下圖示：

[外鏈圖片轉(zhuǎn)存失敗(img-wyK2iFbk-1566969757050)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/20.png)]
[外鏈圖片轉(zhuǎn)存失敗(img-MsSn7GuV-1566969757050)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/21.png)]

2.13 添加博客動(dòng)態(tài)標(biāo)簽

原理就是給博客增加一個(gè)事件判斷，如下圖所示：

[外鏈圖片轉(zhuǎn)存失敗(img-t3duvAUn-1566969757050)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/40.png)]
[外鏈圖片轉(zhuǎn)存失敗(img-Mi9CYdFA-1566969757051)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/41.png)]

打開(kāi)博客主題文件夾，路徑：themes/matery/layout/layout.ejs，在對(duì)應(yīng)位置添加如下代碼：

然后 hexo clean && hexo g 即可。

第三部分優(yōu)化

hexo添加各種優(yōu)化功能，比如SEO優(yōu)化等。
待續(xù)…

1. 網(wǎng)站SEO優(yōu)化

網(wǎng)站推廣是一個(gè)比較煩人的事情，特別是對(duì)于專心搞技術(shù)的來(lái)說(shuō)，可能就不是很擅長(zhǎng)，那么怎么才能讓別人知道我們網(wǎng)站呢？也就是說(shuō)我們需要想辦法讓別人通過(guò)搜索就可以搜索到博客的內(nèi)容，給我們帶來(lái)自然流量，這就需要seo優(yōu)化,讓我們的站點(diǎn)變得對(duì)搜索引擎友好

SEO是由英文Search Engine Optimization縮寫而來(lái)，中文意譯為“搜索引擎優(yōu)化”。SEO是指通過(guò)站內(nèi)優(yōu)化比如網(wǎng)站結(jié)構(gòu)調(diào)整、網(wǎng)站內(nèi)容建設(shè)、網(wǎng)站代碼優(yōu)化等以及站外優(yōu)化。

1.1 讓百度收錄你的站點(diǎn)

首先要做的就是讓各大搜索引擎收錄你的站點(diǎn)，我們?cè)趧偨ㄕ镜臅r(shí)候各個(gè)搜索引擎是沒(méi)有收錄我們網(wǎng)站的，在搜索引擎中輸入site:<域名>,如果如下圖所示就是說(shuō)明我們的網(wǎng)站并沒(méi)有被百度收錄。我們可以直接點(diǎn)擊下面的“網(wǎng)址提交”來(lái)提交我們的網(wǎng)站

1.1.1 驗(yàn)證網(wǎng)站所有權(quán)

登錄百度站長(zhǎng)搜索資源平臺(tái)：http://zhanzhang.baidu.com，只要有百度旗下的賬號(hào)就可以登錄，登錄成功之后在站點(diǎn)管理中點(diǎn)擊添加網(wǎng)站然后輸入你的站點(diǎn)地址。

注意，這里需要輸入我們自己購(gòu)買的域名,不能使用xxx.github.io之類域名.因?yàn)間ithub是不允許百度的spider（蜘蛛）爬取github上的內(nèi)容的，所以如果想讓你的站點(diǎn)被百度收錄，只能使用自己購(gòu)買的域名

[外鏈圖片轉(zhuǎn)存失敗(img-mOS0Ihmx-1566969757051)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/23.png)]

在填完網(wǎng)址選擇完網(wǎng)站的類型之后需要驗(yàn)證網(wǎng)站的所有權(quán)，驗(yàn)證網(wǎng)站所有權(quán)的方式有三種：

文件驗(yàn)證。
html標(biāo)簽驗(yàn)證
CNAME解析驗(yàn)證（推薦使用）

[外鏈圖片轉(zhuǎn)存失敗(img-Kp2qmkQy-1566969757051)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/24.png)]

其實(shí)使用哪一種方式都可以，都是比較簡(jiǎn)單的。

但是一定要注意，使用文件驗(yàn)證文件存放的位置需要放在sourc文件夾下，如果是html文件那么hexo就會(huì)將其編譯，所以必須要在html頭部加上的layout:false，這樣就不會(huì)被hexo編譯。（如果驗(yàn)證文件是txt格式的就不需要）

其他兩種方式也是很簡(jiǎn)單的，個(gè)人推薦文件驗(yàn)證和CNAME驗(yàn)證，CNAME驗(yàn)證最為簡(jiǎn)單，只需加一條解析就好~

[外鏈圖片轉(zhuǎn)存失敗(img-gm26bZrH-1566969757052)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/26.png)]

1.1.2 生成網(wǎng)站地圖

我們需要使用npm自動(dòng)生成網(wǎng)站的sitemap，然后將生成的sitemap提交到百度和其他搜索引擎

1.1.2.1 安裝sitemap插件

npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save

1.1.2.2 修改博客配置文件

在根目錄配置文件.yml中修改url為你的站點(diǎn)地址

# URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' # url: https://shw2018.github.io/ url: https://sunhwee.com root: / permalink: :year/:month/:day/:title/ permalink_defaults:

執(zhí)行完hexo g命令之后就會(huì)在網(wǎng)站根目錄生成sitemap.xml文件和baidusitemap.xml文件，可以通過(guò)：https://sunhwee.com/baidusitemap.xml, 查看該文件是否生成，其中sitemap.xml文件是搜索引擎通用的文件，baidusitemap.xml是百度專用的sitemap文件。

1.1.3 向百度提交鏈接

然后我們就可以將我們生成的sitemap文件提交給百度，還是在百度站長(zhǎng)平臺(tái)，找到鏈接提交，這里我們可以看到有兩種提交方式，自動(dòng)提交和手動(dòng)提交，自動(dòng)提交又分為主動(dòng)推送、自動(dòng)推送和sitemap

如何選擇鏈接提交方式

主動(dòng)推送：最為快速的提交方式，推薦您將站點(diǎn)當(dāng)天新產(chǎn)出鏈接立即通過(guò)此方式推送給百度，以保證新鏈接可以及時(shí)被百度收錄。

自動(dòng)推送：最為便捷的提交方式，請(qǐng)將自動(dòng)推送的JS代碼部署在站點(diǎn)的每一個(gè)頁(yè)面源代碼中，部署代碼的頁(yè)面在每次被瀏覽時(shí)，鏈接會(huì)被自動(dòng)推送給百度。可以與主動(dòng)推送配合使用。

sitemap：您可以定期將網(wǎng)站鏈接放到sitemap中，然后將sitemap提交給百度。百度會(huì)周期性的抓取檢查您提交的sitemap，對(duì)其中的鏈接進(jìn)行處理，但收錄速度慢于主動(dòng)推送。

手動(dòng)提交：一次性提交鏈接給百度，可以使用此種方式。

一般主動(dòng)提交比手動(dòng)提交效果好，這里介紹主動(dòng)提交的三種方法

從效率上來(lái)說(shuō)：

主動(dòng)推送>自動(dòng)推送>sitemap

[外鏈圖片轉(zhuǎn)存失敗(img-Mrot0hKU-1566969757052)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/27.png)]

1.1.3.1 設(shè)置主動(dòng)推送

安裝插件hexo-baidu-url-submit

npm install hexo-baidu-url-submit --save

然后再根目錄的配置文件中新增字段

baidu_url_submit:count: 80 # 提交最新的一個(gè)鏈接host: www.sunhwee.com # 在百度站長(zhǎng)平臺(tái)中注冊(cè)的域名token: xxxxxxxxxxxxxx # 請(qǐng)注意這是您的秘鑰，所以請(qǐng)不要把博客源代碼發(fā)布在公眾倉(cāng)庫(kù)里!path: baidu_urls.txt # 文本文檔的地址，新鏈接會(huì)保存在此文本文檔里

再加入新的deploy：

deploy: - type: baidu_url_submitter

如圖所示：

**注意,這里多個(gè) type 的寫法應(yīng)該這么寫,前面那個(gè) type 是我推送到 Github 與 Coding的page頁(yè)面的配置,后面再講這個(gè)。

密鑰的獲取位置在網(wǎng)頁(yè)抓取中的鏈接提交這一塊,如下所示:[外鏈圖片轉(zhuǎn)存失敗(img-SmcKal7c-1566969757052)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/29.png)]

這樣執(zhí)行hexo deploy的時(shí)候，新的鏈接就會(huì)被推送了。

推送成功時(shí),會(huì)有如下終端提示

各種不同的推送反饋?zhàn)侄握f(shuō)明在這里查看,一般來(lái)說(shuō),推送失敗基本都是地址不相符造成的,我們只需對(duì)比baidu_url_submit在public中生成的baidu_urls.txt的地址,與自己填寫在host字段中的地址對(duì)比看是否一樣即可。

1.1.3.2 設(shè)置自動(dòng)推送

在主題配置文件下設(shè)置,將baidu_push設(shè)置為true:

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO baidu_push: true

然后主題文件目錄加入下面代碼，一般在目錄/themes/matery/layout/_partial中的head.ejs中加入下面JS代碼（有可能你的目錄不是這樣，原理類似），這樣全站都有了：

<% if (theme.baidu_push) { %><script>(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if (curProtocol === 'https') {bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; }else {bp.src = 'http://push.zhanzhang.baidu.com/push.js';}var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();</script> <% } %>

這樣每次訪問(wèn)博客中的頁(yè)面就會(huì)自動(dòng)向百度提交sitemap

1.1.3.3 sitemap方式

將我們上一步生成的sitemap文件提交到百度就可以了~
[外鏈圖片轉(zhuǎn)存失敗(img-TgXoC1qS-1566969757053)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/31.png)]
我記得被百度收錄過(guò)程還是蠻久的，一度讓我以為我的方法有問(wèn)題，提交鏈接在站長(zhǎng)工具中有顯示大概是有兩天的時(shí)候，站點(diǎn)被百度收錄大概花了半個(gè)月= =，讓大家看一下現(xiàn)在的成果
在百度搜索site:sunhwee.com已經(jīng)可以搜索到結(jié)果
[外鏈圖片轉(zhuǎn)存失敗(img-t1oMaMh4-1566969757053)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/32.png)]
在搜索框輸入域名也可以找到站點(diǎn)
[外鏈圖片轉(zhuǎn)存失敗(img-3AeKc0Jx-1566969757053)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/33.png)]
輸入關(guān)鍵字的名字也可以在第二頁(yè)就找到呢，好開(kāi)森~
[外鏈圖片轉(zhuǎn)存失敗(img-WaPH2HmX-1566969757053)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/34.png)]

1.2 讓google收錄你的站點(diǎn)

1.2.1 操作步驟

相比于百度，google的效率實(shí)在不能更快，貌似十分鐘左右站點(diǎn)就被收錄了，其實(shí)方法是和百度是一樣的。

google站點(diǎn)平臺(tái)：https://www.google.com/webmasters/

注冊(cè)賬號(hào)
驗(yàn)證站點(diǎn)
提交sitemap

向 google 添加 sitemap 后: 進(jìn)入 Google Search Console - 抓取 - 站點(diǎn)地圖,點(diǎn)擊「添加/測(cè)試站點(diǎn)地圖」,輸入你的博客網(wǎng)址. 若無(wú)報(bào)錯(cuò)則站點(diǎn)地圖提交成功

[外鏈圖片轉(zhuǎn)存失敗(img-Ph38CGDT-1566969757054)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/35.png)]

一步一步來(lái)就好，過(guò)不了過(guò)久就可以被google收錄了
[外鏈圖片轉(zhuǎn)存失敗(img-KlDVOU43-1566969757054)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/36.png)]

[外鏈圖片轉(zhuǎn)存失敗(img-TBiaqGeL-1566969757054)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/38.png)]

1.2.2 提交 robots.txt:

robots.txt 是一種存放于網(wǎng)站根目錄下的 ASCII 編碼的文本文件，它的作用是告訴搜索引擎此網(wǎng)站中哪些內(nèi)容是可以被爬取的，哪些是禁止爬取的。robots.txt 放在博客目錄下的 source 文件夾中，博客生成后在站點(diǎn)目錄 /public/ 下。

我的 robots.txt 文件內(nèi)容如下：

User-agent: * Allow: / Allow: /archives/ Allow: /categories/ Allow: /about/ Disallow: /js/ Disallow: /css/ Disallow: /fonts/ Disallow: /vendors/

robots.txt 文件更新至網(wǎng)站后可進(jìn)入 Google Search Console - 抓取 - robots.txt 測(cè)試工具進(jìn)行測(cè)試。

這里部分參考自Hexo博客搜索 SEO優(yōu)化-谷歌篇

1.3 讓其他搜索引擎收錄你的站點(diǎn)

除了百度和google兩大搜索引擎，還有搜狗、360等其他的搜索引擎，流程都是一樣的，大家就自行選擇添加哈，這里就不再贅述了~

1.4 優(yōu)化你的url

seo搜索引擎優(yōu)化認(rèn)為，網(wǎng)站的最佳結(jié)構(gòu)是用戶從首頁(yè)點(diǎn)擊三次就可以到達(dá)任何一個(gè)頁(yè)面，但是我們使用hexo編譯的站點(diǎn)打開(kāi)文章的url是：sitename/year/mounth/day/title四層的結(jié)構(gòu)，這樣的url結(jié)構(gòu)很不利于seo，爬蟲就會(huì)經(jīng)常爬不到我們的文章，于是，我們需要優(yōu)化一下網(wǎng)站文章url

方案一：

我們可以將url直接改成sitename/title的形式，并且title最好是用英文，在根目錄的配置文件下修改permalink如下：

url: https://sunhwee.com root: / permalink: :title.html permalink_defaults:

方案二：

使用插件優(yōu)化url

插件hexo-abbrlink實(shí)現(xiàn)了這個(gè)功能，它將原來(lái)的URL地址重新進(jìn)行了進(jìn)制轉(zhuǎn)換和再編碼。

安裝hexo-abbrlink。

npm install hexo-abbrlink --save

配置博客根目錄下的_config.yml文件。

# permalink: :title/ permalink: archives/:abbrlink.html abbrlink:alg: crc32 # 算法：crc16(default) and crc32rep: hex # 進(jìn)制：dec(default) and hex

運(yùn)行hexo clean和hexo g命令來(lái)重新生成文件看看，可以清楚的看到，URL結(jié)構(gòu)成功變?yōu)榱?層。

1.5 其他seo優(yōu)化

seo優(yōu)化應(yīng)該說(shuō)是一個(gè)收益延遲的行為，可能你做的優(yōu)化短期內(nèi)看不到什么效果，但是一定要堅(jiān)持，seo優(yōu)化也是有很深的可以研究的東西，從我們最初的網(wǎng)站設(shè)計(jì)，和最基礎(chǔ)的標(biāo)簽的選擇都有很大的關(guān)系，網(wǎng)站設(shè)計(jì)就如我們剛剛說(shuō)的，要讓用戶點(diǎn)擊三次可以到達(dá)網(wǎng)站的任何一個(gè)頁(yè)面，要增加高質(zhì)量的外鏈，增加相關(guān)推薦（比如說(shuō)我們經(jīng)常見(jiàn)到右側(cè)本站的最高閱讀的排名列表），然后就是給每一個(gè)頁(yè)面加上keyword和描述

在代碼中，我們應(yīng)該寫出能讓瀏覽器識(shí)別的語(yǔ)義化HTML，這樣有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重；并且對(duì)外鏈設(shè)置nofollow標(biāo)簽，避免spider爬著爬著就爬出去了（減少網(wǎng)站的跳出率），并且我們要盡量在一些比較大的網(wǎng)站增加我們站點(diǎn)的曝光率，因?yàn)閟pider會(huì)經(jīng)常訪問(wèn)大站，比如我們?cè)诰蚪鸬燃夹g(shù)社區(qū)發(fā)表文章中帶有我們的站點(diǎn)，這樣spider是很有可能爬到我們中的站點(diǎn)的，so…

網(wǎng)站外鏈的推廣度、數(shù)量和質(zhì)量
網(wǎng)站的內(nèi)鏈足夠強(qiáng)大
網(wǎng)站的原創(chuàng)質(zhì)量
網(wǎng)站的年齡時(shí)間
網(wǎng)站的更新頻率（更新次數(shù)越多越好）
網(wǎng)站的服務(wù)器
網(wǎng)站的流量：流量越高網(wǎng)站的權(quán)重越高
網(wǎng)站的關(guān)鍵詞排名：關(guān)鍵詞排名越靠前，網(wǎng)站的權(quán)重越高
網(wǎng)站的收錄數(shù)量：網(wǎng)站百度收錄數(shù)量越多，網(wǎng)站百度權(quán)重越高
網(wǎng)站的瀏覽量及深度：用戶體驗(yàn)越好，網(wǎng)站的百度權(quán)重越高

2. 優(yōu)化代碼塊樣式

由于代碼高亮插件prism_plugin的樣式?jīng)]有行號(hào)顯示和代碼塊整體復(fù)制功能，不是很方便，為了優(yōu)化觀感和易用性，我們可以對(duì)其進(jìn)行修改：
待續(xù)…

2.1 給代碼塊開(kāi)啟行號(hào)

我們?cè)谂渲梦募?yml中找到prism_plugin配置項(xiàng)line_number: false（# default false）改為true，開(kāi)啟行號(hào)，但是在我們這個(gè)matery主題中中是無(wú)效的，有bug需要改一下matery.css樣式參數(shù),在第95行位置將：

pre {padding: 1.5rem !important;margin: 1rem 0 !important;background: #272822;overflow: auto;border-radius: 0.35rem;tab-size: 4; }

改為：

pre {padding: 1.5rem 1.5rem 1.5rem 3.3rem !important;margin: 1rem 0 !important;background: #272822;overflow: auto;border-radius: 0.35rem;tab-size: 4; }

注釋掉緊接著的code代碼塊里面的font-size項(xiàng)，如下：

code {padding: 1px 5px;font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;/*font-size: 0.91rem;*/color: #e96900;background-color: #f8f8f8;border-radius: 2px; }

好了這下可以顯示行號(hào)了，如圖：[外鏈圖片轉(zhuǎn)存失敗(img-PDmiyRd6-1566969757055)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/39.png)]

2.2 添加代碼塊復(fù)制功能

3. 優(yōu)化網(wǎng)站加載速度

3.1 優(yōu)化圖片加載

issue問(wèn)題：
優(yōu)化網(wǎng)站加載邏輯問(wèn)題：圖片最后加載，加入圖片懶加載方法

hexo-lazyload-image的作用原理是講你博客里面img標(biāo)簽的src屬性替換為一個(gè)loading image，把真實(shí)的圖片地址放在data-origin屬性下面。然后當(dāng)你的網(wǎng)頁(yè)翻到那張圖片時(shí)（也就是圖片在窗口中完全可見(jiàn)時(shí)），他會(huì)有一段js用data-origin的內(nèi)容替換src，打到懶加載的目的。

一般情況下懶加載和gallery插件會(huì)發(fā)生沖突，比如按照我上面所說(shuō)，最終結(jié)果就會(huì)變成，可能只有第一張圖片在gallery中打開(kāi)是原圖，右翻左翻都會(huì)是那張loading image，需要你掌握js，可以修改matery.js里面的內(nèi)容，甚至可能換一個(gè)gallery，比如photosiwpe之類的

解決方法：修改/themes/matery/source/js中的matery.js文件

第103行：

$('#articleContent, #myGallery').lightGallery({selector: '.img-item',// 啟用字幕subHtmlSelectorRelative: true,showThumbByDefault: false //這句加上 });

后面加上：

$(document).find('img[data-original]').each(function(){$(this).parent().attr("href", $(this).attr("data-original")); });

再裝個(gè)插件，https://github.com/Troy-Yang/hexo-lazyload-image
在博客根目錄配置.yml文件加入對(duì)應(yīng)字段，如下：

# lazyload configuration 2019.08.23 lazyload:enable: true onlypost: falseloadingImg: # eg ./images/loading.gif

好了，這樣實(shí)現(xiàn)了博客網(wǎng)站的圖片懶加載。

3.2 Gulp實(shí)現(xiàn)代碼壓縮

Gulp實(shí)現(xiàn)代碼壓縮，以提升網(wǎng)頁(yè)加載速度。

1 首先我們需要安裝Gulp插件和5個(gè)功能模塊，依次運(yùn)行下面的兩條命令。

npm install gulp -g #安裝gulp # 安裝功能模塊 npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save # 額外的功能模塊 npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del --save

2 接下來(lái)在博客的根目錄下新建gulpfile.js文件，并復(fù)制下面的內(nèi)容到文件中。

3 最后 hexo clean && hexo g && gulp && hexo d 就可以了。

注意，很可能你會(huì)運(yùn)行到第三步，也就是運(yùn)行g(shù)ulp壓縮命令時(shí)會(huì)報(bào)錯(cuò)，如圖所示：

[外鏈圖片轉(zhuǎn)存失敗(img-BXjTAZN6-1566969757055)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/42.png)]

那是因?yàn)間ulp安裝的本地版本和hexo自帶的版本不對(duì)應(yīng)導(dǎo)致，第三步gulp壓縮可以用下面命令強(qiáng)制使用本地版本：

node ./node_modules/gulp/bin/gulp.js

3. 一些注意事項(xiàng)

3.1 備份博客源文件

有時(shí)候我們想換一臺(tái)電腦繼續(xù)寫博客，最簡(jiǎn)單的方法就是把博客整個(gè)目錄拷貝過(guò)去，就是這么暴力。不過(guò)，這種方法有個(gè)問(wèn)題就是要是那天電腦崩了，本地源文件丟失了，比較麻煩，所以這時(shí)候就可以將博客目錄下的所有源文件都上傳到github上面。

首先在github博客倉(cāng)庫(kù)下新建一個(gè)分支hexo，然后git clone到本地，把.git文件夾拿出來(lái)，放在博客根目錄下。

然后git branch -b hexo切換到hexo分支，然后git add .，然后git commit -m "xxx"，最后git push origin hexo提交就行了。

具體效果可以看我的博客源文件倉(cāng)庫(kù)：傳送門。

大家也可以先用下文hexo安裝方法安裝完hexo，然后直接git clone -b hexo https://github.com/shw2018/shw2018.github.io.git克隆我的所有源文件，這是我目前修改完的基本沒(méi)bug的定制化的博客，可以直接拿來(lái)用。

持續(xù)更新中…，如果遇到問(wèn)題歡迎聯(lián)系我，在文章最后評(píng)論區(qū)【留言和討論】，當(dāng)然，歡迎文章最后打賞投幣，請(qǐng)博主一杯冰闊樂(lè)，笑～

參考：

Blinkfox
godweiyang

總結(jié)

以上是生活随笔為你收集整理的Hexo+Github: 博客网站搭建完全教程(看这篇就够了)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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