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

编程问答

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

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

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

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

文章目錄

閱讀須知
博客開源
前言
第一部分搭建
- Hexo搭建步驟
- 1. 安裝Git
- 2. 安裝nodejs
- 3. 安裝Hexo
- 4. 注冊Github賬號創(chuàng)建個人倉庫
- 5. 生成SSH添加到GitHub
- 6. 將hexo部署到GitHub
- 7. 設(shè)置個人域名
- 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頁面
  - 2.3“關(guān)于”頁面增加簡歷（可選）
  - 2.4 數(shù)學(xué)公式渲染和代碼高亮
  - 2.5 增加建站時間
  - 2.6 修改不蒜子初始化計數(shù)
  - 2.7 添加動漫人物
  - 2.8 添加評論插件
  - 2.9 添加網(wǎng)易云音樂BGM
  - 2.10 博客音樂板塊
  - 2.11 增加emoji支持
  - 2.12 Valine評論模塊修改
  - 2.13 添加博客動態(tài)標(biāo)簽
第三部分優(yōu)化
- 1. 網(wǎng)站SEO優(yōu)化
- - 1.1 讓百度收錄你的站點
  - - 1.1.1 驗證網(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è)置主動推送
      - 1.1.3.2 設(shè)置自動推送
      - 1.1.3.3 **sitemap**方式
  - 1.2 讓google收錄你的站點
  - - 1.2.1 操作步驟
    - 1.2.2 提交 robots.txt:
  - 1.3 讓其他搜索引擎收錄你的站點
  - 1.4 優(yōu)化你的url
  - 1.5 其他seo優(yōu)化
- 2. 優(yōu)化代碼塊樣式
- - 2.1 給代碼塊開啟行號
  - 2.2 添加代碼塊復(fù)制功能
- 3. 優(yōu)化網(wǎng)站加載速度
- - 3.1 優(yōu)化圖片加載
  - 3.2 Gulp實現(xiàn)代碼壓縮
- 3. 一些注意事項
- - 3.1 備份博客源文件

閱讀須知

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

博客開源

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

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

簡單使用方法：

star 本項目倉庫^o

安裝Git, 安裝nodeJS

你可以直接fork一份源碼到你的倉庫，clone到本地

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

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

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

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

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

最后，如果項目和教程對你有所幫助或者你看見了還算比較喜歡，歡迎給我的該github項目倉庫star，謝謝您！

前言

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

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

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

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

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

教程大致分三個部分，

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

第一部分搭建

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

Hexo搭建步驟

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

1. 安裝Git

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

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

順便說一下，windows在git安裝完后，就可以直接使用git bash來敲命令行了，不用自帶的cmd，cmd有點難用。

**linux：**對linux來說實在是太簡單了，因為最早的git就是在linux上編寫的，只需要一行代碼

sudo apt-get install git

安裝完成后在命令提示符中輸入git --version來查看一下版本驗證是否安裝成功。

2. 安裝nodejs

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

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

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

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

不過不推薦命令行安裝，有時候有問題，建議直接到官網(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ù)制下面兩行到剛打開的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)，使用包的命令時可能會提示找不到命令，沒關(guān)系，在用戶目錄下終端執(zhí)行下面命令(固定寫法)：

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

這樣我們在所有用戶下，都可以使用npm，也可以使用npm安裝的包的命令。成功的將nodejs安裝并配置到全局環(huán)境下。

安裝完后，打開命令行終端，輸入:

node -v npm -v

檢查一下有沒有安裝成功

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

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

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

3. 安裝Hexo

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

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

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

定位到該目錄下，輸入npm install -g hexo-cli安裝Hexo。可能會有幾個報錯，無視它就行。

npm install -g hexo-cli

安裝完后輸入hexo -v驗證是否安裝成功。

至此hexo就安裝完了。

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

hexo init MyBlog

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

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

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

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

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

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

然后瀏覽器打開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. 注冊Github賬號創(chuàng)建個人倉庫

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

打開https://github.com/，新建一個項目倉庫New repository，如下所示：

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

要創(chuàng)建一個和你用戶名相同的倉庫，后面加.http://github.io，只有這樣，將來要部署到GitHub page的時候，才會被識別，也就是http://xxxx.github.io，其中xxx就是你注冊GitHub的用戶名。例如我的：http://shw2018.github.io

5. 生成SSH添加到GitHub

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

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

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

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

可以用以下兩條，檢查一下你有沒有輸對

git config user.name git config user.email

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

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

ssh-keygen -t rsa -C "youremail"

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

cat ~/.ssh/id_rsa.pub

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

打開github，在頭像下面點擊settings，再點擊SSH and GPG keys，新建一個SSH，名字隨便取一個都可以，把你的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)起來，也就是將hexo生成的文章部署到GitHub上，打開博客根目錄下的_config.yml文件，這是博客的配置文件，在這里你可以修改與博客配置相關(guān)的各種信息。

