前言

對於廣大CS專業的學生和碼農，找一個地方寫博客，記錄一些編程、配置環境、閱讀論文的心得體會是一個很常見的習慣。當然想搭建個人博客，就需要找個靠譜的平臺，主要就是以下的兩種方式：

• 使用網站提供的博客平臺，例如國內的CSDN、博客園；國外的Blogger、Wordpress
• 自己建站，發布到自己的服務器上，或者發布到GitHub、GitLab、Bitbucket等支持靜態網頁發布的git平臺

針對於第一種方式，最大的特點就是省心。CSDN和博客園都支持多種編輯器，其中就包括Markdown。而且基本上不需要任何設置，註冊個賬號直接寫文章就可以了。缺點是國內的這些平臺都不支持使用自有域名，而且在海外訪問速度也不快，有些平臺還有廣告。國外的平臺，blogger支持自有域名，但是很多設置都不太好用，而WordPress很多功能是收費的。而且這兩個平臺好像在國內無法訪問。總而言之，就是使用別人家的平臺，可以改的東西就會比較少，受到的限制也很多。

所以許多人就選擇了第二種方式。第二種方式也有很多選擇。比如hexo、jekyll，而且WordPress也提供開源安裝包可以部署在自己的服務器上。相對於自己購買服務器，我更傾向於使用GitHub、GitLab這些支持Pages服務的平臺。原因很簡單，自己買服務器首先就要花錢，而且在各種網絡條件下鏈接速度也不好保證。GitHub Pages服務雖然有容量上限，但對於博客而且基本等於沒有。有著良好的CDN，全世界訪問起來都很快。而且支持綁定自有域名，提供SSL認證實現https。最重要的是，所有的服務都是免費的。

使用GitHub Pages服務搭建博客，主要就是hexo和jekyll兩個平臺。這兩個平臺都支持Markdown，這一點是最重要的。GitHub Pages服務官方支持的是jekyll，所以jekyll可以在不進行設置的情況下實現CI/CD（持續集成Continuous integration和持續發布 Continuous delivery）。簡單來說就是不進行任何配置的情況下直接把Markdown和jekyll的源文件git push到服務器上，網站就會自動編譯和發布出來。hexo也支持CI但要進行配置。

但是，很多用戶都反映jeyll速度不如hexo。而且我個人覺得hexo主題管理方面是要優於jekyll了，好看的主題也更多。所以本文介紹hexo+GitHub搭建博客。

下載安裝hexo

hexo官網提供了良好的開發文檔，並且提供了簡體中文的版本。其實安裝過程參照官網一步步來就沒有什麽問題。本文也以ubuntu為例簡述一下安裝配置過程。其他Unix內核的系統比如Debian、macOS過程也很類似。

首先需要安裝npm：

sudo apt-get install python-software-propertie
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install nodejs
 

檢查npm的版本，如果能正常顯示版本號則安裝成功：

npm -v

安裝完npm，就可以安裝hexo了：

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo s

然後訪問http://localhost:4000，如果顯示正常，就說明hexo已經安裝完成。

這裏提供一些hexo的命令，你也可以在官方幫助文檔裏面找到更全面的命令清單。

npm install hexo -g #安裝Hexo
npm update hexo -g #升級 
hexo init #初始化博客

hexo n "new post" == hexo new "new post" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #啟動服務預覽
hexo d == hexo deploy #部署

hexo server #Hexo會監視文件變動並自動更新，無須重啟服務器
hexo server -s #靜態模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定義 IP
hexo clean #清除緩存，若是網頁正常情況下可以忽略這條命令

將項目部署到GitHub

首先在GitHub新建一個空的Repository，名字為your-username.github.io（把your-username替換為你的用戶名），這樣GitHub會自動將網頁發布到your-username.github.io。

[email protected]:y2l/y2l.github.io.git

打開_config.yml 文件，找到deploy，進行如下配置：

deploy:
  type: git
  repo: [email protected]:y2l/y2l.github.io.git
  branch: master

然後執行：

npm install hexo-deployer-git --save
hexo clean
hexo g
hexo d

這樣生成的靜態網頁就被推送到GitHub上了。

然後你需要在GitHub對應的Repository的settings界面上（https://github.com/your-username/your-username.github.io/settings），在GitHub Pages的Source設置中，選擇master branch並點擊save。這樣，幾分鐘之後你的網頁就被發布了。

綁定自己的域名

選擇域名註冊上並註冊域名可以參考：域名註冊與域名解析

配置域名給GitHub Pages可以參考《通過Github實現URL轉發》中配置域名的相關部分。

GitHub可以免費提供SSL認證，實現https，在settings中可以一鍵開啟。

要註意的是，如果使用自己的域名，你需要在source目錄下創建一個名為CNAME的文檔，在其中輸入你的域名。如果不建立這個文檔，每次部署的時候GitHub Pages的域名配置都會被清空。

配置和使用NexT主題

之所以使用hexo搭建博客，就是為了使用hexo所支持的大量主題。這裏就像大家介紹一個界面幹凈整潔，很多hexo博客都使用的主題：NexT。這個主題提供良好的中文開發文檔。而且功能齊全，一個博客需要有的功能，比如標簽、分類、背景設置、分享、評論功能、計數器、Google Analytics等等很多功能都被集成進去，可以說是非常好用。

安裝NexT

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

然後修改站點配置文件_config.yml， 找到 theme字段，並將其值更改為 next。

theme: next

