如何建設一個自己的網站(博客)

果你有創建一個自己的網站這個沖動，要搭建一個屬于自己的網絡空間平臺，但是苦于不知道從何下手，或者因為不知道水有多深，又或者覺得那是做IT，搞程序的人的專利，望而卻步，本文絕對適合你。在開始之前我想說的是：搭建一個自己的網站沒有你想的那么復雜，只要想搞(做)，不懂問我。

本文不適合以下讀者：

不喜歡甚至討厭互聯網
沒有恒心，三分鐘熱度
差錢，對學習不肯投入
差時間，不愿意為自己所做的事情投入時間
懶人或不善于學習
重度游戲玩家

如果有上面情況之一，強烈建議不要再往下閱讀。。。否則后果自負 ~！

前提條件：

有時間，保證基本的網站內容的更新，每周寫幾篇自己定。
有激情，沒有激情什么都玩不動。
善于學習，很多時候自己遇到的問題，需要自己親自解決。
基本的網站運行服務器和域名費用。

參考以下目錄：

[TOC]

1. 為什么要創建一個自己的網站

創建一個網站對于每個人都有自己的原因，假設你是互聯網積極分子熱衷于關注和研究互聯網，創建一個自己的網站讓你對互聯網的理解更加深刻。對于熱愛寫文章和日志的朋友，那是一個與分享自己知識見識和生活點點滴滴的地方。對于玩自媒體的朋友，個人網站不僅能實現自我營銷，還可以降低自我營銷成本，下面分別列出創建一個自己的網站的好處和壞處。

1.1. 好處

創建個人的一個網上名片。可以將自己的個人網站定義為自己的個人簡歷，傳統簡歷不能非常完整地展示一個人的個人經歷和工作案例，但是個人網站可以做到。
自我營銷。對于文學創作者、營銷策劃人員、新媒體自媒體工作者而言，個人網站十分必要。自媒體、新媒體平臺是一旦賬號被封或者被盜，之前的努力可能就白費了。個人網站就不會陷入這樣的困境了。
降低自我營銷成本。在新媒體自媒體等平臺的廣告投放價格是十分昂貴的，即便是需要使用自己的域名，一整年的花銷加起來也幾百元。
記錄人生。除了前面那些比較功利的意義和作用，個人網站也是非常好的記錄人生的工具。入住其它共公博客平臺，也要承擔平臺關閉后數據遺失的風險。個人網站則很好地規避了這一點，并且能更好地保護好自己的數據和文章。
挑戰自我。嘗試著自己去做個網站，其實也是對自己的一個挑戰。很多人，包括文章開頭那個小伙伴都覺得做網站是件非常困難的事情，我們可能不會寫代碼，可能不會做UI設計，甚至于我們都不知道什么是切圖什么是HTML。但是只要你會使用網絡搜索，做個網站早就沒有那么難了。

1.2. 壞處

費錢，至少要購買域名和服務器。
費神，還需要懂一點網絡或IT技術基礎，有時服務被攻擊或宕機時需要處理。
費時，自己的網站或博客是要花時間不斷地學文章內容的，并不是拿來擺設的。

相比于創建個人網站的好處以及創建個人網站的決心，這些不算什么事，并且也值得我們去折騰。

2. 定位

有關如何定位自己的個人網站，這得從創建個人網站的目的(初衷)。常見的一些個人網站的目的：

記錄日志，比如：小孩生長記錄日志，寵物日志，花卉日志等等。
網絡文章寫作，比如：連載小說，自媒體等
專用于各種優惠碼，打折返現等
其他因人而異
......

3. 創建網站的步驟

前面講了一堆創建個人網站的原因，優缺點等，現在來講一點真正的干貨。如何搭建一個屬于自己網站，估計很多人(無論技術或非技術)都有這個沖動想去搭建一個屬于自己的網絡小天地，但是苦于不知道從何下手，或者因為不知道水有多深，而望而卻步，其實搭建網站沒有想象的那么復雜，這里只要按照下面操作就沒有問題。一共就五個步驟：

1.注冊域名
2.購買空間
3.服務器環境安裝(網站代碼部署)
4.提交備案
5.域名解析

3.1 注冊域名

這里以阿里云阿里云為例(還可以選擇其他服務商：騰訊云，百度云以及國外的)。
注冊域名很簡單，只要花錢就好了，也不貴，.com 的域名首年是45塊(推薦使用：.com的域名)，最新出來的top域名10塊都不到，首先打開網址：http://www.aliyun.com/ ，域名注冊請點擊，參考下面圖 -

注冊域名

查詢你想要注冊的域名，比如：yiibai123.com，只需要輸入yiibai123搜索即可，為什么還要搜索？這是因為有的域名可能已經被別人注冊了，只要別人還沒有注冊你都可以注冊。搜索結果如下所示 -