修改最后一行的配置：

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

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

這個時候需要先安裝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時可能要你輸入username和password。

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

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

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

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

首先你得購買一個專屬域名，xx云都能買，看你個人喜好了。

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

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

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

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

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

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

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

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

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

第二部分定制

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

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各種庫的目錄，public是生成的網(wǎng)頁文件目錄，scaffolds里面就三個文件，存儲著新文章和新頁面的初始設(shè)置，source是我們最常用到的一個目錄，里面存放著文章、各類頁面、圖像等文件，themes存放著主題文件，一般也用不到。

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

1.2 hexo基本配置

在文件根目錄下的_config.yml，就是整個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)站使用的語言timezone網(wǎng)站時區(qū)。Hexo 默認(rèn)使用您電腦的時區(qū)。時區(qū)列表。比如說：America/New_York, Japan, 和 UTC 。

其中，description主要用于SEO，告訴搜索引擎一個關(guā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，也就是你生成某個文章時的那個鏈接格式。

比如我新建一個文章叫temp.md，那么這個時候他自動生成的地址就是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這個文件夾下，在官網(wǎng)上有很多個主題，默認(rèn)給你安裝的是lanscape這個主題。當(dāng)你需要更換主題時，在官網(wǎng)上下載，把主題的文件放在themes文件夾下，再修改這個主題參數(shù)就可以了。

1.2.3 Front-matter

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

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

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

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

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

--- 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)容，如果這個屬性有值，文章卡片摘要就顯示這段文字，否則程序會自動截取文章的部分內(nèi)容作為摘要 tags: - Hexo - Github - 博客 categories: - 軟件安裝與配置 ---

1.2.4 layout（布局）

1.2.4.1 post

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

hexo new XXX

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

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

而new這個命令其實是：

hexo new [layout] <title>

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

1.2.4.2 page

如果你想另起一頁，那么可以使用

hexo new page newpage

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

1.2.4.3 draft

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

hexo new draft newdraft

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

hexo server --draft

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

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

hexo publish draft newdraft

就會自動把newdraft.md發(fā)送到post中。

2. 更換主題

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

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

特性：

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

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

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

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ǔ)充了，修改對應(yīng)信息就可以了。

2.2 添加404頁面

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第553行的em:處替換成：

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

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

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

$y = f(x)$

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

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

注意上面花括號之間有空格！

2.5 增加建站時間

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

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

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

因為不蒜子至今未開放注冊，所以沒辦法在官網(wǎng)修改初始化，只能自己動手了。和上一條一樣，我們在/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>本站總訪問量 <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>本站總訪問量 <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> <% } %>

其實就是增加了兩個style='display:none'而已。

2.7 添加動漫人物

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

第一步：

npm install --save hexo-helper-live2d

第二步：

npm install live2d-widget-model-shizuku

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

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

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ù)覽出效果了，但是有個注意的地方，這個動漫人物最好不要和不蒜子同時使用，不然不蒜子會顯示不出來。至于解決辦法后續(xù)更新。

解決動漫人物和不蒜子不能同時使用的bug（2019.08.11）：

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

<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %> <span id="busuanzi_container_site_pv" style='display:none'></span><i class="fa fa-heart-o"></i>本站總訪問量 <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> 人.<% } %>

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

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

打開themes\matery\layout\_partial中的post-detail.ejs，找到對應(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 添加評論插件

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

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

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

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

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

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

(以 Chrome為例，其他瀏覽器類似) 打開歌單頁面，在“生成外鏈播放器”上右擊，點擊審查元素（檢查）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è)置頁面了。

復(fù)制如下代碼：

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

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

2.10 博客音樂板塊

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

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

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

2.11 增加emoji支持

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

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

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

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

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

2.12 Valine評論模塊修改

matery主題已經(jīng)集成Valine評論模塊，在主題配置文件.yml中配置相應(yīng)的字段就行了。enable: true，XXX字段是需要自己注冊登錄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主題上有個bug就是第一條評論位置會錯位

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

