利用 Hexo + Github Pages 搭建博客

概述

個人博客
本文總結一下 Hexo 搭建博客的主要流程，可以在往後快速恢復博客環境。

Hexo 的官方文檔寫的已經很全面了，本文僅將一些注意點列出。
歡迎加入前端交流羣：749539640
安裝 Hexo 的文檔參考：

• Hexo 文檔

前提

安裝 Hexo 以前，你的電腦上須要有

• Node.js
• Git

若是是 Mac 用戶， 您在編譯時可能會遇到問題，請先到 App Store 安裝 Xcode，Xcode 完成後，啓動並進入 Preferences -> Download -> Command Line Tools -> Install 安裝命令行工具

安裝 Hexo

全局安裝 hexo-cli：

npm install -g hexo-cli

若是遇到權限的問題，可使用以下命令：

sudo chown -R $(whoami) /usr/local/lib/node_modules/

設置 /usr/local/lib/node_modules/ 文件夾屬於當前用戶。

此外，若是你要使用 root 權限安裝的話，可使用 sudo -s 切爲 root 用戶進行相關操做。這麼作的話，會將一些文件夾的默認屬組設置爲 root 了，不推薦。

npm 權限問題：

• Global installs (sudo npm i -g) fail on Mac after 6.5 upgrade. Works fine after 6.4.1 downgrade
• npm，yarn如何查看源和換源

建站

hexo init MyBlog
cd MyBlog
npm install

執行完畢以後，博客其實已經 OK 了：

hexo g
hexo s

執行上面命令便可本地預覽博客內容了。

部署

官宣-站點配置文件 內容中介紹了不少字段的用途

Hexo 提供快速一鍵部署，將博客部署到 GIthub Pages。

安裝 hexo-deployer-git：

$ cd MyBlog
$ npm install hexo-deployer-git --save

修改站點配置文件中的配置：

# npm install hexo-deployer-git --save
deploy:
- type: git
  repo: git@github.com:Michael728/michael728.github.io.git
  branch: master

執行部署：

hexo d

經常使用命令

hexo 經常使用指令

hexo version # 顯示hexo版本
hexo new <title> # 建立新文章
hexo g/generate # 生成靜態文件
hexo clean # 清除緩存文件和已生成的靜態文件（public）
hexo server # 啓動本地服務器
hexo d/deploy # 部署網站
hexo list <type> # 列出網站資料

npm 經常使用指令

npm install 模塊名 -g --save # g全局安裝 save安裝包信息將加入到dependencies（生產階段的依賴）
npm install gulp@3.9.1 # 指定版本
npm install # 該命令能夠根據dependencies配置安裝全部的依賴包
npm update [-g] 模塊名
npm outdated 模塊名 # 檢查模塊是否過期
npm ls -g # 查看全局安裝的模塊
npm uninstall 模塊名
npm info hexo-cli # 查看hexo-cli模塊的信息

• npm經常使用命令
• 【原】npm 經常使用命令詳解

Hexo 寫做技巧

• Sanarous-hexo博客Next主題進階寫做技巧
• NexT 主題內置標籤
• Hexo 搭建我的博客系列：寫做技巧篇

Note

語法：

{% note [class] [no-icon] %}
這裏寫你須要寫的內容
{% endnote %}

// 注意上面的class和no-icon屬性是能夠選擇的
[class]   : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.

示例：

{% note success no-icon %}
success形式的類別
{% endnote %}

效果：
<p class="note note-success">success形式的類別</p>

這裏使用 no-icon 表示不顯示圖標，可選，默認會帶有圖標。

使用主題自帶 FontAwesome 圖標

源碼：

- <i class="fa fa-pencil"></i> 鉛筆
- <i class="fa fa-cloud-upload"></i> 上傳
- <i class="fa fa-download"></i> 下載

效果：

• 鉛筆
• 上傳
• 下載

文本居中

源碼：

{% cq %}
人生乃是一面鏡子，
從鏡子裏認識本身，
我要稱之爲頭等大事，
也只是咱們追求的目的！
{% endcq %}

效果：

人生乃是一面鏡子，
從鏡子裏認識本身，
我要稱之爲頭等大事，
也只是咱們追求的目的！

主題自帶 label 標籤

首先在主題 _config.xml 配置：

# Label tag.
label: true

源碼：

{% label primary@primary內容 %}

效果：
label primary@primary內容

Hexo 其餘知識

圖牀

因爲一直使用的是「微博圖牀」，渣浪微博和簡書開啓了圖片防盜鏈，請你們在博客中加入如下標籤來繞過：

<meta name="referrer" content="never" /> ​​​​

Next 主題只須要在 themes/next/layout/_partials/head/head.swig 中添加上面一行內容便可。

Next 主題

• theme-next/hexo-theme-next

安裝 Next

$ cd MyBlog
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

Next 擴展都安裝在themes/next/source/lib文件夾下

cd MyBlog
git clone https://github.com/theme-next/hexo-theme-next themes/next

啓動 Next 主題

編輯站點配置文件 _config.yml：

theme: next # 啓用next主題

主題設置

• next-開始使用