QQ截圖20180125171331.png

點擊加入清單即可，如果沒有登錄，它會要求你登錄(如果沒有賬號，可以先注冊一個賬號，登錄即可)，假設這里你已經登錄賬號了，在左側如下所示 -

QQ截圖20180125171331.png

點擊去結算，付款就可以了。

3.2 購買服務器

想要穩定地運行網站(博客)，需要購買一個自己的服務器，服務器不需要太好，但要求是獨立主機。如果不知道怎么買沒有關系，其實阿里云有專門針對這種應用級的服務器。可以通過參考以下鏈接購買：

輕量應用服務器 ：http://common-buy.aliyun.com/?spm=5176.8064714.850240.pricedetail1111.7da62946Mv8XAQ&commodityCode=swas#/buy ，如下圖所示 -

輕量應用服務器

3.3 網站備案

根據工信部《互聯網信息服務管理辦法》(國務院 292 號令)，網站在未完成備案之前，不能指向大陸境內服務器開通訪問。如果您的網站托管在中國大陸節點服務器，或者開通 CDN 服務，就必須申請 ICP(互聯網內容提供商)備案。若網站服務器為非中國大陸節點，則不用申請備案。

ICP 包含兩種類型：

1. ICP 備案： 對于單純的資訊性并且不涉及直銷的網站，需要申請 ICP 備案。ICP 備案可通過網站托管服務器提供商或網絡空間服務商(如電信、移動、聯通等)進行申請。阿里云 ICP 備案操作可分為：首次備案、接入備案、新增網站備案(原備案不在阿里云) 和新增網站備案(原備案在阿里云)。注意：個人網站屬于這一類型。

2. 經營性 ICP 許可證： 對于商品或服務的在線平臺或第三方賣方，需獲得商用許可證。要申請經營性 ICP 許可證，您必須先有一個有效的 ICP 備案號。經營性備案需用戶自己到當地管理局相關部門進行辦理，服務商可協助提供資質以及接入協議。

有關網站備案要，可通過：http://beian.aliyun.com/ 了解，需要注意的是：不同服務器提供商都有自己的備案接入。不可以跨服務商備案，也就是說：買了阿里的服務器不能在阿里云之外的服務商備案。

4.4 服務器環境安裝

服務器的安裝比較簡單，這里主要介紹：Window系統和Linux系統服務器，對于那些不太熟悉IT技術的朋友，建議在購買服務器時選擇Window系統，這樣可以避開不必要的麻煩。而如果有些IT技術基礎，又想了解和學習Linux系統的話，建議安裝CentOS或Ubuntu。

Window安裝PHP環境：WampServer等集成環境安裝，搜索下載WampServer軟件，安裝到一個目錄，比如：C:/wamp。
Linux安裝PHP環境：http://www.yiibai.com/nginx/lnmp.html

4.5 安裝博客系統

用來做網站或個人博客的免費系統的系統實在太多了，這些系統經過多年的發展，都十分健壯和強大。下面介紹幾種主流的免費博客系統。

Wordpress ：當之無愧的王者，國內國外都有眾多用戶，插件，模板數量眾多，seo方面做得也非常好。
bo-blog：國內php技術的知名博客系統，有很多漂亮的中國化的模板。
Z-BlogPHP：好一陣子沒有更新系統代碼，不影響使用。
emlog : emlog是一款基于PHP和MySQL的功能強大的博客及CMS建站系統。致力于為您提供快速、穩定，且在使用上又極其簡單、舒適的內容創作及站點搭建服務。

推薦： Wordpress，有很多用戶，有什么問題都能比較容易找到解決辦法。

安裝很簡單，下載系統的源代碼，并解壓代碼文件到安裝WampServer的安裝目錄(如前面所述的：C:/Wamp 目錄)之下，通過在服務器上的瀏覽器訪問：http://localhost 進行安裝。

4.6 域名解析

假設您已經注冊了域名，并且成功安裝了博客系統，對外公開的博客網站的必須工作就是要解析域名，首先登錄您的阿里云賬號，進入到控制臺，在側菜單項中找到域名和網站(萬網) -> 域名，如下所示 -

0180125171331.png

選擇你要解析的域名，然后點擊解析鏈接，轉到如下的界面 -

0180125171331.png

剛進入，應該是一個空的解析列表，通過點擊添加解析，在彈出的輸入框中，填寫相關數據值，如下所示 -

0180125171331.png

通過添加上面一條記錄后，就可以在瀏覽器中通過域名來訪問你的網站了。

注意： 上面添加的解析，并不能馬上生效，TTL值指定生效的時間，在這個選項選中的是 10分鐘，表示需要添加提交10分鐘后才能生效。

一點題外的話：

