騰訊前端開發工程師，教你極速搭建一個個人博客網站

者： bookerzhao，騰訊 CSIG web前端開發工程師

Github 為開源項目提供了用于靜態頁面展示的 Pages 服務，很多開發者都在上面托管了自己的靜態網站和博客，不少開源項目的案例和文檔頁面也采用了這種方式。不過由于 Pages 的 CDN 節點大部分在國外，在國內的訪問速度不是很理想，不少開發者希望能提升網站在國內的訪問速度和穩定性，今天會介紹如何配合 Github Action 的持續集成服務和 云開發 Github Action 擴展，自動部署到訪問速度更快的云開發靜態托管服務。

云開發靜態托管是云開發提供的一種靜態網站托管能力，靜態資源（HTML、CSS、JavaScript、字體等）的分發由騰訊云對象存儲 COS 和擁有多個邊緣網點的騰訊云 CDN 提供支持。

云開發靜態托管介紹

云開發靜態托管是云開發提供的靜態網站托管的能力，靜態資源（HTML、CSS、JavaScript、字體等）的分發由騰訊云對象存儲 COS 和擁有多個邊緣網點的騰訊云 CDN 提供支持。可以通過騰訊云控制臺、命令行工具以及下面會提到的云開發 Github Action 進行管理部署。云開發提供了免費的二級域名（未綁定自定義域名時下行速度有限制），同時支持免費綁定開發者自己的自定義域名。

首個環境可享受 1GB 容量和每月 5GB 流量的免費額度，對于訪問量不是很大的個人博客應該足夠了。如果流量大也沒關系，計費是按照具體使用收費的按量付費方式，具體信息可以查看計費價格文檔 https://cloud.tencent.com/product/wh/pricing

云開發靜態托管部署的網站，還可以使用云開發的提供的一站式 Serverless 后端能力，例如云函數、云數據庫、云存儲、身份服務等。比如可以在靜態托管的個人博客上面使用云函數和云數據庫實現評論、留言板功能等，或者可以把博客的內容管理從原來的靜態文件部署變為動態內容管理等，拓展的用法非常的多，開發者可以繼續深入探索。

如何通過 Github Action 一鍵部署到云開發

下面演示如何將 Github 靜態頁面自動部署到云開發的靜態托管，來獲得穩定的訪問速度和更多的擴展能力。

例如開發者的個人博客 Github 項目結構如下：

|-- src

|-- build

|-- README.md

希望將項目下 build 目錄生成的靜態網站代碼部署到云開發這邊開通的靜態網站托管的根目錄下。

編寫 Github Action 文件

首先在項目目錄配置如下的 Github Action 文件 .github/workflows/main.yml，如果已經配置過 Github Action 就不需要重新創建了，然后參考下面的配置填寫。

on: [push] # push 代碼時觸發

jobs:

deploy:

runs-on: ubuntu-latest

name: Tencent Cloudbase Github Action Example

steps:

- name: Checkout

uses: actions/checkout@v2

# 使用云開發 Github Action 部署

- name: Deploy static to Tencent CloudBase

id: deployStatic

uses: TencentCloudBase/cloudbase-action@v1

with:

# 云開發的訪問密鑰 secretId 和 secretKey

secretId: ${{ secrets.SECRET_ID }}

secretKey: ${{ secrets.SECRET_KEY }}

# 云開發的環境id

envId: ${{ secrets.ENV_ID }}

# Github 項目靜態文件的路徑

staticSrcPath: build

可以看到配置中主要用到了 云開發 Github Action 擴展 TencentCloudBase/cloudbase-action@v1 來部署靜態文件。

注意配置文件中參數部分的 secretId、secretKey 、envId屬于敏感信息，需要放在項目的 secret 存儲中，這里不用填寫真實的值，只需要按照上面實例填寫變量即可。

staticSrcPath 這里填寫了靜態網站構建產生的目錄 build，如果想把靜態資源部署到云端的某個子目錄而不是根目錄，可以再配置一個參數 staticDestPath 。

配置云開發訪問信息

我們還需要在項目的 Secrets 中配置 SECRET_ID、SECRET_KEY、ENV_ID 這幾個私密信息，下面是具體的配置方式。

首先要開通云開發靜態網站，可以參考開通指南：https://docs.cloudbase.net/hosting/，開通環境后在云開發環境列表 頁面即可得到環境ID ENV_ID ，然后在騰訊云 訪問管理 頁面可以配置一對 API 訪問密鑰，也就是SECRET_ID、SECRET_KEY。

然后在自己的 Github 項目內的 Setting/Secrets 里設置 SECRET_ID, SECRET_KEY, ENV_ID 信息即可。

