Github-Pages-Hexo搭建博客

Zeng's Blog

寫在前面的話

阮一峰說過,喜歡寫B(tài)log的人,會經(jīng)歷三個階段。
(1)第一階段,剛接觸Blog,覺得很新鮮,試著選擇一個免費空間來寫。
(2)第二階段,發(fā)現(xiàn)免費空間限制太多,就自己購買域名和空間,搭建獨立博客。
(3)第三階段,覺得獨立博客的管理太麻煩,最好在保留控制權(quán)的前提下,讓別人來管,自己只負(fù)責(zé)寫文章。

第一部分

GitHub Pages是什么?

GitHub Pages本用于介紹托管在GitHub的項目, 不過,由于他的空間免費穩(wěn)定,用來做搭建一個博客再好不過了。

為什么選擇GitHub Pages?

GitHub Pages有300M免費空間,搭建的博客可以很方便的進行管理,并且保存可靠;
GitHub 是趨勢,GitHub上面有很多大牛,學(xué)IT的人應(yīng)該盡早融入這樣的環(huán)境,
程序員應(yīng)該學(xué)會使用Git來管理項目,熟悉版本控制。
Github上有很多的開源項目,多學(xué)習(xí)學(xué)習(xí),眼界會開闊很多。

接下來應(yīng)該怎么做?

Hexo 是一個簡單地、輕量地、基于Node的一個靜態(tài)博客框架,可以方便的生成靜態(tài)網(wǎng)頁托管在github。我們要使用Github Pages + Hexo搭建博客站點,就必須注冊Github賬號,安裝git、node.js以及hexo等,接下來就一起來實踐吧!

Github注冊與配置

注冊

如果你還沒有自己的Github賬號,那請到Github官網(wǎng)注冊賬號:https://github.com/
注冊成功后github會發(fā)送驗證郵件到你的郵箱,請查收郵件并進行驗證。

新建版本庫

注冊完成后,點擊Start a project來新建一個版本庫



如果你已經(jīng)注冊,則在自己的主頁,點擊”New repository”,即可新建一個版本庫



輸入Repository name:yourname.github.io(yourname與你的注冊用戶名一致,這個就是你博客的域名了)
啟用GitHub Page

進入版本庫后,點擊右上方的setting



下來到Githubs pages欄目,點擊Launch automatic page generator



來到New user site頁面后點擊右下角的Continue to layouts
最后點擊”Publish page”,發(fā)布github默認(rèn)生成的一個靜態(tài)站點

至此,我們已經(jīng)配置好了github默認(rèn)的靜態(tài)站點,并且可以訪問:你的github用戶名.github.io測試我們剛剛建立好的站點主頁。

下載并安裝Git

下載

根據(jù)自己電腦操作系統(tǒng)的位數(shù)到git官網(wǎng)下載相應(yīng)的版本:
https://git-scm.com/download/win

安裝

根據(jù)自己的需要安裝到相應(yīng)的路徑下,其他的一路點擊next即可

配置環(huán)境變量

選中桌面圖標(biāo)計算機,右鍵選擇屬性,打開左邊的高級系統(tǒng)設(shè)置,打開彈出窗口的環(huán)境變量,找到path進行編輯。
找到git的安裝目錄,將其復(fù)制后粘貼到path后面。注意每一個加進來的路徑后面都要帶英文格式的分號。
安裝與配置過程可參考圖文教程:git的安裝和配置

測試是否安裝成功

windows+R輸入cmd打開命令提示符窗口,輸入如下命令:

git --version```
若安裝成功會打印出本機安裝的git的版本。
添加SSH KEY到Github
SSH Key是一個認(rèn)證,讓github識別綁定這臺機器,允許這臺機器提交。
**(1)檢查本機是否有SSH KEY設(shè)置**
打開git bash,輸入cd ~/.ssh 或cd .ssh
如果沒有則提示: No such file or directory
如果有則進入~/.ssh路徑下(ls查看當(dāng)前路徑文件,rm * 刪除所有文件)
**(2)配置生成SSH KEY**

$ cd ~ #保證當(dāng)前路徑在”~”下
$ ssh-keygen -t rsa -C "這里填寫你的郵箱地址"
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/xxxx_000/.ssh/id_rsa): #不填直接回車
Enter passphrase (empty for no passphrase): #輸入密碼(可以為空)Enter same passphrase again: #再次確認(rèn)密碼(可以為空)
Your identification has been saved in /c/Users/xxxx_000/.ssh/id_rsa. #生成的密鑰
Your public key has been saved in /c/Users/xxxx_000/.ssh/id_rsa.pub. #生成的公鑰
The key fingerprint is:
e3:51:33:xx:xx:xx:xx:xxx:61:28:83:e2:81 xxxxxx@yy.com

至此,已經(jīng)生成ssh key,其存放路徑為:c:/Users/你電腦的用戶名/.ssh/下。
注釋:可生成ssh key自定義名稱的密鑰,默認(rèn)id_rsa。
**(3)復(fù)制SSH KEY到Github**
到C盤你的用戶目錄下找到.ssh文件夾,查看里面是否有id_rsa和id_rsa.pub這兩個文件。
登錄GitHub系統(tǒng);點擊右上角賬號頭像的“▼”→Settings→SSH kyes→Add SSH key,Title自定義,復(fù)制id_rsa.pub的公鑰內(nèi)容到GitHub中Add an SSH key的key輸入框,最后“Add Key”。
**(4)配置賬戶**

$ git config --global user.name “your_username” #設(shè)置用戶名
$ git config --global user.email “your_registered_github_Email” #設(shè)置郵箱地址(建議用注冊giuhub的郵箱)

**(5)測試SSH KEY是否設(shè)置成功**

$ ssh -T git@github.com

接下來會返回一些信息,并需要你輸入一次yes,若生成ssh key時設(shè)置有密碼則還會讓你輸入生成ssh key時設(shè)置的密碼。
Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access. #出現(xiàn)詞句話,說明設(shè)置成功。
SSH-KEY的生成與配置可參考圖文教程[window下配置SSH連接GitHub、GitHub配置ssh key:](http://jingyan.baidu.com/article/a65957f4e91ccf24e77f9b11.html)
#### 下載并安裝node.js
##### 下載
根據(jù)自己電腦操作系統(tǒng)的位數(shù)到git官網(wǎng)下載相應(yīng)的版本:
[https://nodejs.org/en/download/](https://nodejs.org/en/download/)
##### 安裝
根據(jù)自己的需要安裝到響應(yīng)的地方,其他的一路點擊next即可
##### 配置環(huán)境變量
選中桌面圖標(biāo)計算機,右鍵選擇屬性,打開左邊的高級系統(tǒng)設(shè)置,打開彈出窗口的環(huán)境變量,找到path進行編輯。
找到node.js的安裝目錄,將其復(fù)制后粘貼到path后面。注意每一個加進來的路徑后面都要帶英文格式的分號。
##### 測試是否安裝成功
windows+R輸入cmd打開命令提示符窗口,輸入如下命令:

node -v

若安裝成功會打印出本機安裝的node.js的版本。
#### 安裝和配置hexo
hexo是基于node.js的靜態(tài)博客,官網(wǎng)也是搭建在GitHub上。
##### 安裝
在你喜歡的路徑下新建一個文件夾blog,用來存放博客的文件,在此文件夾中右鍵打開Git Bash
輸入如下指令進行安裝:

$ npm install -g hexo-cli

如果執(zhí)行這條命令時長時間未成功,那么請先使用下面的命令將npm鏡像源更改為國內(nèi)的鏡像,再執(zhí)行上面的安裝命令,因為國外的鏡像源很有可能被墻了。

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

##### 初始化hexo

$ hexo init hexo

這里會將Github上的hexo項目clone下來,得到hexo文件夾。
初始化成功后會在最后打印一行:INFO Start blogging with Hexo!
##### 安裝依賴文件
進入到hexo文件夾

$ cd hexo

安裝依賴文件:

$ npm install

部署形成文件:

$ hexo generate

本地測試

$ hexo server

![](http://upload-images.jianshu.io/upload_images/2178172-687429a3652d19d8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在瀏覽器輸入:[http://localhost:4000/](http://localhost:4000/) 即可訪問到我們搭建好的hexo站點。
![](http://upload-images.jianshu.io/upload_images/2178172-78af3fd2f049c59e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
#### 將本地hexo項目托管到Github
##### 修改全局配置文件_config.yml
**說明:** hexo文件夾下一個*config.yml,我們稱之為全局配置文件,在每個主題文件夾內(nèi)還會有一個*config.yml文件,我們稱之為主題配置文件。
用sublime text3或者notepad++等編輯器打開hexo文件夾下的_config.yml文件。
**注意:配置文件中每個字段后面的冒號是英文格式的,且在其后要加一個空格再寫值**
編輯最后面的deploy屬性,加入代碼:

type: git
repository: https://github.com/你的Github用戶名/你的Github用戶名.github.io.gitbranch: master

type使用是git。
repository屬性改成你的剛才創(chuàng)建倉庫git地址。
分支branch填寫master。
##### 安裝hexo-deployer-git插件

$ npm install hexo-deployer-git --save

##### 部署到Github上
依次執(zhí)行以下三條命令:

$ hexo clean #清除緩存 網(wǎng)頁正常情況下可以忽略此條命令
$ hexo generate #生成靜態(tài)頁面至public目錄
$ hexo deploy #將.deploy目錄部署到GitHub

執(zhí)行hexo deploy命令之后,如果最后一行打印出如下信息則表示部署成功

INFO Deploy done: git

然后你再去訪問你創(chuàng)建的Github pages地址,也就是:你的Github用名.github.io,即可看到你本地的hexo項目已經(jīng)被部署到github上去了。此時博客的默認(rèn)主題是landscape,即上面本地測試時的樣子。

### 第二部分

主要講解Hexo的站點配置、主題配置和使用以及博客文章的發(fā)布。
在Hexo中有兩份主要的配置文件,其名稱都是_config.yml。其中,一份位于站點根目錄下,主要包含Hexo本身的配置,我們稱之為**全局配置文件**;另一份位于主題目錄下,這份配置由主題作者提供,主要用于配置主題相關(guān)的選項,我們稱之為**主題配置文件**。
hexo的官方網(wǎng)站:[https://hexo.io/](https://hexo.io/),里面有hexo的詳細(xì)說明文檔,不過是英文的。沒關(guān)系,英語不好的請往下看。
**注意:配置文件中每個字段后面的冒號是英文格式的,且在其后要加一個空格再寫值**
比如:

title: Myblog

#### hexo的站點配置
編輯hexo目錄下的_config.yml文件,具體配置如下:

Hexo Configuration

Docs: https://hexo.io/docs/configuration.html

Source: https://github.com/hexojs/hexo/

?# Site 站點信息配置,根據(jù)自己的需要進行修改
title: Zeng's Blog #站點名,會在瀏覽器頁面標(biāo)簽左上角顯示
subtitle: Love Coding,Enjoy Life #副標(biāo)題
description: zeng #對站點的描述,給搜索引擎看的,可以自定義
author: zeng #網(wǎng)站作者
language: zh-Hans #網(wǎng)站語言
timezone: Asia/Shanghai #時區(qū)
avatar: /images/logo.jpg #網(wǎng)站logo,會在瀏覽器頁面標(biāo)簽左上角顯示?

URL 博客地址,與申請的GitHub一致

If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'url: https://fzy-line.github.io/root: /

博客鏈接格式

permalink: :year/:month/:day/:title/
permalink_defaults:

?# Directory #目錄設(shè)置,一般不修改
source_dir: source #資源文件夾,放在里面的文件會上傳到github中
public_dir: public #公共文件夾,存放生成的靜態(tài)文件
tag_dir: tags #標(biāo)簽文件夾,默認(rèn)是tags。實際存放在source/tags中。
archive_dir: archives #檔案文件夾,默認(rèn)是archives。
category_dir: categories #分類文件夾,默認(rèn)是categories。實際存放在source/categories中。
code_dir: downloads/code #代碼文件夾,默認(rèn)是downloads/code
i18n_dir: :lang #國際化文件夾,默認(rèn)跟language相同
skip_render: #跳過指定文件的渲染,您可使用 glob 來配置路徑。

?# Writing 這是文章布局、寫作格式的定義,一般不修改
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecaseexternal_link: true # Open
external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:

?# Category & Tag #分類和標(biāo)簽,一般不修改
default_category: uncategorized
category_map:
tag_map:

?# Date / Time format #日期、時間格式,一般不修改

Hexo uses Moment.js to parse and display date

You can customize the date format as defined in

http://momentjs.com/docs/#/displaying/format/date_format: YYYY-MM-DD time_format: HH:mm:ss?# Pagination

可根據(jù)自己需要修改

Set per_page to 0 to disable pagination

per_page: 6 #分頁,每頁文章數(shù)量
pagination_dir: page

?# Extensions #擴展

Plugins: https://hexo.io/plugins/

Themes: https://hexo.io/themes/

theme: next #博客主題

Deployment 這里配置站點部署到Github,上一節(jié)中已經(jīng)講過

Docs: https://hexo.io/docs/deployment.html

deploy:
type: git
repository: git@github.com:你的Github用戶名.github.io.git
branch: master

#### hexo使用主題
Hexo 安裝主題的方式非常簡單,只需要將主題文件拷貝至站點目錄的 themes 目錄下, 然后修改下配置文件即可。
hexo官方主題下載地址:[https://hexo.io/themes/](https://hexo.io/themes/),里面有多種多樣的主題模板供大家選擇。
這里推薦一款很火的主題:next,下面的配置也是以這個主題為例。如果你使用的是其他的主題,那么請你自己根據(jù)說明文檔進行配置。
next主題的官網(wǎng),有很詳細(xì)的配置文檔:[http://theme-next.iissnan.com/](http://theme-next.iissnan.com/)
##### 下載主題
next下載地址:[https://github.com/iissnan/hexo-theme-next](https://github.com/iissnan/hexo-theme-next)
![](http://upload-images.jianshu.io/upload_images/2178172-d952466e4c8688cc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
到Gtihub下載此主題后解壓,打開可以看到里面很多主題相關(guān)的文件,我們將此文件夾改名為next,然后將它復(fù)制到站點目錄的/themes/目錄下。
##### 啟用主題
hexo默認(rèn)是使用的landscape主題,我們可以在站點目錄下的/themes/目錄下看到landscape文件夾。
我們的themes文件夾里可以放很多主題的文件夾,但是實際上我們的網(wǎng)站采用哪一個主題,這是需要我們進行配置的,打開編輯全局配置文件,找到下面的內(nèi)容:

Extensions #擴展

Plugins: https://hexo.io/plugins/

Themes: https://hexo.io/themes/

theme: next #博客主題,默認(rèn)是landscape

在theme字段這里填上你下載的主題的文件夾的名字,例如我們使用next主題就填上next。這樣配置文件就和我們的主題文件關(guān)聯(lián)起來了。
##### 配置主題配置文件
主題配置文件位于站點目錄下的/themes/next/目錄下,打開編輯,這里我們只貼出需要修改的地方進行介紹,如下:
**(1)配置基本信息**

網(wǎng)站圖標(biāo),將其放在hexo站點/source/目錄下

favicon: /logo.jpg

?# 關(guān)鍵詞,例如下面是我寫的keywords: "Python,Life,Android"?

網(wǎng)站建立時間,顯示在頁面底部

since: 2016

?# 網(wǎng)站版權(quán)聲明,顯示在頁面底部copyright: true

**(2)選擇外觀樣式**
目前 NexT 支持三種 Scheme,他們是:
Muse - 默認(rèn) Scheme,這是 NexT 最初的版本,黑白主調(diào),大量留白
Mist - Muse 的緊湊版本,整潔有序的單欄外觀
Pisces - 雙欄 Scheme,小家碧玉似的清新
![](http://upload-images.jianshu.io/upload_images/2178172-e117a3bead25b76d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
找到主題配置文件的如下三行,其中#號表示注釋,要啟用哪一種樣式就把#號去掉即可。

Schemes

scheme: Muse

scheme: Mist

scheme: Pisces

**(3)設(shè)置菜單**
菜單內(nèi)容的設(shè)置格式是:item name: link。其中 item name 是一個名稱,這個名稱并不直接顯示在頁面上,它將用于匹配圖標(biāo)以及翻譯。

menu:
home: /
archives: /archives
categories: /categories
tags: /tags
about: /about

sitemap: /sitemap.xml

commonweal: /404.html

此設(shè)定格式是 item name: icon name,其中 item name 與上一步所配置的菜單名字對應(yīng),icon name 是 Font Awesome 圖標(biāo)的 名字。而 enable 可用于控制是否顯示圖標(biāo),你可以設(shè)置成 false 來去掉圖標(biāo)。

menu_icons:
enable: true
#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
home: home
about: user
categories: th
schedule: calendar
tags: tags archives:
archive sitemap:
sitemap
commonweal: heartbeat

測試配置效果

$ hexo clean #用于清除緩存
$ hexo generate #生成靜態(tài)網(wǎng)頁
$ hexo server #開啟本地預(yù)覽

訪問:[http://localhost:4000/](http://localhost:4000/) 查看效果,如下圖:
![](http://upload-images.jianshu.io/upload_images/2178172-6112d62249966fad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
##### 解決遇到的問題
到這里會發(fā)現(xiàn)點擊左側(cè)菜單的分類、標(biāo)簽和關(guān)于會提示找不到頁面。
這是因為我們只是創(chuàng)建了菜單,還沒有創(chuàng)建相應(yīng)的頁面。
新建頁面的hexo命令是:

$ hexo new page "pageName"

我們新建分類、標(biāo)簽、關(guān)于頁面:

$ hexo new page 'categories'
$ hexo new page 'tags'
$ hexo new page 'about'

分別執(zhí)行完這三條命令后,我們會發(fā)現(xiàn)站點目錄下的/source/目錄下多了三個文件夾:categories,tags,about,每個文件夾里面都會生成一個index.md文件,如下:
默認(rèn)都只會生成title和date字段,我們要為其添加上type字段,并賦值。
**注意:博客文章的抬頭信息中每個字段后面的冒號是英文格式的,而且其后要加一個空格再寫值**
categories下的index.md:

title: categories
date: 2016-12-02 23:28:27
type: categories


tags下的index.md:

title: tags
date: 2016-12-02 23:31:23
type: tags


about下的index.md:

title: about
date: 2016-12-02 23:31:23
type: about


這樣我們的這幾個頁面也就沒有問題了。至此,基本的配置也就完成了,接下來介紹如何寫博客與發(fā)布博客。
#### 發(fā)布博客
##### 新建博客文章

$ hexo new "postName" #新建文章

實例:
新建博客《我的第一篇博客》

$ hexo new "我的第一篇博客"```
到站點目錄下的/source/_posts/目錄下可以看到生成了名為:我的第一篇博客.md的文件,這是Markdown格式的文件,可以用sublime text3或者notepad++等編輯器打開,也可以下載一個MarkdownPad來編輯Markdown文件。