如果對互聯網感興趣，建議趁早建立一個個人的獨立博客，如果能早建我的個人博客五年，那么現在我的博客一定會發展的應該是另外一個級別了。所以，趁年輕，趁有想法，趁有時間，早點建立一個自己的獨立博客，打造個人品牌吧！

作者：易百教程
鏈接：https://www.jianshu.com/p/ed151681b067
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

phinx是一款支持多種編程語言的文檔生成工具，可以由reStructuredText或Markdown文檔生成HTML靜態網頁，并且自動生成索引，可以作為個人網站、博客，或者制作電子教程、書籍等。

1.安裝Python

Python官網（https://www.python.org/）下載安裝Python3+。

2.安裝sphinx

pip install sphinx

3.安裝markdown支撐的模塊

pip install sphinx-markdown-tables

4.安裝主題模板

pip install sphinx-rtd-theme

5.創建項目文件夾test并進入

6.啟動Sphinx，輸入以下信息

Project name:Python教程
Author name(s):zbxx.net
Project language [en]:zh_CN

啟動Sphinx后會在項目文件夾test中創建如下文件結構：

7.編輯 source/conf.py 文件

extensions=['recommonmark','sphinx_markdown_tables']
html_theme='sphinx_rtd_theme'

8.將markdown筆記文件Python.md放到source目錄下

9.編輯 source/index.rst 文件，加入python.md

10.生成HTML

make html

生成靜態HTML網頁文件，位置：build\html，我們就擁有了一個完整的靜態網站。

打開index.html預覽效果，可以本地使用或上傳個人網站。

markdown筆記修改后，需要清空HTML，重新生成。

make clean

人博客網站搭建完全教程(看這篇就夠了)

閱讀須知

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

博客開源

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

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

簡單使用方法：

star 本項目倉庫o
安裝Git, 安裝nodeJS
你可以直接fork一份源碼到你的倉庫，clone到本地
在本地博客倉庫運行npm i命令安裝依賴包
修改配置信息，改成自己的信息
運行命令hexo clean（清除生成文件），hexo g（生成網頁）， hexo s（本地預覽），hexo d（部署）

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

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

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

前言

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

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

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

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

簡單總結：Hexo, 產品成熟，使用簡單，功能強大，有豐富的各種插件資源；但，像發布后臺、站內搜索，評論系統類似訴求，雖然有對應的工具，但也需要自己折騰下，后續我們一步一步介紹。

教程大致分三個部分，

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

第一部分搭建

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

Hexo搭建步驟

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

1. 安裝Git

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

windows：到git官網上下載.exe文件,Download git,安裝選項還是全部默認，只不過最后一步添加路徑時選擇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：下載穩定版或者最新版都可以Node.js，安裝選項全部默認，一路點擊Next。
最后安裝好之后，按Win+R打開命令提示符，輸入node -v和npm -v，如果出現版本號，那么就安裝成功了。

linux：命令行安裝：

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

不過不推薦命令行安裝，有時候有問題，建議直接到官網去下載編譯好的壓縮文件，如下所示:

然后解壓到你指定的文件夾即可，比如我解壓到我系統的/home/shw/MySoftwares目錄下了，如圖:

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

配置一下環境變量

sudo vim /etc/profile

復制下面兩行到剛打開的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

保存后退出，再執行下面命令將環境變量生效：

source /etc/profile

將目錄軟鏈接到全局環境下（命令后面的/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)，使用包的命令時可能會提示找不到命令，沒關系，在用戶目錄下終端執行下面命令(固定寫法)：

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

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

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

node -v
npm -v

檢查一下有沒有安裝成功

添加國內鏡像源

如果沒有梯子的話，可以使用阿里的國內鏡像進行加速。

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

3. 安裝Hexo

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

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

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

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

npm install -g hexo-cli

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

至此hexo就安裝完了。

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

hexo init MyBlog

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

cd MyBlog      //進入這個MyBlog文件夾
npm install

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

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

這樣本地的網站配置也弄好了，輸入hexo g生成靜態網頁，然后輸入hexo s打開本地服務器，

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

然后瀏覽器打開http://localhost:4000/，就可以看到我們的博客啦，效果如下：

按ctrl+c關閉本地服務器。

4. 注冊Github賬號創建個人倉庫

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

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

然后如下圖所示，輸入自己的項目名字，后面一定要加.github.io后綴，README初始化也要勾上。

要創建一個和你用戶名相同的倉庫，后面加.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才能知道你是不是對應它的賬戶。例如我的：

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

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

git config user.name
git config user.email

然后創建SSH,一路回車

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

ssh-keygen -t rsa -C "youremail"

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

cat ~/.ssh/id_rsa.pub

將輸出的內容復制到框中，點擊確定保存。

