使用 Hexo & GitPage 搭建博客

概述

GitPage 是個什麼東西？它和 GitHub 是什麼關係？Hexo 又是什麼？它和 GitPage 又是什麼關係？爲什麼我要用 Hexo + GitPage 搭建博客？這些問題在我不瞭解 GitPage 之前都是一堆問號，想必大多數小白都和我一樣很懵，現在網上關於搭建博客的教程一大堆，但是當初我在搭建的時候照着步驟一步一步搞感覺很不爽，直到最後博客搭完了才明白以上幾個問題，所以這裏我想先給大家回答一下上面幾個問題，然後再逐步教大家使用 Hexo + GitPage 搭建屬於你自己的博客。

Hexo 簡述

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，使用 Node.js 渲染頁面，通常在很短的時間內即可利用靚麗的主題生成靜態網頁。同時 Hexo 也擁有強大的插件系統，支持 Jade, CoffeeScript 等諸多強大插件。

GitPage 簡述

GitPage 與 GitHub 同屬一個組織 GitHub Inc.，可以說 GitPage 出生的目的就是爲了服務於 GitHub，我們知道 GitHub 上有衆多非常優秀的開源項目，有些項目比較大，涉及到框架級別的項目它的說明文檔就不是寫幾個 Readme 就能講清楚的事了，所以這種情況下這些項目的維護者就急需一個站點來詳盡展示此項目的功能、用法、及更新動態等等，比如大名鼎鼎的 ReactiveX 的 GitPage 地址爲 http://reactivex.github.io 你在瀏覽器訪問這個 URL 會自動跳轉到 reactivex.io，這是其自定義域名（這是 GitPage 又一個很讚的功能，後面詳細介紹），那麼問題來了，程序猿們雖然看起來比較萬能，但實際上並不是萬能的，所以可能一些研究底層架構，程序開發很 NB 的程序員卻真的是 HTML、CSS、Linux 小白，畢竟術業有專攻啊，所以這時候讓他們自己去搭個站點就真的頭疼了，畢竟是有時間成本的。

於是 GitPage 誕生了，GitPage 允許你將你的博客創建爲一個 GitHub Project，通過 your-account.github.io 這樣的特殊項目名稱與 GitPage 進行關聯，然後，你只需要像平時一樣 commit 你的博文到 GitHub 上就 OK 了，GitPage 會自動將你的更新部署出去，完全不需要考慮服務器、數據庫、運維、甚至 HTML 等這些發佈站點的必備技能，所以 GitPage 誕生的目的就是要把你的專注點拉回到寫文章上而不需要花時間去考慮其它事情。

這時你可能會注意到，我要如何去個性化我的站點？我真的僅僅需要 commit 一個文件上去就 OK 嗎？當然不是的，想要個性化自己的站點還需要一個博客框架以及一款可自由配置的主題，接着 Hexo 閃亮登場[手動撒花]，Hexo 簡述在上面，詳細介紹請看 Hexo 中文官網，Hexo 很好的支持了 Markdown 語法的解析，炫酷的博客主題也很多，大家可以去 Hexo Themes 慢慢挑選，我目前用的是 NexT 這個主題。

OK ，接下來正式開始着手搭建吧。

搭建步驟

環境準備

安裝 Node.js（我們要用它來安裝博客框架、渲染主題等）。
安裝 Git（我們要用它來下載主題、提交、部署文章等）。

安裝 Hexo

以上兩個必備程序安裝完成後，只需要用 git-bash 執行如下命令即可安裝 Hexo。

$ npm install -g hexo-cli

建站

安裝 Hexo 完成後，請執行下列命令，Hexo 將會在指定文件夾 <folder> 中新建所需要的文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成後，指定文件夾 <folder> 的目錄如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

文件/文件夾	作用
_config.yml	網站的配置文件
package.json	應用程序的信息
scaffolds	模版文件夾。當您新建文章時，Hexo 會根據 scaffold 來建立文件
source	資源文件夾是存放用戶資源的地方。除 _posts 文件夾之外，開頭命名爲 _ (下劃線)的文件 / 文件夾和隱藏的文件將會被忽略。Markdown 和 HTML 文件會被解析並放到 public 文件夾，而其他文件會被拷貝過去
themes	主題文件夾。Hexo 會根據主題來生成靜態頁面