Markdown是一種可以使用普通文本編輯器編寫的標(biāo)記語言,通過簡單的標(biāo)記語法,它可以使普通文本內(nèi)容具有一定的格式。
如果你沒有使用過Markdown編輯器,那請你自己去學(xué)習(xí)一下Markdown語法。
Markdown 語法說明(簡體中文版):http://www.appinn.com/markdown/

編輯博客

Hexo默認(rèn)新建的文章抬頭已有title、date、tags等屬性,可能缺乏categories和meta標(biāo)簽,想要指定目錄就需要添加categories屬性,而meta標(biāo)簽則是為了便于搜索引擎的收錄。如下:

---title: 我的第一篇博客
date: 2016-12-02 23:44:20
tags: #文章標(biāo)簽 可以省略
---

tags字段是文章的標(biāo)簽,可以指定標(biāo)簽也可以不指定,如果要指定多個標(biāo)簽需要這樣做:

tags: [Linux,Http,網(wǎng)絡(luò)]```
我們可以添加上categories字段,對博客進行分類管理,然后點擊主頁左側(cè)菜單的分類就可看到具體的分類。例如:

categories: Linux```


如何實現(xiàn)上圖的閱讀全文功能?
在自己喜歡的位置添加一個:

<!--more-->```
即可,主題會自動識別這個標(biāo)簽,生成對應(yīng)的閱讀全文按鈕。

以上是文章摘要

以下是余下全文

##### 發(fā)布博客

$ hexo clean #清除緩存 網(wǎng)頁正常情況下可以忽略此條命令
$ hexo generate #生成靜態(tài)頁面至public目錄

寫好之后可以現(xiàn)在本地預(yù)覽,確定無誤之后再部署到Github上。

$ hexo server #開啟預(yù)覽訪問端口(默認(rèn)端口4000,'ctrl + c'關(guān)閉server)
$ hexo deploy #將.deploy目錄部署到GitHub

需要說明的是:
我們博客文章的編寫都是Markdown文件,但是發(fā)布到github上的其實是html文件,將Markdown轉(zhuǎn)換成html這個工作我們只要輸入hexo generate命令即可,hexo會幫我們完成轉(zhuǎn)換。
##### hexo命令簡寫形式

hexo n "我的博客" == hexo new "我的博客"
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy


### 第三部分

主要介紹了自己的博客站點所使用的一些第三方服務(wù)的配置,以及主題的一些優(yōu)化。當(dāng)然,每個人的需要都不太相同,大家也可以根據(jù)自己的喜好去選擇使用第三方服務(wù)來讓自己的博客站點更完善更強大。
再次強調(diào):在Hexo中有兩份主要的配置文件,其名稱都是_config.yml。其中,一份位于站點根目錄下,主要包含Hexo本身的配置,我們稱之為**全局配置文件**;另一份位于主題目錄下,這份配置由主題作者提供,主要用于配置主題相關(guān)的選項,我們稱之為**主題配置文件**。
#### 博客圖片存放
Markdown編輯器支持插入圖片,可以直接給出圖片的鏈接,因此我們可以將圖片存放在我們hexo項目的目錄下,再填寫對應(yīng)的路徑,也可以將其存放在云服務(wù)器上,然后給出鏈接。
在這里,我們介紹使用七牛云來進行圖片托管。七牛云是國內(nèi)領(lǐng)先的企業(yè)級云服務(wù)商,致力于打造以數(shù)據(jù)為核心的場景化PaaS服務(wù),圖片加載速度還不錯,一般也不會出現(xiàn)圖片掛掉的情況。
##### 注冊賬號
注冊申請一個個人賬號,然后激活郵箱完成注冊。
官網(wǎng)地址:[http://www.qiniu.com/](http://www.qiniu.com/)
存儲圖片
(1)點擊左側(cè)菜單的對象存儲
![](http://upload-images.jianshu.io/upload_images/2178172-cc381f3dbf42b04b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
(2)點擊上端的添加來創(chuàng)建存儲空間
![](http://upload-images.jianshu.io/upload_images/2178172-e0a212f73fdbb295.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
(3)填寫好基本信息,點擊確定創(chuàng)建
![](http://upload-images.jianshu.io/upload_images/2178172-eb953dc2c01114a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
(4)來到新創(chuàng)建的存儲空間,點擊內(nèi)容管理
![](http://upload-images.jianshu.io/upload_images/2178172-73979b9f1e17c62c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
(5)在內(nèi)容管理中可以看到文件列表,點擊上傳文件
![](http://upload-images.jianshu.io/upload_images/2178172-919a37a55f36dbc0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
(6)可以設(shè)置上傳的文件的前綴,以便進行分類管理
![](http://upload-images.jianshu.io/upload_images/2178172-2cf03d51336f2909.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
(7)點擊關(guān)閉,回到內(nèi)容管理頁面查看上傳的文件,復(fù)制圖片鏈接
![](http://upload-images.jianshu.io/upload_images/2178172-935ff3167574698e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
至此,我們就將我們博客需要的圖片存儲到了七牛云,然后我們只要將復(fù)制的圖片鏈接插入到博客人文章中即可顯示圖片,感覺顯示速度還是蠻快的。
#### 配置第三方服務(wù)
##### 多說社會化評論
(1)多說創(chuàng)建站點
[多說官網(wǎng):http://duoshuo.com/](http://duoshuo.com/)
登錄多說官網(wǎng),點擊主頁的我要安裝來到創(chuàng)建站點頁面填寫基本信息:
![](http://upload-images.jianshu.io/upload_images/2178172-9cf7e2290c6b852e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
點擊創(chuàng)建后出現(xiàn):**服務(wù)異常,請聯(lián)系客服人員**的錯誤不是因為真的出現(xiàn)異常,而是你填寫的用戶名或者其他信息不符合他的要求,只是他沒有提示你,這是需要注意的地方。比如我遇到的是用戶名不能使用‘-’中劃線和‘_’下劃線,或者多說域名填寫格式錯誤。
(2)創(chuàng)建站點完成后在主題配置文件中新增duoshuo_shortname字段。
值設(shè)置成上一步中填寫的值(紅色方框框出部分的值)
例如:

duoshuo_shortname: fzyLine

(3)實現(xiàn)效果
![](http://upload-images.jianshu.io/upload_images/2178172-83fa3dd0bf40a83a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
##### 多說分享
多說分享必須與多說評論同時使用
編輯主題配置文件,添加字段 duoshuo_share,值為 true。

多說分享服務(wù)

duoshuo_share: true

實現(xiàn)效果:
![](http://upload-images.jianshu.io/upload_images/2178172-57f2f5441dee9a1d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
可以修改成如下的樣子:
當(dāng)site_uv: true時,代表在頁面底部顯示站點的UV值。即訪客數(shù):

效果:本站訪客數(shù)12345人次

site_uv: true
site_uv_header: 本站訪客數(shù)
site_uv_footer: 人次

當(dāng)site_pv: true時,代表在頁面底部顯示站點的PV值。即總訪問量:

效果:本站總訪問量12345次

site_pv: true
site_pv_header: 本站總訪問量
site_pv_footer: 次

當(dāng)page_pv: true時,代表在文章頁面的標(biāo)題下顯示該頁面的PV值(閱讀數(shù))。

效果:本文總閱讀量12345次

page_pv: true
page_pv_header: 本文總閱讀量
page_pv_footer: 次

##### 站內(nèi)搜索
next主題的官方文檔提供了幾種實現(xiàn)搜索服務(wù)的方式,我們就使用配置最簡單的Local Search,添加百度/谷歌/本地 自定義站點內(nèi)容搜索。
(1)安裝 hexo-generator-searchdb,在站點目錄下執(zhí)行以下命令:

$ npm install hexo-generator-searchdb --save

(2)編輯全局配置文件,新增以下內(nèi)容到任意位置:

search:
path: search.xml
field: post
format: html
limit: 10000

(3)編輯主題配置文件啟用本地搜索

Local search

local_search:
enable: true

(4)實現(xiàn)效果
![](http://upload-images.jianshu.io/upload_images/2178172-089b4df6116622a0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
#### 開啟打賞功能
next主題開啟打賞功能很簡單,我們只需要在全局配置文件中填入微信和支付寶收款二維碼圖片地址即可開啟該功能。先到微信和支付寶將自己收款二維碼圖片保存,我們同樣可以將其存在七牛云上,然后貼到下面的配置文件里。

reward_comment: 堅持原創(chuàng)技術(shù)分享,您的支持將鼓勵我繼續(xù)創(chuàng)作!
wechatpay: 微信當(dāng)面付圖片的url
alipay: 支付寶當(dāng)面付圖片的url

實現(xiàn)效果:
![](http://upload-images.jianshu.io/upload_images/2178172-c610e45bb7fedb2c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Github pages + Hexo搭建靜態(tài)博客站點的系列文章到這里就完結(jié)了,其實也算是一個很詳細(xì)的教程了,花了一些時間來整理。之后可能不會再更新,但是,如果之后遇到一些問題或者有更好的推薦,可能還會再寫。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容