打開github，在頭像下面點擊settings，再點擊SSH and GPG keys，新建一個SSH，名字隨便取一個都可以，把你的id_rsa.pub里面的信息復制進去。如圖：

在git bash輸入ssh -T git@github.com，如果如下圖所示，出現你的用戶名，那就成功了。

6. 將hexo部署到GitHub

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

修改最后一行的配置：

deploy:
  type: git
  repository: https://github.com/shw2018/shw2018.github.io
  branch: master

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

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

npm install hexo-deployer-git --save

然后

hexo clean
hexo generate
hexo deploy

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

注意deploy時可能要你輸入username和password。

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

7. 設置個人域名

現在你的個人網站的地址是yourname.github.io，如果覺得這個網址逼格不太夠，這就需要你設置個人域名了。但是需要花錢。

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

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

這篇以騰訊云為例，騰訊云官網購買：

然后實名認證后進入騰訊云控制臺，點云解析進去，找到你剛買的域名，點進去添加兩條解析記錄，如下圖所示：

然后打開你的github博客項目，點擊settings，拉到下面Custom domain處，填上你自己的域名，保存：

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

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

8. 寫文章、發布文章

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

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

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

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

第二部分定制

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

1. Hexo相關目錄文件

1.1 博客目錄構成介紹

從上圖可以看出，博客的目錄結構如下：

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

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

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

1.2 hexo基本配置

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

1.2.1 網站

參數描述title網站標題subtitle網站副標題description網站描述author您的名字language網站使用的語言timezone網站時區。Hexo 默認使用您電腦的時區。時區列表。比如說：America/New_York, Japan, 和 UTC 。

其中，description主要用于SEO，告訴搜索引擎一個關于您站點的簡單描述，通常建議在其中包含您網站的關鍵詞。author參數用于主題顯示文章的作者。

1.2.2 網址

參數描述url網址root網站根目錄 permalink文章的永久鏈接格式permalink_defaults永久鏈接中各部分的默認值

在這里，你需要把url改成你的網站域名。

permalink，也就是你生成某個文章時的那個鏈接格式。

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

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

參數結果
: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

再往下翻，中間這些都默認就好了。

theme: landscap

theme就是選擇什么主題，也就是在themes這個文件夾下，在官網上有很多個主題，默認給你安裝的是lanscape這個主題。當你需要更換主題時，在官網上下載，把主題的文件放在themes文件夾下，再修改這個主題參數就可以了。

1.2.3 Front-matter

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

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

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

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

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

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

1.2.4 layout（布局）

1.2.4.1 post

當你每一次使用代碼

hexo new XXX

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

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

而new這個命令其實是：

hexo new [layout] <title>

只不過這個layout默認是post罷了。

1.2.4.2 page

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

hexo new page newpage

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

1.2.4.3 draft

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

hexo new draft newdraft

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

hexo server --draft

在本地端口中開啟服務預覽。

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

hexo publish draft newdraft

就會自動把newdraft.md發送到post中。

2. 更換主題

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

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

特性：

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

他的介紹文檔寫得非常的詳細，還有中英文兩個版本。效果圖如下：

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

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參數不用你自己補充了，修改對應信息就可以了。

2.2 添加404頁面

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

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

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

<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 75vh;
    }
</style>

<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <%=page.description %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 每天切換 banner 圖.  Switch banner image every day.
    $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>

2.3“關于”頁面增加簡歷（可選）

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

<div class="card">
    <div class="card-content">
        <div class="card-content article-card-content">
                <div class="title center-align" data-aos="zoom-in-up">
                    <i class="fa fa-address-book"></i>  <%- __('myCV') %>
                </div>
                <div id="articleContent" data-aos="fade-up">
                    <%- page.content %>
                </div>
        </div>
    </div>
</div>

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

2.4 數學公式渲染和代碼高亮

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

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

2.4.2 加數學公式顯示

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

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>

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

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

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

第553行的em:處替換成：

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

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

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

$y=f(x)$

行間公式：

y=fg1(x)y=fg1(x)

代碼：

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

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

2.5 增加建站時間

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