解決辦法：
F12開發(fā)者模式，控制臺定位bug位置，修改參數(shù)，調(diào)整對應(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 添加博客動態(tài)標(biāo)簽

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

[外鏈圖片轉(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)]

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

然后 hexo clean && hexo g 即可。

第三部分優(yōu)化

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

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

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

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

1.1 讓百度收錄你的站點

首先要做的就是讓各大搜索引擎收錄你的站點，我們在剛建站的時候各個搜索引擎是沒有收錄我們網(wǎng)站的，在搜索引擎中輸入site:<域名>,如果如下圖所示就是說明我們的網(wǎng)站并沒有被百度收錄。我們可以直接點擊下面的“網(wǎng)址提交”來提交我們的網(wǎng)站

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

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

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

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

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

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

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

其實使用哪一種方式都可以，都是比較簡單的。

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

其他兩種方式也是很簡單的，個人推薦文件驗證和CNAME驗證，CNAME驗證最為簡單，只需加一條解析就好~

[外鏈圖片轉(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自動生成網(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為你的站點地址

# 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命令之后就會在網(wǎng)站根目錄生成sitemap.xml文件和baidusitemap.xml文件，可以通過：https://sunhwee.com/baidusitemap.xml, 查看該文件是否生成，其中sitemap.xml文件是搜索引擎通用的文件，baidusitemap.xml是百度專用的sitemap文件。

1.1.3 向百度提交鏈接

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

如何選擇鏈接提交方式

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

自動推送：最為便捷的提交方式，請將自動推送的JS代碼部署在站點的每一個頁面源代碼中，部署代碼的頁面在每次被瀏覽時，鏈接會被自動推送給百度。可以與主動推送配合使用。

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

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

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

從效率上來說：

主動推送>自動推送>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è)置主動推送

安裝插件hexo-baidu-url-submit

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

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

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

再加入新的deploy：

deploy: - type: baidu_url_submitter

如圖所示：

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

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

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

推送成功時,會有如下終端提示

各種不同的推送反饋字段說明在這里查看,一般來說,推送失敗基本都是地址不相符造成的,我們只需對比baidu_url_submit在public中生成的baidu_urls.txt的地址,與自己填寫在host字段中的地址對比看是否一樣即可。

1.1.3.2 設(shè)置自動推送

在主題配置文件下設(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> <% } %>

這樣每次訪問博客中的頁面就會自動向百度提交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)]
我記得被百度收錄過程還是蠻久的，一度讓我以為我的方法有問題，提交鏈接在站長工具中有顯示大概是有兩天的時候，站點被百度收錄大概花了半個月= =，讓大家看一下現(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)]
在搜索框輸入域名也可以找到站點
[外鏈圖片轉(zhuǎn)存失敗(img-3AeKc0Jx-1566969757053)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/33.png)]
輸入關(guān)鍵字的名字也可以在第二頁就找到呢，好開森~
[外鏈圖片轉(zhuǎn)存失敗(img-WaPH2HmX-1566969757053)(https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/34.png)]

1.2 讓google收錄你的站點

1.2.1 操作步驟

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

google站點平臺：https://www.google.com/webmasters/

注冊賬號
驗證站點
提交sitemap

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

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

一步一步來就好，過不了過久就可以被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 文件夾中，博客生成后在站點目錄 /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 測試工具進(jìn)行測試。

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

1.3 讓其他搜索引擎收錄你的站點

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

1.4 優(yōu)化你的url

seo搜索引擎優(yōu)化認(rèn)為，網(wǎng)站的最佳結(jié)構(gòu)是用戶從首頁點擊三次就可以到達(dá)任何一個頁面，但是我們使用hexo編譯的站點打開文章的url是：sitename/year/mounth/day/title四層的結(jié)構(gòu)，這樣的url結(jié)構(gòu)很不利于seo，爬蟲就會經(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實現(xiàn)了這個功能，它將原來的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命令來重新生成文件看看，可以清楚的看到，URL結(jié)構(gòu)成功變?yōu)榱?層。

1.5 其他seo優(yōu)化

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

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

網(wǎng)站外鏈的推廣度、數(shù)量和質(zhì)量
網(wǎng)站的內(nèi)鏈足夠強(qiáng)大
網(wǎng)站的原創(chuàng)質(zhì)量
網(wǎng)站的年齡時間
網(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)站的瀏覽量及深度：用戶體驗越好，網(wǎng)站的百度權(quán)重越高

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

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

2.1 給代碼塊開啟行號

我們在配置文件.yml中找到prism_plugin配置項line_number: false（# default false）改為true，開啟行號，但是在我們這個matery主題中中是無效的，有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項，如下：

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; }

好了這下可以顯示行號了，如圖：[外鏈圖片轉(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問題：
優(yōu)化網(wǎng)站加載邏輯問題：圖片最后加載，加入圖片懶加載方法

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

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

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

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

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

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

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

1 首先我們需要安裝Gulp插件和5個功能模塊，依次運(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 接下來在博客的根目錄下新建gulpfile.js文件，并復(fù)制下面的內(nèi)容到文件中。

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

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

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

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

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

3. 一些注意事項

3.1 備份博客源文件

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

首先在github博客倉庫下新建一個分支hexo，然后git clone到本地，把.git文件夾拿出來，放在博客根目錄下。

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

具體效果可以看我的博客源文件倉庫：傳送門。

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

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

參考：

Blinkfox
godweiyang

總結(jié)

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

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