配置完之后就可以提交代碼體驗自動部署了，每次 git push Actions 都會自動運行，將項目的靜態資源部署到自己的云開發靜態托管環境，部署成功之后即可通過云開發提供的二級域名訪問來自己的網站。

配置自定義域名

云開發提供的免費的二級域名下行速度有所限制，開發者最好綁定一個自己的域名，綁定域名是免費的，還可以在騰訊云配置一個免費的 SSL 證書，來通過 HTTPS 訪問自己的網站。

自定義域名的方法可以參考這篇文檔 https://docs.cloudbase.net/hosting/custom-domain.html

配置完成后，測試下部署在云開發靜態托管的網站的訪問速度，根據測速數據可以看到各地的訪問速度都非常快。

開發者扶持

云開發還推出了【9.9元靜態網站托管包年贊助計劃】。只要你是技術博客/技術站點，遷移至云開發靜態網站托管服務后，即可申請該贊助計劃。申請方式鏈接： https://url.cn/5nFAtxq 靜態網站托管產品介紹：https://cloud.tencent.com/product/wh

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

閱讀須知

注意，這篇文章篇幅較長，主要針對新手，每一步很詳細，所以可能會顯得比較啰嗦，建議基礎比較好小伙伴根據右側目錄選擇自己感興趣的部分跳著看，不要文章沒看，上來先噴一下！謝謝( ⊙ 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的定制化的博客，可以直接拿來用。

小新編譯自 Insight Data Blog

量子位出品 | 公眾號 QbitAI

寫個網頁能有多麻煩？在大多數公司里，這項工作分為三步：

1. 產品經理完成用戶調研任務后，列出一系列技術要求；

2. 設計師根據這些要求來設計低保真原型，逐漸修改得到高保真原型和UI設計圖；

3. 工程師將這些設計圖實現為代碼，最終變成用戶使用的產品。

這么多環節，任何地方出一點問題，都會拉長開發周期。因此，不少公司，比如Airbnb已經開始用機器學習來提高這個過程的效率。

△ Airbnb內部的AI工具，從圖紙到代碼一步到位

看起來很美好，但Airbnb還沒公開該模型中端到端訓練的細節，以及手工設計的圖像特征對該模型的貢獻度。這是該公司特有的閉源解決方案專利，可能不會進行公開。

好在，一個叫Ashwin Kumar的程序員創建了一個開源版本，讓開發者/設計師的工作變得更簡單。

以下內容翻譯自他的博客：

理想上，這個模型可以根據網站設計的簡單手繪原型，很快地生成一個可用的HTML網站：

△ SketchCode模型利用手繪線框圖來生成HTML網站

事實上，上面例子就是利用訓練好的模型在測試集上生成的一個實際網站，代碼請訪問：https://github.com/ashnkumar/sketch-code。

從圖像標注中獲取靈感

目前要解決的問題屬于一種更廣泛的任務，叫做程序綜合（program synthesis），即自動生成工作源代碼。盡管很多程序綜合研究通過自然語言規范或執行追蹤法來生成代碼，但在當前任務中，我會充分利用源圖像，即給出的手繪線框圖來展開工作。

在機器學習中有一個十分熱門的研究領域，稱為圖像標注（image caption），目的是構建一種把圖像和文本連接在一起的模型，特別是用于生成源圖像內容的描述。

△ 圖像標注模型生成源圖像的文本描述

我從一篇pix2code論文和另一個應用這種方法的相關項目中獲得靈感，決定把我的任務按照圖像標注方式來實現，把繪制的網站線框圖作為輸入圖像，并將其相應的HTML代碼作為其輸出內容。

注：上段提到的兩個參考項目分別是

pix2code論文：https://arxiv.org/abs/1705.07962

floydhub教程：https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/?source=techstories.org

獲取合適的數據集

確定圖像標注方法后，理想中使用的訓練數據集會包含成千上萬對手繪線框圖和對應的HTML輸出代碼。但是，目前還沒有我想要的相關數據集，我只好為這個任務來創建數據集。

最開始，我嘗試了pix2code論文給出的開源數據集，該數據集由1750張綜合生成網站的截圖及其相應源代碼組成。

△ pix2code數據集中的生成網站圖片和源代碼

這是一個很好的數據集，有幾個有趣的地方：

該數據集中的每個生成網站都包含幾個簡單的輔助程序元素，如按鈕、文本框和DIV對象。盡管這意味著這個模型受限于將這些少數元素作為它的輸出內容，但是這些元素可通過選擇生成網絡來修改和擴展。這種方法應該很容易地推廣到更大的元素詞匯表。
每個樣本的源代碼都是由領域專用語言（DSL）的令牌組成，這是該論文作者為該任務所創建的。每個令牌對應于HTML和CSS的一個片段，且加入編譯器把DSL轉換為運行的HTML代碼。

彩色網站圖像變手繪圖

為了修改我的任務數據集，我要讓網站圖像看起來像手工繪制出的。我嘗試使用Python中的OpenCV庫和PIL庫等工具對每張圖像進行修改，包括灰度轉換和輪廓檢測。

最終，我決定直接修改原始網站的CSS樣式表，通過執行以下操作：

1. 更改頁面上元素的邊框半徑來平滑按鈕和DIV對象的邊緣；

2. 模仿繪制的草圖來調整邊框的粗細，并添加陰影；

3. 將原有字體更改為類似手寫的字體；

最終實現的流程中還增加了一個步驟，通過添加傾斜、移動和旋轉來實現圖像增強，來模擬實際繪制草圖中的變化。

使用圖像標注模型架構

現在，我已經處理好數據集，接下來是構建模型。

我利用了圖像標注中使用的模型架構，該架構由三個主要部分組成：

1. 一種使用卷積神經網絡（CNN）的計算機視覺模型，從源圖像提取圖像特征；

2. 一種包含門控單元GRU的語言模型，對源代碼令牌序列進行編碼；

3. 一個解碼器模型，也屬于GRU單元，把前兩個步驟的輸出作為輸入，并預測序列中的下一個令牌。

△ 以令牌序列為輸入來訓練模型

為了訓練模型，我將源代碼拆分為令牌序列。模型的輸入為單個部分序列及它的源圖像，其標簽是文本中的下一個令牌。該模型使用交叉熵函數作為損失函數，將模型的下個預測令牌與實際的下個令牌進行比較。

在模型從頭開始生成代碼的過程中，該推理方式稍有不同。圖像仍然通過CNN網絡進行處理，但文本處理開始時僅采用一個啟動序列。在每個步驟中，模型對序列中輸出的下個預測令牌將會添加到當前輸入序列，并作為新的輸入序列送到模型中；重復此操作直到模型的預測令牌為，或該過程達到每個文本中令牌數目的預定義值。

當模型生成一組預測令牌后，編譯器就會將DSL令牌轉換為HTML代碼，這些HTML代碼可以在任何瀏覽器中運行。

用BLEU分數評估模型

我決定使用BLEU分數來評估模型。這是機器翻譯任務中常用的一種度量標準，通過在給定相同輸入的情況下，衡量機器生成的文本與人類可能產生內容的近似程度。

實際上，BLEU通過比較生成文本和參考文本的N元序列，以創建修改后的準確版本。它非常適用于這個項目，因為它會影響生成HTML代碼中的實際元素，以及它們之間的相互關系。

最棒的是，我還可以通過檢查生成的網站來比較當前的實際BLEU分數。

△ 觀察BLEU分數

當BLEU分數為1.0時，則說明給定源圖像后該模型能在正確位置設置合適的元素，而較低的BLEU分數這說明模型預測了錯誤元素或是把它們放在相對不合適的位置。我們最終模型在評估數據集上的BLEU分數為0.76。

福利：定制網頁風格

后來，我還想到，由于該模型只生成當前頁面的框架，即文本的令牌，因此我可以在編譯過程中添加一個定制的CSS層，并立刻得到不同風格的生成網站。

△ 一個手繪圖生成多種風格的網頁

把風格定制和模型生成兩個過程分開，在使用模型時帶來了很多好處：

1.如果想要將SketchCode模型應用到自己公司的產品中，前端工程師可以直接使用該模型，只需更改一個CSS文件來匹配該公司的網頁設計風格；

2. 該模型內置的可擴展性，即通過單一源圖像，模型可以迅速編譯出多種不同的預定義風格，因此用戶可以設想出多種可能的網站風格，并在瀏覽器中瀏覽這些生成網頁。

總結和展望

受到圖像標注研究的啟發，SketchCode模型能夠在幾秒鐘內將手繪網站線框圖轉換為可用的HTML網站。

但是，該模型還存在一些問題，這也是我接下來可能的工作方向：

1. 由于這個模型只使用了16個元素進行訓練，所以它不能預測這些數據以外的令牌。下一步方向可能是使用更多元素來生成更多的網站樣本，包括網站圖片，下拉菜單和窗體，可參考啟動程序組件（https://getbootstrap.com/docs/4.0/components/buttons/）來獲得思路；

2. 在實際網站構建中，存在很多變化。創建一個能更好反映這種變化的訓練集，是提高生成效果的一種好方法，可以通過獲取更多網站的HTML/CSS代碼以及內容截圖來提高；

3. 手繪圖紙也存在很多CSS修改技巧無法捕捉到的變化。解決這個問題的一種好方法是使用生成對抗網絡GAN來創建更逼真的繪制網站圖像。

整合營銷服務商