<script language=javascript>
    function siteTime() {
        window.setTimeout("siteTime()", 1000);
        var seconds=1000;
        var minutes=seconds * 60;
        var hours=minutes * 60;
        var days=hours * 24;
        var years=days * 365;
        var today=new Date();
        var todayYear=today.getFullYear();
        var todayMonth=today.getMonth() + 1;
        var todayDate=today.getDate();
        var todayHour=today.getHours();
        var todayMinute=today.getMinutes();
        var todaySecond=today.getSeconds();
        /* Date.UTC() -- 返回date對象距世界標準時間(UTC)1970年1月1日午夜之間的毫秒數(時間戳)
        year - 作為date對象的年份，為4位年份值
        month - 0-11之間的整數，做為date對象的月份
        day - 1-31之間的整數，做為date對象的天數
        hours - 0(午夜24點)-23之間的整數，做為date對象的小時數
        minutes - 0-59之間的整數，做為date對象的分鐘數
        seconds - 0-59之間的整數，做為date對象的秒數
        microseconds - 0-999之間的整數，做為date對象的毫秒數 */
        var t1=Date.UTC(2017, 09, 11, 00, 00, 00); //北京時間2018-2-13 00:00:00
        var t2=Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
        var diff=t2 - t1;
        var diffYears=Math.floor(diff / years);
        var diffDays=Math.floor((diff / days) - diffYears * 365);
        var diffHours=Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
        var diffMinutes=Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
        var diffSeconds=Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);
        document.getElementById("sitetime").innerHTML="本站已運行 " +diffYears+" 年 "+diffDays + " 天 " + diffHours + " 小時 " + diffMinutes + " 分鐘 " + diffSeconds + " 秒";
    }/*因為建站時間還沒有一年，就將之注釋掉了。需要的可以取消*/
    siteTime();
</script>

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

<span id="sitetime"></span>

2.6 修改不蒜子初始化計數

因為不蒜子至今未開放注冊，所以沒辦法在官網修改初始化，只能自己動手了。和上一條一樣，我們在
/themes/matery/layout/_partial里的footer.ejs文件最后加上：

<script>
    $(document).ready(function () {

        var int=setInterval(fixCount, 50);  // 50ms周期檢測函數
        var pvcountOffset=80000;  // 初始化首次數據
        var uvcountOffset=20000;

        function fixCount() {
            if (document.getElementById("busuanzi_container_site_pv").style.display !="none") {
                $("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + pvcountOffset);
                clearInterval(int);
            }
            if ($("#busuanzi_container_site_pv").css("display") !="none") {
                $("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + uvcountOffset); // 加上初始數據 
                clearInterval(int); // 停止檢測
            }
        }
    });
</script>

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

<% 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">
        人次, 訪客數 <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'>
        人次, 訪客數 <span id="busuanzi_value_site_uv" class="white-color"></span> 人.
    </span>
<% } %>

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

2.7 添加動漫人物

其實三步就行了，不用像網上有些教程那么復雜。

第一步：

npm install --save hexo-helper-live2d

第二步：

npm install live2d-widget-model-shizuku

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

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

live2d:
    enable: true
    scriptFrom: local
    pluginRootPath: live2dw/
    pluginJsPath: lib/
    pluginModelPath: assets/
    tagMode: false
    log: false
    model:
        use: live2d-widget-model-shizuku
    display:
        position: right
        width: 150
        height: 300
    mobile:
        show: false
    react:
        opacity: 0.7

然后hexo g在hexo s就能預覽出效果了，但是有個注意的地方，這個動漫人物最好不要和不蒜子同時使用，不然不蒜子會顯示不出來。至于解決辦法后續更新。

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

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

<% 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>
        人次, 訪客數 <span id="busuanzi_value_site_uv" class="white-color"></span> 人.
    
<% } %>

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

<span id="busuanzi_container_site_pv" style='display:none'></span>
<span id="busuanzi_container_site_uv" style='display:none'></span>

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

打開themes\matery\layout\_partial中的post-detail.ejs，找到對應代碼字段：

<% 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等評論插件，所以我們只需要對應插件參數就行了，這個博客用的是gittalk，如下：

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

2.9 添加網易云音樂BGM

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

其實我們可以借助一些在線音樂的外鏈播放方式，首先打開網易云網頁版，找到想聽的歌曲，然后點擊生成外鏈：

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

(以 Chrome為例，其他瀏覽器類似) 打開歌單頁面，在“生成外鏈播放器”上右擊，點擊審查元素（檢查）ctrl+shift+i；
接著找到生成外鏈播放器這段文字直接雙擊復制前面的/outchain/2/20707408/

然后在瀏覽器地址欄修改歌單鏈接，示例：http://music.163.com/#//outchain/2/20707408/
然后就轉到外鏈設置頁面了。

復制如下代碼：

粘貼到文章對應位置就行了，為了美觀，設置一下居中，具體代碼如下：

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

2.10 博客音樂板塊

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

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

操作如下圖：

2.11 增加emoji支持

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

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

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

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

執行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中對應位置看到你用emoji語法寫的表情了。
如下圖：

2.12 Valine評論模塊修改

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

valine:
  enable: true
  appId: XXXXXXXXXXXXXXXXXXXXX
  appKey: XXXXXXXXXXXXXXXXXXXX
  notify: true
  verify: true
  visitor: true
  avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
  pageSize: 10
  placeholder: 'just go go' # Comment Box placeholder