創建主題

使用如下命令下載主題：

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

你也可以下載多個主題，然後修改 _config.yml（注意是網站的配置文件而非主題的配置文件）內的 theme 設定，即可切換主題。一個主題通常有以下結構：

.
├── _config.yml
├── languages
├── layout
├── scripts
└── source

文件/文件夾	作用
_config.yml	主題的配置文件
languages	語言文件夾，請參見國際化 (i18n)
layout	佈局文件夾。用於存放主題的模板文件，決定了網站內容的呈現方式，您可參考模板以獲得更多信息
scripts	腳本文件夾。在啓動時，Hexo 會載入此文件夾內的 JavaScript 文件，參見插件獲取更多信息
source	資源文件夾，除了模板以外的 Asset，例如 CSS、JavaScript 文件等，都應該放在這個文件夾中。文件或文件夾開頭名稱爲 _（下劃線線）或隱藏的文件會被忽略

主題配置

每個主題的配置文件 _config.yml 內容可能都不太一樣，但是大致都包括了菜單欄、側邊欄、站點圖標、頭像等常用項，如下是 NexT 主題的部分配置細節展示，其它主題可以去主題官網詳細瞭解。

站點圖標設置：

favicon:
  small: /images/skyrin-16.png
  medium: /images/skyrin-32.png
  apple_touch_icon: /images/skyrin-180.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

頁腳設置：

footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  #since: 2015

  # Icon between year and copyright info.
  icon: heart

  # If not defined, will be used `author` from Hexo main config.
  copyright:
  # -------------------------------------------------------------
  # Hexo link (Powered by Hexo).
  powered: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: true
  custom_text : Hosted by <a target="_blank" href="https://pages.coding.me" style="font-weight:bold">Coding Pages</a>

菜單設置：

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

# Enable/Disable menu icons.
menu_icons:
  enable: true

方案設置：

#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

社交：

social:
  GitHub: https://github.com/ || github   #‘||’右側爲小圖標名稱，圖標來源 https://fontawesome.com/，可自定義
  E-Mail: mailto:[email protected] || envelope
  簡書: https://www.jianshu.com/u/32f1afa17c58 || 
  音樂: http://www.xiami.com/collect/360454952 || music
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

social_icons:
  enable: true
  icons_only: false
  transition: false

側欄頭像：

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /images/avatar.gif

測試及部署站點

如果在/themes目錄下包含多個主題樣式的話，請先在網站配置文件_config.yml中指定你需要使用樣式

theme: next # 參數必須與 /themes 目錄下主題目錄名相同

在站點根目錄打開命令行，執行hexo s，如下圖所示狀態

image.png

在瀏覽器中訪問http://localhost:4000/即可預覽網站全貌，在命令行 Ctrl+C 即可停止預覽。

如果樣式符合預期的話即可部署到 GitHub 或者其它提供 Page 託管的服務站點了，下面將以部署到 GitHub 爲例進行操作：

1、安裝 deploy git 插件

npm install hexo-deployer-git --save

2、在 GitHub 創建一個名爲<username>.github.io.git的倉庫 3、在主題配置文件_config.yml中修改倉庫地址

deploy:
  type: git
  repo: 
    github: [email protected]:<username>/<username>.github.io.git

4、執行hexo d即可發佈到 GitHub 倉庫 5、新增或修改主題後請執行hexo clean && hexo d清理緩存文件並部署

注：這裏使用 ssh 協議而非 http，所以請先確保您已經在 GitHub 添加了公鑰。

自定義域名

1、首先你需要去域名註冊商（阿里雲騰訊雲等）買一個域名 2、在根站點下source目錄中添加CNAME文件，文件內容爲您購買的域名xxx.com，不要添加www、mail等子域例如www.xxx.com或mail.xxx.com 3、前往域名控制檯解析此域名到github.io，根據 gitpage 的自定義域名要求，他們建議解析到github.io的數字 ip 地址，即151.101.129.147

image.png

在控制檯設置域名解析，添加 A 記錄指向 151.101.129.147 即可

image.png

