利用GitHub和Hexo打造免費的個人博客

每個程序猿都需要一個個人博客，目前廣泛出現在大家視野里的有CSDN、博客園、簡書，但是他們卻沒有給用戶一個專屬的站點、一個好記的域名。你需要一個//xxx.xxx.xxx/格式的網址，一個自由書寫代碼的站點，一個真正的個人博客。

1. GitHub提供的免費網站

1.1 GitHub——面向開源及私有軟件項目的託管平台

GitHub官網

作為開源代碼庫以及版本控制系統，Github擁有超過900萬開發者用戶。隨着越來越多的應用程序轉移到了雲上，Github已經成為了管理軟件開發以及發現已有代碼的首選方法。
——來源：百度百科

GitHub是目前最大的代碼倉庫，如果你還沒有GitHub賬號的話，就趕緊去官網註冊一個吧。

1.2 GitHub Pages——免費提供最基礎的靜態網站

GitHub Pages官網

每個GitHub賬戶都可以免費開一個自己的靜態網站（域名為 username.github.io），該網站由GitHub Pages提供，省去了域名、服務器、備案等一系列建站需要考慮的問題，只需要一份靜態網站的代碼即可。

首先你需要創建一個GitHub Pages repository。GitHub Pages repository跟普通的repository是一樣的，唯一的區別就是他的名字必須叫做username.gihub.io。這個官方教程 GitHub Pages 寫的十分好懂，按這個做完之後你就有了一個你的網址username.github.io！
比如你的GitHub用戶名是abc，那麼你的repository名稱和網址就是abc.gihub.io

現在離一個好網站只差一步了，就是把某個好網站的所有文件拷貝到你的庫裏面。
GitHub官方建議你使用博客生成工具Jekyll 。GitHub在庫的設置裏面還提供Jekyll主題選擇。

本文將介紹的是Hexo生成工具。

2. Hexo搭建的靜態博客網站

2.1 Hexo——快速、簡潔且高效的博客框架

Hexo官網

超快速度
Node.js 所帶來的超快生成速度，讓上百個頁面在幾秒內瞬間完成渲染。
支持 Markdown
Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多數插件。
一鍵部署
只需一條指令即可部署到 GitHub Pages, Heroku 或其他網站。
豐富的插件
Hexo 擁有強大的插件系統，安裝插件可以讓 Hexo 支持 Jade, CoffeeScript。

2.1.1 安裝前提

安裝Hexo相當簡單。然而在安裝前，您必須檢查電腦中是否已安裝下列應用程序：

  • Node.js (Should be at least nodejs 6.9)
  • Git

如果您的電腦中已經安裝上述必備程序，那麼恭喜您！接下來只需要使用npm即可完成Hexo的安裝。

$ npm install -g hexo-cli

如果您的電腦中尚未安裝所需要的程序，請根據以下安裝指示完成安裝。

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

2.1.2 安裝 Git

Windows：下載並安裝 git.
Mac：使用 Homebrew, MacPorts ：brew install git;或下載 安裝程序 安裝。
Linux (Ubuntu, Debian)：sudo apt-get install git-core。
Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core。

Windows 用戶
由於眾所周知的原因，從上面的鏈接下載git for windows最好掛上一個代理，否則下載速度十分緩慢。也可以參考這個頁面，收錄了存儲於百度雲的下載地址。

2.1.3 安裝 Node.js

安裝 Node.js 的最佳方式是使用 nvm。

cURL:

$ curl //raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

Wget:

$ wget -qO- //raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

安裝完成後，重啟終端並執行下列命令即可安裝 Node.js。

$ nvm install stable

或者您也可以下載 安裝程序 來安裝。

Windows 用戶
對於windows用戶來說，建議使用安裝程序進行安裝。安裝時，請勾選Add to PATH選項。
另外，您也可以使用Git Bash，這是git for windows自帶的一組程序，提供了Linux風格的shell，在該環境下，您可以直接用上面提到的命令來安裝Node.js。打開它的方法很簡單，在任意位置單擊右鍵，選擇「Git Bash Here」即可。由於Hexo的很多操作都涉及到命令行，您可以考慮始終使用Git Bash來進行操作。

2.1.4 安裝 Hexo

所有必備的應用程序安裝完成後，即可使用 npm 安裝 Hexo。

$ npm install -g hexo-cli

2.1.5 建站

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

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

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

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

2.2 Hexo的自定義配置及博客主題

2.2.1 _config.yml

網站的配置信息，您可以在此配置大部分的參數。文件內各個配置參數均有詳細備註，按規則填入所需即可。

2.2.2 package.json

應用程序的信息，EJS、 Stylus 和 Markdown renderer 已默認安裝，您可以自由移除。

package.json
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^3.8.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-server": "^0.3.3"
  }
}

2.2.3 scaffolds

模版文件夾，當您新建文章時，Hexo 會根據 scaffold 來建立文件。

Hexo的模板是指在新建的markdown文件中默認填充的內容。例如，如果您修改scaffold/post.md中的Front-matter內容，那麼每次新建一篇文章時都會包含這個修改。

2.2.4 source

資源文件夾是存放用戶資源的地方，除 _posts 文件夾之外，開頭命名為 _ (下劃線)的文件 / 文件夾和隱藏的文件將會被忽略。Markdown 和 HTML 文件會被解析並放到 public 文件夾，而其他文件會被拷貝過去。

2.2.5 themes

主題文件夾，Hexo 會根據主題來生成靜態頁面。GitHub上存在許多第三方主題，根據主題的文檔介紹引入Hexo項目中，會在主題文件夾下生成一個相應的文件夾，再修改_config.xml文件夾的theme屬性即可。

本文將要介紹的是Indigo主題。

3. Indigo主題——Material Design 風格的Hexo主題