注意：Valine用在matery主題上有個bug就是第一條評論位置會錯位

如下圖：

解決辦法：
F12開發者模式，控制臺定位bug位置，修改參數，調整對應主題源文件參數，得以解決，如下圖示：

2.13 添加博客動態標簽

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

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

<script type="text/javascript">
    var OriginTitile=document.title,
        st;
    document.addEventListener("visibilitychange", function () {
        document.hidden ? (document.title="看不見我~看不見我~", clearTimeout(st)) : (document.title=    "(??????) ?被發現了～", st=setTimeout(function () {
                document.title=OriginTitile
            }, 3e3))
    })
</script>

然后 hexo clean && hexo g 即可。

第三部分優化

hexo添加各種優化功能，比如SEO優化等。
待續......

1. 網站SEO優化

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

SEO是由英文Search Engine Optimization縮寫而來，中文意譯為“搜索引擎優化”。SEO是指通過站內優化比如網站結構調整、網站內容建設、網站代碼優化等以及站外優化。

1.1 讓百度收錄你的站點

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

1.1.1 驗證網站所有權

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

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

在填完網址選擇完網站的類型之后需要驗證網站的所有權，驗證網站所有權的方式有三種：

文件驗證。
html標簽驗證
CNAME解析驗證（推薦使用）

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

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

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

1.1.2 生成網站地圖

我們需要使用npm自動生成網站的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:

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

1.1.3 向百度提交鏈接

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

如何選擇鏈接提交方式
主動推送：最為快速的提交方式，推薦您將站點當天新產出鏈接立即通過此方式推送給百度，以保證新鏈接可以及時被百度收錄。自動推送：最為便捷的提交方式，請將自動推送的JS代碼部署在站點的每一個頁面源代碼中，部署代碼的頁面在每次被瀏覽時，鏈接會被自動推送給百度。可以與主動推送配合使用。sitemap：您可以定期將網站鏈接放到sitemap中，然后將sitemap提交給百度。百度會周期性的抓取檢查您提交的sitemap，對其中的鏈接進行處理，但收錄速度慢于主動推送。手動提交：一次性提交鏈接給百度，可以使用此種方式。

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

從效率上來說：

主動推送>自動推送>sitemap

1.1.3.1 設置主動推送

安裝插件hexo-baidu-url-submit

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

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

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

再加入新的deploy：

deploy:
- type: baidu_url_submitter

如圖所示：

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

密鑰的獲取位置在網頁抓取中的鏈接提交這一塊,如下所示:

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

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

在主題配置文件下設置,將baidu_push設置為true:

1.1.3.2 設置自動推送

在主題配置文件下設置,將baidu_push設置為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.3sitemap方式

將我們上一步生成的sitemap文件提交到百度就可以了~

百度收錄過程還是蠻久的，需要大家耐心等待一下，提交鏈接在站長工具中有顯示大概是要兩天，站點被百度收錄大概花了半個月==，收錄了之后，可以在百度搜索site: xxxxx.com可以搜索到結果

1.2 讓google收錄你的站點

1.2.1 操作步驟

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

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

注冊賬號
驗證站點
提交sitemap

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

一步一步來就好，過不了過久就可以被google收錄了

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

我的 robots.txt 文件內容如下：

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

索引擎收錄你的站點

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

1.4 優化你的url

seo搜索引擎優化認為，網站的最佳結構是用戶從首頁點擊三次就可以到達任何一個頁面，但是我們使用hexo編譯的站點打開文章的url是：
sitename/year/mounth/day/title四層的結構，這樣的url結構很不利于seo，爬蟲就會經常爬不到我們的文章，于是，我們需要優化一下網站文章url

方案一：

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

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

方案二：

使用插件優化url

插件hexo-abbrlink實現了這個功能，它將原來的URL地址重新進行了進制轉換和再編碼。

安裝hexo-abbrlink。

npm install hexo-abbrlink --save

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

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

運行hexo clean和hexo g命令來重新生成文件看看，可以清楚的看到，URL結構成功變為了3層。

1.5 其他seo優化

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

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

網站外鏈的推廣度、數量和質量
網站的內鏈足夠強大
網站的原創質量
網站的年齡時間
網站的更新頻率（更新次數越多越好）
網站的服務器
網站的流量：流量越高網站的權重越高
網站的關鍵詞排名：關鍵詞排名越靠前，網站的權重越高
網站的收錄數量：網站百度收錄數量越多，網站百度權重越高
網站的瀏覽量及深度：用戶體驗越好，網站的百度權重越高

2. 優化代碼塊樣式

由于代碼高亮插件prism_plugin的樣式沒有行號顯示和代碼塊整體復制功能，不是很方便，為了優化觀感和易用性，我們可以對其進行修改：
待續......