到此，NexT 主題安裝完成。

然後執行如下命令查看效果：

hexo clean
hexo s

基本信息配置

基本信息包括：博客標題、作者、描述、語言等等。

打開 站點配置文件 ，找到Site模塊

title: 標題
subtitle: 副標題
description: 描述
author: 作者
language: 語言（簡體中文是zh-Hans）
timezone: 網站時區（Hexo 默認使用您電腦的時區，不用寫）

關於 站點配置文件 中的其他配置可參考站點配置

菜單設置

菜單包括：首頁、歸檔、分類、標簽、關於等等

我們剛開始默認的菜單只有首頁和歸檔兩個，不能夠滿足我們的要求，所以需要添加菜單，打開 主題配置文件 找到Menu Settings

menu:
  home: / || home                          //首頁
  archives: /archives/ || archive          //歸檔
  categories: /categories/ || th           //分類
  tags: /tags/ || tags                     //標簽
  about: /about/ || user                   //關於
  #schedule: /schedule/ || calendar        //日程表
  #sitemap: /sitemap.xml || sitemap        //站點地圖
  #commonweal: /404/ || heartbeat          //公益404

看看你需要哪個菜單就把哪個取消註釋打開就行了；
關於後面的格式，以archives: /archives/ || archive為例：
|| 之前的/archives/表示標題“歸檔”，關於標題的格式可以去themes/next/languages/zh-Hans.yml中參考或修改
||之後的archive表示圖標，可以去Font Awesome中查看或修改，Next主題所有的圖標都來自Font Awesome。

Next主題樣式設置

我們百裏挑一選擇了Next主題，不過Next主題還有4種風格供我們選擇，打開 主題配置文件 找到Scheme Settings

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

側欄設置

側欄設置包括：側欄位置、側欄顯示與否、文章間距、返回頂部按鈕等等

打開 主題配置文件 找到sidebar字段

sidebar:
# Sidebar Position - 側欄位置（只對Pisces | Gemini兩種風格有效）
  position: left        //靠左放置
  #position: right      //靠右放置

# Sidebar Display - 側欄顯示時機（只對Muse | Mist兩種風格有效）
  #display: post        //默認行為，在文章頁面（擁有目錄列表）時顯示
  display: always       //在所有頁面中都顯示
  #display: hide        //在所有頁面中都隱藏（可以手動展開）
  #display: remove      //完全移除

  offset: 12            //文章間距（只對Pisces | Gemini兩種風格有效）

  b2t: false            //返回頂部按鈕（只對Pisces | Gemini兩種風格有效）

  scrollpercent: true   //返回頂部按鈕的百分比

頭像設置

打開 主題配置文件 找到Sidebar Avatar字段

# Sidebar Avatar
avatar: /images/header.jpg

這是頭像的路徑，只需把你的頭像命名為header.jpg（隨便命名）放入themes/next/source/images中，將avatar的路徑名改成你的頭像名就OK啦！

RSS設置

先安裝 hexo-generator-feed 插件

npm install hexo-generator-feed --save

打開 站點配置文件 找到Extensions在下面添加

# RSS訂閱
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '

打開 主題配置文件 找到rss，設置為

rss: /atom.xml

添加分類模塊

新建一個分類頁面

hexo new page categories

你會發現你的source文件夾下有了categorcies/index.md，打開index.md文件進行如下設置

---
title: 分類
type: "categorcies"
comments: false
---

打開 主題配置文件 找到menu，將categorcies取消註釋
把文章歸入分類只需在文章的頂部標題下方添加categories字段，即可自動創建分類名並加入對應的分類中， 如：

title: 分類測試文章標題
categories: 分類名

添加標簽模塊

新建一個標簽頁面

hexo new page tags

你會發現你的source文件夾下有了tags/index.md，打開index.md文件，進行如下設置：

---
title: 標簽
type: "tags"
comments: false
---

打開 主題配置文件 找到menu，將tags取消註釋

把文章添加標簽只需在文章的頂部標題下方添加tags字段，即可自動創建標簽名並歸入對應的標簽中
舉個栗子：

title: 標簽測試文章標題
tags: 
  - 標簽1
  - 標簽2
  ...

添加關於模塊

新建一個關於頁面

hexo new page about

你會發現你的source文件夾下有了about/index.md，打開index.md文件即可編輯關於你的信息，可以隨便編輯。 打開 主題配置文件 找到menu，將about取消註釋，該頁面就能夠正常顯示。

添加搜索功能

安裝 hexo-generator-searchdb 插件

npm install hexo-generator-searchdb --save

打開 站點配置文件 找到Extensions在下面添加

# 搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

打開 主題配置文件 找到Local search，將enable設置為true

添加閱讀全文按鈕

因為在你的博客主頁會有多篇文章，如果你想讓你的文章只顯示一部分，多余的可以點擊閱讀全文來查看，那麽你需要在你的文章中添加

<!--more-->

後記

至此你的博客就算簡單的配置完成了。hexo的NexT主題還集成了評論、分享等眾多第三方插件，大家今後還可以慢慢開發。寫博客不是做網站，如果你希望建立一個有價值的博客，還應該更加重視博客的內容。hexo給我們提供了一個良好的平臺，也希望大家都能多多分享自己的經驗和見解。

參考文獻

GitHub+Hexo 搭建個人網站詳細教程

Hexo的Next主題詳細配置

NexT使用文檔

使用hexo+GitHub搭建個人博客的心得（含教程）