Indigo in GitHub

僅支持 IE10+ 等現代瀏覽器。
去 jQuery，更輕。相信現代瀏覽器的原生兼容性。
使用 Less 作為 css 預處理器，需要安裝 hexo-renderer-less。
添加了英文字體支持 Roboto。
添加了一些波紋效果。
無前端依賴的分享實現。
基於靜態數據的站內搜索，無第三方侵入。
支持文章打賞。

現有兩個主題分支，我的博客中使用的是card分支卡片風格主題，master分支是舊版平鋪式風格主題。

3.1 安裝

安裝需確認你的 Hexo 版本在 3.0 以上，以及 Node 版本為 6.x 以上，在 Hexo 根目錄，執行以下命令。

git clone [email protected]:yscoder/hexo-theme-indigo.git themes/indigo

3.1.1 切換主題

執行git branch顯示所有本地分支，如果只存在一個分支，可以執行下面的命令獲取另一分支的主題。

# 獲取遠程 card 分支，並切換
$ git checkout -b card origin/card

# 獲取遠程 master 分支，並切換
$ git checkout -b master origin/master

此命令只需執行一次，之後使用git checkout [branch]命令在兩個主題之間切換。

3.1.2 依賴安裝

還是在 Hexo 根目錄，如果以下插件已安裝過，無需再次安裝。

Less

主題默認使用 less 作為 css 預處理工具。

$ npm install hexo-renderer-less --save

Feed

用於生成 rss。

$ npm install hexo-generator-feed --save

Json-content

用於生成靜態站點數據，用作站內搜索的數據源。

$ npm install hexo-generator-json-content --save

QRCode

用於生成微信分享二維碼。

可選，不安裝時會請求jiathis Api生成二維碼。

$ npm install hexo-helper-qrcode --save

3.1.3 開啟標籤頁

hexo new page tags

修改 hexo/source/tags/index.md 的元數據

layout: tags
comments: false
---

3.1.4 開啟分類頁

僅 card theme 支持。

hexo new page categories

修改 hexo/source/categories/index.md 的元數據

layout: categories
comments: false
---

3.2 常見問題

3.2.1 如何設置文章摘要

在 Markdown 中加 <!-- more -->

3.2.2 文章如何添加多個標籤

有兩種多標籤格式

tags: [a, b, c]

或

tags:
  - a
  - b
  - c

3.2.3 修改 brand 圖片（菜單上方背景圖）

替換 themes\indigo\source\img\brand.jpg，保持原文件名不變。

3.2.4 如何在文章中使用圖標

先到 fontawesome 找到你需要的圖標名，比如：book，按以下格式使用：

<i class="icon icon-book"></i>

圖標樣式前綴均為 icon，此外還有 5 個圖標大小調節類和 1 個間距類。

<!-- 1.3倍大小 -->
<i class="icon icon-book icon-lg"></i>
<!-- 2倍大小 -->
<i class="icon icon-book icon-2x"></i>
<!-- 3倍大小 -->
<i class="icon icon-book icon-3x"></i>
<!-- 4倍大小 -->
<i class="icon icon-book icon-4x"></i>
<!-- 5倍大小 -->
<i class="icon icon-book icon-5x"></i>
<!-- 5px右邊距 -->
<i class="icon icon-book icon-pr"></i>
<!-- 5px左邊距 -->
<i class="icon icon-book icon-pl"></i>

3.2.5 個別圖標無法顯示

如果你的瀏覽器安裝了 ADBlock，它會屏蔽 SNS 相關的內容，比如：Github。

解決辦法：可配置 ADBlock 不在你的站點運行。

3.2.6 生成站點後沒有樣式

安裝less

3.2.7 自行修改樣式線上不生效

因為主題默認引用 cdn 樣式，只有主題更新時，cdn 中的樣式才會變化。 如果想使用自己修改的樣式，需要把修改配置中的 cdn: false。這樣就不在引用cdn資源，使用本地資源了。

3.2.8 更改樣式後網站沒有生效

確認非緩存問題後，執行 hexo clean 再進行生成上傳。

建議每次提交時都執行一次hexo clean，可以在項目目錄下創建一個shell腳本，執行命令hexo clean && hexo generate --deploy，運行後即可保證每次修改都能生效。

3.2.9 更改站點配色

編輯 themes\indigo\source\css_partial\variable.less，更改對應的顏色變量。

配色參考：Material Design Color Palette Generator

注意：使用自定義配色時需把主題配置中的 cdn 關閉，cdn: false。

3.2.10 添加404頁面

在 hexo/source 目錄內新建 404.html。

設置元數據信息，如果不想套用主題布局可設置 layout 為 false。

layout: false    
title: "My Blog Name | 404"
---

3.2.11 在博客中使用 Emoji

參考 Can i use emoji in mypage?

3.3 自定義頁面

主題 Card 分支為自定義頁面提供了定製化模塊支持，特此簡單介紹。

3.3.1 創建自定義頁面

hexo new page pageName

執行命令後會在你的 Hexo 根目錄 source/ 目錄下生成一個與你剛才輸入的 pageName 一樣的文件夾，裏面只有一個 index.md。

3.3.2 頁面配置

layout: page      # 必須
title: pageTitle  # 必須，頁面名稱
description: 用戶自定義頁面功能演示       # 頁面二級標題，描述性文字
comments: false     # 禁用評論，可選，默認開啟
reward: false       # 禁用打賞，可選，默認開啟
----

3.3.3 模塊和內容輸入

自定義頁面中，image、blockquote、pre 等將被賦予特殊的樣式。此外，提供了@moduleName{ ... }格式的標記用於包裹內容，賦予樣式。

Tags:

VirMach 便宜 VPS

QNews

QNews