2.1 給代碼塊開啟行號

我們在配置文件.yml中找到prism_plugin配置項line_number: false（# default false）改為true，開啟行號，但是在我們這個matery主題中中是無效的，有bug需要改一下matery.css樣式參數,在第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;
}

好了這下可以顯示行號了，如圖：

2.2 添加代碼塊復制功能

3. 優化網站加載速度

3.1 優化圖片加載

issue問題：
優化網站加載邏輯問題：圖片最后加載，加入圖片懶加載方法

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

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

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

好了，這樣實現了博客網站的圖片懶加載。

3.2 Gulp實現代碼壓縮

Gulp實現代碼壓縮，以提升網頁加載速度。

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

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文件，并復制下面的內容到文件中。

var gulp=require("gulp");
var debug=require("gulp-debug");
var cleancss=require("gulp-clean-css"); //css壓縮組件
var uglify=require("gulp-uglify"); //js壓縮組件
var htmlmin=require("gulp-htmlmin"); //html壓縮組件
var htmlclean=require("gulp-htmlclean"); //html清理組件
var imagemin=require("gulp-imagemin"); //圖片壓縮組件
var changed=require("gulp-changed"); //文件更改校驗組件
var gulpif=require("gulp-if"); //任務 幫助調用組件
var plumber=require("gulp-plumber"); //容錯組件（發生錯誤不跳出任務，并報出錯誤內容）
var isScriptAll=true; //是否處理所有文件，(true|處理所有文件)(false|只處理有更改的文件)
var isDebug=true; //是否調試顯示 編譯通過的文件
var gulpBabel=require("gulp-babel");
var es2015Preset=require("babel-preset-es2015");
var del=require("del");
var Hexo=require("hexo");
var hexo=new Hexo(process.cwd(), {}); // 初始化一個hexo對象

// 清除public文件夾
gulp.task("clean", function() {
  return del(["public/**/*"]);
});

// 下面幾個跟hexo有關的操作，主要通過hexo.call()去執行，注意return
// 創建靜態頁面 （等同 hexo generate）
gulp.task("generate", function() {
  return hexo.init().then(function() {
    return hexo
      .call("generate", {
        watch: false
      })
      .then(function() {
        return hexo.exit();
      })
      .catch(function(err) {
        return hexo.exit(err);
      });
  });
});

// 啟動Hexo服務器
gulp.task("server", function() {
  return hexo
    .init()
    .then(function() {
      return hexo.call("server", {});
    })
    .catch(function(err) {
      console.log(err);
    });
});

// 部署到服務器
gulp.task("deploy", function() {
  return hexo.init().then(function() {
    return hexo
      .call("deploy", {
        watch: false
      })
      .then(function() {
        return hexo.exit();
      })
      .catch(function(err) {
        return hexo.exit(err);
      });
  });
});

// 壓縮public目錄下的js文件
gulp.task("compressJs", function() {
  return gulp
    .src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
    .pipe(gulpif(!isScriptAll, changed("./public")))
    .pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
    .pipe(plumber())
    .pipe(
      gulpBabel({
        presets: [es2015Preset] // es5檢查機制
      })
    )
    .pipe(uglify()) //調用壓縮組件方法uglify(),對合并的文件進行壓縮
    .pipe(gulp.dest("./public")); //輸出到目標目錄
});

// 壓縮public目錄下的css文件
gulp.task("compressCss", function() {
  var option={
    rebase: false,
    //advanced: true,               //類型：Boolean 默認：true [是否開啟高級優化（合并選擇器等）]
    compatibility: "ie7" //保留ie7及以下兼容寫法 類型：String 默認：''or'*' [啟用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
    //keepBreaks: true,             //類型：Boolean 默認：false [是否保留換行]
    //keepSpecialComments: '*'      //保留所有特殊前綴 當你用autoprefixer生成的瀏覽器前綴，如果不加這個參數，有可能將會刪除你的部分前綴
  };
  return gulp
    .src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
    .pipe(gulpif(!isScriptAll, changed("./public")))
    .pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
    .pipe(plumber())
    .pipe(cleancss(option))
    .pipe(gulp.dest("./public"));
});

// 壓縮public目錄下的html文件
gulp.task("compressHtml", function() {
  var cleanOptions={
    protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略處理
    unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊處理
  };
  var minOption={
    collapseWhitespace: true, //壓縮HTML
    collapseBooleanAttributes: true, //省略布爾屬性的值  <input checked="true"/>==> <input />
    removeEmptyAttributes: true, //刪除所有空格作屬性值    <input id="" />==> <input />
    removeScriptTypeAttributes: true, //刪除<script>的type="text/javascript"
    removeStyleLinkTypeAttributes: true, //刪除<style>和<link>的type="text/css"
    removeComments: true, //清除HTML注釋
    minifyJS: true, //壓縮頁面JS
    minifyCSS: true, //壓縮頁面CSS
    minifyURLs: true //替換頁面URL
  };
  return gulp
    .src("./public/**/*.html")
    .pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
    .pipe(plumber())
    .pipe(htmlclean(cleanOptions))
    .pipe(htmlmin(minOption))
    .pipe(gulp.dest("./public"));
});