設置語言

站點配置文件：

language: zh-CN # 最新版中，再也不使用zh-Hans

設置菜單

編輯主題配置文件：

menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

菜單內容的設置格式是：item name: link || icon。其中 `item name 是一個名稱，這個名稱並不直接顯示在頁面上，她將用於匹配圖標以及翻譯。

設置菜單項的顯示文本。在第一步中設置的菜單的名稱並不直接用於界面上的展現。Hexo 在生成的時候將使用 這個名稱查找對應的語言翻譯，並提取顯示文本。這些翻譯文本放置在 NexT 主題目錄下的 languages/{language}.yml （{language} 爲你所使用的語言）。

icon 使用的是 fontawesome 圖標，嚴格區分大小寫。

設置頭像

將準備好的頭像放置在主題目錄下的 source/images/ 中。

avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/logo.jpg

百度統計

1. 登陸百度統計， 定位到站點的代碼獲取頁面
2. 複製 hm.js? 後面那串統計腳本 id，如：
3. 編輯 主題配置文件， 修改字段 baidu_analytics 字段，值設置成你的百度統計腳本 id

閱讀次數

使用 LeanCloud

參考這個 爲NexT主題添加文章閱讀量統計功能

leancloud_visitors:
  enable: true # 啓用了 valine，因此這裏能夠置爲 false
  app_id: xxx
  app_key: xxx

設置 RSS

主題配置文件中，rss 字段設爲空，啓用，設爲 false 則不啓用。啓用的話，須要安裝插鍵：

npm install hexo-generator-feed --save

添加標籤頁面

1. 新建頁面 hexo new page tags
2. 設置頁面類型，編輯剛新建的頁面，將頁面的類型設置爲 tags ，主題將自動爲這個頁面顯示標籤雲

title: 標籤
date: 2014-12-22 12:39:04
type: "tags"
---

若是有集成評論服務，頁面也會帶有評論。 若須要關閉的話，請添加字段 comments 並將值設置爲 false，如：

title: 標籤
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---

1. 修改菜單，在菜單中添加連接。編輯 主題配置文件 ， 添加 tags 到 menu 中

標籤示例：

title: 標籤測試文章
tags:
  - Testing
  - Another Tag

請參閱 Hexo 的分類與標籤文檔，瞭解如何爲文章添加標籤或者分類

補充：

categories:
- Diary
tags:
- PS3
- Games

分類方法的分歧
若是您有過使用WordPress的經驗，就很容易誤解Hexo的分類方式。WordPress支持對一篇文章設置多個分類，並且這些分類能夠是同級的，也能夠是父子分類。可是Hexo不支持指定多個同級分類。下面的指定方法：

categories:
- Diary
- Life

會使分類Life成爲Diary的子分類，而不是並列分類。所以，有必要爲您的文章選擇儘量準確的分類。

並列分類，瞭解一下：

categories:
- [Linux]
- [Tools]

並列+子分類，再瞭解一下：

categories:
- [Linux, Hexo]
- [Tools, PHP]

一樣的方法，添加分類頁面：

$ hexo new page categories

設置字體

設置字體可參考:官宣-字體

設置代碼高亮主題

代碼高亮預覽

# Code Highlight theme
# Available value: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties

側邊欄社交連接

主題配置文件：

social:
  GitHub: https://github.com/Michael728 || github
  微博: https://weibo.com/1838446070/profile?topnav=1&wvr=6 || weibo
  博客園: https://www.cnblogs.com/michael-xiang/ || globe
  知乎: https://www.zhihu.com/people/michaelXoX || globe
  Twitter: https://twitter.com/728_michael || twitter
  Telegram: https://t.me/michaelxiang || telegram

圖標名稱 是 Font Awesome 圖標的名字（沒必要帶 fa- 前綴）。 enable 選項用於控制是否顯示圖標，你能夠設置成 false 來去掉圖標

social_icons:
  enable: true
  icons_only: false
  transition: false

開啓打賞功能

只須要 主題配置文件 中填入 微信 和 支付寶 收款二維碼圖片地址 便可開啓該功能：

reward_settings:
  # If true, reward would be displayed in every article by default.
  # You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter.
  enable: true
  animation: false
  comment: 我知道是不會有人點的，但萬一有人想不開呢👇

reward:
  wechatpay: /images/wechatpay.jpg
  alipay: /images/alipay.png

友情連接

# Blog rolls
links_icon: link
links_title: 關注列表 #Links
links_layout: block
#links_layout: inline
links:
  #Title: http://example.com
  Blog List: https://michael728.github.io/2018/09/16/blog-interesting/
  ZeeCoder: https://zcheng.ren/posts/
  ehlxr: https://ehlxr.me/
  卡瓦邦噶: https://www.kawabangga.com/
  David Dai: https://blog.stdioa.com/
  建站日誌: https://michael728.github.io/2016/09/03/blog-logfile/

站點創建時間

這個時間將在站點的底部顯示，例如 ©2013 - 2015。 編輯 主題配置文件，新增字段 since：

訂閱微信公衆號

# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 歡迎您掃一掃上面的微信公衆號，訂閱個人博客！

設置動畫效果

主題配置文件設置。比較在意速度，能夠關閉動畫。

# Use velocity to animate everything.
motion:
  enable: true
  async: false
  transition:
    # Transition variants:
    # fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
    # swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
    # bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
    # slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
    # slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
    # perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
    post_block: fadeIn
    post_header: slideDownIn
    post_body: slideDownIn
    coll_header: slideLeftIn
    # Only for Pisces | Gemini.
    sidebar: slideUpIn

設置背景動畫

編輯 主題配置文件， 搜索 canvas_nest 或 three_waves，根據您的需求設置值爲 true 或者 false 便可

我只啓用了 canvas_nest

canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1.0.0/canvas-nest.min.js
  canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest-nomobile.min.js

搜索--Local Search

$ npm install hexo-generator-searchdb --save

站點配置文件，新增以下內容：

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

編輯主題配置文件，啓用本地搜索：

# Local search
local_search:
  enable: true

不蒜子統計

編輯 主題配置文件 中的 busuanzi_count 的配置項：

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  # 文章閱讀次數，關閉，避免與leanclound_visitors衝突
  post_views: false
  post_views_icon: eye

fancybox

fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages

• 檢查_config.yml 中是否開啓了 fancybox
• 找到 vendors，把 fancybox 和 fancybox_css 設置成推薦值

參考：

• [文章裏面的圖片點擊沒有反應，也沒有放大效果 [solved]](https://github.com/theme-next...

內容分享

theme-next-needmoreshare2：

cd themes/next
git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton

主題配置文件配置：

needmoreshare2:
  enable: true
  postbottom:
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

評論

Next 評論配置很簡單，支持很豐富。

front matter 中設置 comments: false，當前頁就不會顯示評論框了。

Disqus 評論啓用，可是得網絡暢通才能看到：

disqus:
  enable: true
  shortname: xxx
  count: true

編輯 主題配置文件， 將 disqus 下的 enable 設定爲 true，同時提供您的 shortname。count 用於指定是否顯示評論數量

vline

Valine這個評論系統也是用到了 leancloud

• 點擊登陸或註冊Leancloud;
• 建立應用(若是已經建立了博客應用，就不用再建立了)
• 獲取 APP ID 和 APP KEY: 剛剛建立的應用 > 設置 > 應用 KEY

valine:
  enable: false # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
  appid:  xxx # your leancloud application appid
  appkey:  xxx # your leancloud application appkey
  notify: true # mail notifier , https://github.com/xCss/Valine/wiki https://valine.js.org/notify.html
  verify: true # Verification code
  placeholder: ヾﾉ≧∀≦)o來啊，快活啊!  # comment box placeholder
  avatar: identicon # wavatar retro gravatar style https://github.com/xCss/Valine/wiki/avatar-setting-for-valine
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size
  visitor: true # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html

• visitor 文章訪問量統計。
• recordIP，默認是 fasle，是否記錄評論者IP
• valine 配置項查看

頭像設置，能夠用你對應的郵箱設置 Gravatar，這樣你評論時，就是註冊時使用的郵箱了。

郵件提醒，進入Leancloud>選擇你的評論所存放的應用>設置>郵件模板，按下圖設置好用於重置密碼的郵件主題>而後保存:

<p>Hi, {{username}}</p>
<p>
你在 {{appname}} 的評論收到了新的回覆，請點擊查看：
</p>
<p><a href="https://michael728.github.io/" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">立刻查看</a></p>

參考：

• valine-admin
• 在 NexT 中使用 Valine 評論系統

hexo next 新增閱讀排行頁面

參考這兩個教程：

• hexo next 新增閱讀排行頁面
• 打造個性超讚博客Hexo+NexT+GitHubPages的超深度優化
• 在 NexT 中使用 Valine 評論系統

在Hexo博客中加入豆瓣讀書頁面

hexo-douban 能夠實現生成豆瓣讀書、電影、遊戲的頁面。具體的使用方法能夠看項目的主頁或者這篇文章

• 在Hexo博客中加入豆瓣讀書頁面

hexo clean && hexo douban -bm && hexo g &&hexo deploy

看板娘

• EYHN/hexo-helper-live2d Hexo 博客照着配置就行
• live2d-看板娘預覽
• 用Live2D讓看板喵入住你的Hexo博客吧(^o^)/~
• 給博客添加能動的看板娘(Live2D)-關於模型的二三事 Hexo 博客看板娘配置進階
• 博客園添加Live2d看板娘 博客園增長看板娘

SEO 優化

• Hexo博客Next主題SEO優化方法
• Hexo-Next搭建我的博客（SEO優化）
• Hexo+Next主題搭建博客安裝美化及SEO優化指南

參考

• Michael翔
• hexo：（三）hexo Next 主題下載和配置
• 打造個性超讚博客Hexo+NexT+GitHubPages的超深度優化
• 手摸手教你用github和hexo搭建我的博客（五）
• hexo的next主題個性化配置教程
• NexT 主題的擴展以及設置
• Sanarous-使用Hexo+Next主題搭建本身的我的博客