注意上圖的解析線路選項，我是同時將站點託管在 GitHub 和 Coding.net 的，所以會有兩條解析記錄，本來打算用 Coding 作爲國內線路 GitHub 作爲國外線路，但最後經過測試境內 GitHub 的 ping 值雖然高於 Coding ，但訪問速度還是比 Coding 快，所以我將 Coding 的解析停掉了；這也許是我的網絡情況導致，大家可以隨便試試自由分配解析線路擇優選擇不必參照我的來。

4、命令行執行hexo d發佈站點到 GitHub 庫，這時在 Git 庫應該就能看到 CNAME 文件，至此自定義域名設置完畢，現在使用xxx.com即可訪問站點

image.png

插件

評論插件

來必力(LiveRe)，國內衆多評論系統由於各種原因紛紛停服，這個評論系統是韓國的，在國內也有中文官網 http://www.laibili.com.cn/ ，詳細介紹請看 livere introduce，這個系統的集成也很簡單速度還算可以、支持後臺評論管理，在如今國內沒有選擇的情況下也算是個不錯的選擇。

如果你是 NexT5.0+ 主題的話，直接在主題的配置文件中找到 livere_uid 項填入自己申請的來必力 uid 即可自動激活此插件，uid 申請只需註冊賬號，然後在 apply 頁面選擇版本進行設置，完成後在如下頁面就能看到 uid，一般網站可以直接將這段代碼塊插入頁面即可生效。

image.png

分享插件

我的博客用的是百度分享，無需註冊，如果你需要更多自定義設置就去要登陸官網去仔細設置了，主要樣式有如下兩種：

button 樣式如下，就是我當前使用的：

<div class="bdsharebuttonbox">
  <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
  <a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣網"></a>
  <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
  <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空間"></a>
  <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
  <a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度貼吧"></a>
  <a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a>
  <a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
  <a href="#" class="bds_more" data-cmd="more"></a>
  <a class="bds_count" data-cmd="count"></a>
</div>
<script>
  window._bd_share_config = {
    "common": {
      "bdText": "",
      "bdMini": "2",
      "bdMiniList": false,
      "bdPic": ""
    },
    "share": {
      "bdSize": "16",
      "bdStyle": "0"
    }
  }
</script>

slide 樣式：

<div class="bdsharebuttonbox">
  <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
  <a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣網"></a>
  <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
  <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空間"></a>
  <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
  <a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度貼吧"></a>
  <a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a>
  <a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
  <a href="#" class="bds_more" data-cmd="more"></a>
  <a class="bds_count" data-cmd="count"></a>
</div>
<script>
  window._bd_share_config = {
    "common": {
      "bdText": "",
      "bdMini": "1",
      "bdMiniList": false,
      "bdPic": ""
    },
    "slide": {
      "bdImg": "5",
      "bdPos": "left",
      "bdTop": "100"
    }
  }
</script>

文章字數、閱讀時長統計

NexT5.0+ 主題內置了統計全站字數、單篇文章字數、閱讀時長的插件，該插件開源地址點這裏，要啓用此功能只需在主題配置文件 _config.yml 中如下部分開啓即可。

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: false
  separated_meta: true

注意，如果出現統計字數或時間沒有出現的話，檢查網站的 package.json 文件查看是否安裝了 hexo-wordcount 插件。

image.png

沒有安裝的話用 npm 如下安裝就行了。

npm install hexo-wordcount --save

Ok，以上就是本文全部內容，有任何問題歡迎下方留言。

使用 Hexo & GitPage 搭建博客

概述

Hexo 簡述

GitPage 簡述

搭建步驟

環境準備

安裝 Hexo

建站

創建主題

主題配置

測試及部署站點

自定義域名

插件

評論插件

分享插件

文章字數、閱讀時長統計

salesforce零基礎學習（一百三十八）零碎知識點小總結（十）

關於接口協議，你必須要知道這些！

一鍵自動化博客發佈工具,用過的人都說好(頭條篇)

01 穩定性（一）如何應對事故並做好覆盤？

美團一面：項目中有 10000 個 if else 如何優化？想了半天，被問懵了！

京東面試：如何進行JVM調優？

線程池那些坑爹的參數-核心線程數&最大線程數&工作隊列

Stream流常用方法總結

Fiddler 極速上手

LitePal 的基本用法

FloatWindowUtils 實現及事件衝突解決詳解

Android 7.0 FileUriExposedException 的處理

如何多端同步 Hexo 框架博客

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結