// 壓縮 public/uploads 目錄內圖片
gulp.task("compressImage", function() {
  var option={
    optimizationLevel: 5, //類型：Number  默認：3  取值范圍：0-7（優化等級）
    progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
    interlaced: false, //類型：Boolean 默認：false 隔行掃描gif進行渲染
    multipass: false //類型：Boolean 默認：false 多次優化svg直到完全優化
  };
  return gulp
    .src("./public/medias/**/*.*")
    .pipe(gulpif(!isScriptAll, changed("./public/medias")))
    .pipe(gulpif(isDebug, debug({ title: "Compress Images:" })))
    .pipe(plumber())
    .pipe(imagemin(option))
    .pipe(gulp.dest("./public"));
});
// 執行順序： 清除public目錄 -> 產生原始博客內容 -> 執行壓縮混淆 -> 部署到服務器
gulp.task(
  "build",
  gulp.series(
    "clean",
    "generate",
    "compressHtml",
    "compressCss",
    "compressJs",
    "compressImage",
    gulp.parallel("deploy")
  )
);

// 默認任務
gulp.task(
  "default",
  gulp.series(
    "clean",
    "generate",
    gulp.parallel("compressHtml", "compressCss", "compressImage", "compressJs")
  )
);
//Gulp4最大的一個改變就是gulp.task函數現在只支持兩個參數，分別是任務名和運行任務的函數

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

注意，很可能你會運行到第三步，也就是運行gulp壓縮命令時會報錯，如圖所示：

那是因為gulp安裝的本地版本和hexo自帶的版本不對應導致，第三步gulp壓縮可以用下面命令強制使用本地版本：

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

3. 一些注意事項

3.1 備份博客源文件

有時候我們想換一臺電腦繼續寫博客，最簡單的方法就是把博客整個目錄拷貝過去，就是這么暴力。不過，這種方法有個問題就是要是那天電腦崩了，本地源文件丟失了，比較麻煩，所以這時候就可以將博客目錄下的所有源文件都上傳到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的定制化的博客，可以直接拿來用。

在線咨詢

上一篇：頂級前端大佬都在看哪些JavaScript書籍？
下一篇：網站制作充分利用CSS讓你的網站制作更加出眾-

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

如何建設一個自己的網站(博客)

人博客網站搭建完全教程(看這篇就夠了)

閱讀須知

博客開源

前言

第一部分 搭建

Hexo搭建步驟

1. 安裝Git

2. 安裝nodejs

添加國內鏡像源

3. 安裝Hexo

4. 注冊Github賬號創建個人倉庫

5. 生成SSH添加到GitHub

6. 將hexo部署到GitHub

7. 設置個人域名

8. 寫文章、發布文章

第二部分 定制

1. Hexo相關目錄文件

1.1 博客目錄構成介紹

1.2 hexo基本配置

1.2.1 網站

1.2.2 網址

1.2.3 Front-matter

1.2.4 layout（布局）

2. 更換主題

2.1 新建文章模板修改

2.2 添加404頁面

2.3“關于”頁面增加簡歷（可選）

2.4 數學公式渲染和代碼高亮

2.5 增加建站時間

2.6 修改不蒜子初始化計數

2.7 添加動漫人物

2.8 添加評論插件

2.9 添加網易云音樂BGM

2.10 博客音樂板塊

2.11 增加emoji支持

2.12 Valine評論模塊修改

2.13 添加博客動態標簽

第三部分 優化

1. 網站SEO優化

1.1 讓百度收錄你的站點

1.1.1 驗證網站所有權

1.1.2 生成網站地圖

1.1.2.1 安裝sitemap插件

1.1.2.2 修改博客配置文件

1.1.3 向百度提交鏈接

1.1.3.1 設置主動推送

1.1.3.2 設置自動推送

1.1.3.3sitemap方式

1.2 讓google收錄你的站點

1.2.1 操作步驟

索引擎收錄你的站點

1.4 優化你的url

1.5 其他seo優化

2. 優化代碼塊樣式

2.1 給代碼塊開啟行號

2.2 添加代碼塊復制功能

3. 優化網站加載速度

3.1 優化圖片加載

3.2 Gulp實現代碼壓縮

3. 一些注意事項

3.1 備份博客源文件

您的項目需求

第一部分搭建

第二部分定制

第三部分優化