一般我們要搭建一個個人的博客站點需要買服務器、域名，裝各種運行環境等等，非常的費錢費力。
其實就算沒有這些，我們也是照樣可以通過Hexo框架結合GitHub Pages搭建一個自己的博客站點的。
Hexo 這個博客框架沒有那么重量級，它是 MarkDown 直接寫文章的，然后 Hexo 可以直接將文章編譯成靜態網頁文件並發布，所以這樣文章的內容、標題、標簽等信息就沒必要存數據庫里面了，是直接純靜態頁面了，這就解決了數據庫的問題。
1、准備條件
- GitHub賬號
- 域名(可選)
2、新建GitHub項目
首先在 GitHub 新建一個倉庫（Repository），名稱為 {username}.github.io，注意這個名比較特殊，必須要是 github.io 為后綴結尾的。比如我的用戶名是59devops，那么就新建一個59devops.github.io的倉庫。
3、為倉庫配置SSH-Key
因為后期我們更新文章或者提交代碼需要有相應的權限才可以，通過用戶名和密碼不方便且不安全，所以非常有必要配置SSH-Key密鑰。
3.1 創建密鑰對
cd ~/. ssh
ssh-keygen -t rsa -C "郵件地址"
然后連續3次回車，最終會生成一個文件在用戶目錄下，打開用戶目錄，找到.ssh\id_rsa.pub文件，記事本打開並復制里面的內容，打開你的github主頁，進入個人設置 -> SSH and GPG keys -> New SSH key：
3.2 測試是否成功
ssh -T git@github.com
如上圖顯示，則表示SSH-Key配置成功！
3.3 配置Git信息
git config --global user.name "59devops"
git config --global user.email "59devops@gmail.com"
4、安裝環境
4.1 安裝Node.js
首先在自己的電腦上安裝 Node.js，下載地址：https://nodejs.org/zh-cn/download/，可以安裝 Stable 版本。
安裝完畢之后，確保環境變量配置好，能正常使用 npm 命令。
npm --version
4.2 安裝Hexo
Hexo是一個博客框架，Hexo 官方還提供了一個命令行工具，用於快速創建項目、頁面、編譯、部署 Hexo 博客，所以在這之前我們需要先安裝 Hexo 的命令行工具。
sudo npm install -g hexo-cli
安裝完畢之后，確保環境變量配置好，能正常使用 hexo 命令。
hexo --version
5、初始化項目
5.1 創建項目
使用 Hexo 的命令行創建一個項目，並將其在本地跑起來，整體跑通看看。
首先使用如下命令創建項目：
hexo init {name}
這里的name就是項目名，我這里要創建59devops的博客，我就把項目取名為59devops了，用了純小寫，命令如下：
hexo init 59devops
這樣59devops文件夾下就會出現 Hexo 的初始化文件，包括 themes、scaffolds、source 等文件夾。
5.2 編譯生成HTML代碼
首先進入新生成的文件夾里面，然后調用 Hexo 的 generate 命令，將 Hexo 編譯生成 HTML 代碼，命令如下：
hexo generate
可以看到輸出結果里面包含了 js、css、font 等內容，並發現他們都處在了項目根目錄下的 public 文件夾下面了。
5.3 本地運行項目
利用 Hexo 提供的 serve 命令把博客在本地運行起來，命令如下：
hexo serve
項目成功運行在本地的4000端口上，瀏覽器訪問http://localhost:4000：
6、部署項目
將這個初始化的博客進行一下部署，放到 GitHub Pages 上面驗證一下其可用性。成功之后我們可以再進行后續的修改，比如修改主題、修改頁面配置等等。
Hexo 已經給我們提供一個命令，利用它我們可以直接將博客一鍵部署，不需要手動去配置服務器或進行其他的各項配置。
6.1 修改部署地址
打開根目錄下的 _config.yml 文件，找到 Deployment 這個地方，把剛才新建的 Repository 的地址貼過來，然后指定分支為 master 分支，最終修改為如下內容：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/59devops/59devops.github.io.git
branch: master
6.2 安裝Git部署插件
需要額外安裝一個支持 Git 的部署插件，名字叫做hexo-deployer-git，有了它我們才可以順利將其部署到 GitHub 上面，如果不安裝的話，在執行部署命令時會報如下錯誤：
Deployer not found: git
安裝hexo-deployer-git插件的命令如下：
npm install hexo-deployer-git --save
6.3 部署項目
安裝成功后，執行部署命令：
hexo deploy
如果出現類似上面的內容，就證明我們的博客已經成功部署到 GitHub Pages 上面了，這時候我們訪問一下 GitHub Repository 同名的鏈接，比如我的59devops博客的 Repository 名稱取的是59devops.github.io，那我就訪問 http://59devops.github.io，這時候我們就可以看到跟本地一模一樣的博客內容了。
查看一下GitHub上的內容：
這些內容實際上是博客文件夾下面的 public 文件夾下的所有內容，Hexo 把編譯之后的靜態頁面內容上傳到 GitHub 的 master 分支上面去了。
6.4 訪問測試
6.5 上傳博客源碼到GitHub倉庫
那我博客的源碼也想放到 GitHub 上面怎么辦呢？其實很簡單，新建一個其他的分支就好了，比如我這邊就新建了一個 source 分支，代表博客源碼的意思。
具體的添加過程就很簡單了，參加如下命令：
git init # 初始化項目
git checkout -b source # 創建並切換到source分支
git add -A # 添加所有文件到暫存區
git commit -m "init blog" # 提交並注釋
git remote add origin git@github.com:59devops/59devops.github.io.git # 添加到遠程倉庫
git push origin source # 將代碼提交到遠程的source分支
在GitHub倉庫中可以看到已經有兩個分支：
7、配置站點信息
完成如上內容之后，實際上我們只完成了博客搭建的一小步，因為我們僅僅是把初始化的頁面部署成功了，博客里面還沒有設置任何有效的信息。下面就讓我們來進行一下博客的基本配置，另外換一個好看的主題，配置一些其他的內容，讓博客真正變成屬於我們自己的博客吧。
7.1 修改站點標題、關鍵字信息
修改根目錄下的 _config.yml 文件，找到 Site 區域，這里面可以配置站點標題 title、副標題 subtitle 等內容、關鍵字 keywords 等內容，比如我的就修改為如下內容：
# Site
title: 59Devops
subtitle: 一個運維小菜雞的個人博客網站。
description: 記錄學習、工作和生活中遇到的各種問題。
keywords: "運維, Python, Shell, ..."
author: StaryJie
language: zh-CN
timezone: Asia/Shanghai
hexo serve在本地運行並在瀏覽器中打開測試：
7.2 修改主題
目前 Hexo 里面應用最多的主題基本就是 Next 主題了，個人感覺這個主題還是挺好看的，另外它支持的插件和功能也極為豐富，配置了這個主題，我們的博客可以支持更多的擴展功能，比如閱覽進度條、中英文空格排版、圖片懶加載等等。
7.2.1 下載主題
目前 Next 主題已經更新到 7.x 版本了，我們可以直接到 Next 主題的 GitHub Repository 上把這個主題下載下來。
首先命令行進入到項目的根目錄，執行如下命令即可：
git clone https://github.com/theme-next/hexo-theme-next themes/next
執行完畢之后 Next 主題的源碼就會出現在項目的 themes/next 文件夾下。
7.2.2 修改主題
修改下博客所用的主題名稱，修改項目根目錄下的 _config.yml 文件，找到 theme 字段，修改為 next 即可，修改如下：
theme: next
7.2.3 本地預覽
然后本地重新開啟服務，訪問刷新下頁面，就可以看到 next 主題就切換成功了，預覽效果如下：
7.3 配置主題
現在我們已經成功切換到 next 主題上面了，接下來我們就對主題進行進一步地詳細配置吧，比如修改樣式、增加其他各項功能的支持。
Next 主題內部也提供了一個配置文件，名字同樣叫做 _config.yml，只不過位置不一樣，它在 themes/next 文件夾下，Next 主題里面所有的功能都可以通過這個配置文件來控制，下文所述的內容都是修改的 themes/next/_config.yml 文件。
7.3.1 樣式
Next 主題還提供了多種樣式，風格都是類似黑白的搭配，但整個布局位置不太一樣，通過修改配置文件的 scheme 字段即可，我選了 Pisces 樣式，修改 _config.yml （注意是 themes/next/_config.yml 文件）如下：
scheme: Pisces
另外還有幾個可選項，比如：
# scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
重新在本地運行，瀏覽器查看就已經變成Pisces樣式了：
7.4 favicon
favicon 就是站點標簽欄的小圖標，默認是用的 Hexo 的小圖標，如果我們有站點 Logo 的圖片的話，我們可以自己定制小圖標。
7.4.1 獲取圖標
但這並不意味着我們需要自己用 PS 自己來設計，已經有一個網站可以直接將圖片轉化為站點小圖標，站點鏈接為：https://realfavicongenerator.net，到這里上傳一張圖，便可以直接打包下載各種尺寸和適配不同設備的小圖標。
7.4.2 更換圖標
圖標下載下來之后把它放在 themes/next/source/images 目錄下面。
然后在配置文件里面找到 favicon 配置項，把一些相關路徑配置進去即可，示例如下：
favicon:
small: /images/favicon-16x16.png
medium: /images/favicon-32x32.png
apple_touch_icon: /images/apple-touch-icon.png
safari_pinned_tab: /images/safari-pinned-tab.svg
配置完成之后刷新頁面，整個頁面的標簽圖標就被更新了。
7.5 avatar
avatar 這個就類似站點的頭像，如果設置了這個，會在站點的作者信息旁邊額外顯示一個頭像，比如我這邊有一張 avatar.png 圖片：
將其放置到 themes/next/source/images/avatar.png 路徑，然后在主題 _config.yml 文件下編輯 avatar 的配置，修改為正確的路徑即可。
# Sidebar Avatar
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/avatar.png
# If true, the avatar would be dispalyed in circle.
rounded: true
# If true, the avatar would be rotated with the cursor.
rotated: true
配置完成之后刷新頁面，頭像的圖片就會顯示出來。
7.6 rss
博客一般是需要 RSS 訂閱的，如果要開啟 RSS 訂閱，這里需要安裝一個插件，叫做 hexo-generator-feed，安裝完成之后，站點會自動生成 RSS Feed 文件，安裝命令如下：
npm install hexo-generator-feed --save
在項目根目錄下運行這個命令，安裝完成之后不需要其他的配置，以后每次編譯生成站點的時候就會自動生成 RSS Feed 文件了。
7.7 code
作為一個為程序員，雖然代碼敲的不咋樣，但是代碼塊的顯示還是需要很講究的，默認的代碼塊我個人不是特別喜歡，因此我把代碼的顏色修改為黑色，並把復制按鈕的樣式修改為類似 Mac 的樣式，修改 _config.yml 文件的 codeblock 區塊如下：
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
# highlight_theme: normal
highlight_theme: night bright
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result.
show_result: true
# Available values: default | flat | mac
style: mac
修改樣式前是這樣的：
修改完之后是這樣的：
7.8 top
我們在瀏覽網頁的時候，如果已經看完了想快速返回到網站的上端，一般都是有一個按鈕來輔助的，這里也支持它的配置，修改 _config.yml 的 back2top 字段即可，我的設置如下：
back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: true
enable 默認為 true，即默認顯示。sidebar 如果設置為 true，按鈕會出現在側欄下方，個人覺得並不是很好看，就取消了，scrollpercent 就是顯示閱讀百分比，個人覺得還不錯，就將其設置為 true。
7.9 reading_process
reading_process，閱讀進度。大家可能注意到有些站點的最上側會出現一個細細的進度條，代表頁面加載進度和閱讀進度，如果大家想設置的話也可以試試，我將其打開了，修改 _config.yml 如下：
# Reading progress bar
reading_progress:
enable: true
# Available values: top | bottom
position: top
color: "#222"
height: 2px
效果如下：
7.10 bookmark
書簽，可以根據閱讀歷史記錄，在下次打開頁面的時候快速幫助我們定位到上次的位置，大家可以根據喜好開啟和關閉，我的配置如下：
bookmark:
enable: true
# Customize the color of the bookmark.
color: "#222"
# If auto, save the reading progress when closing the page or clicking the bookmark-icon.
# If manual, only save it by clicking the bookmark-icon.
save: auto
7.11 github_banner
在一些技術博客上，大家可能注意到在頁面的右上角有個 GitHub 圖標，點擊之后可以跳轉到其源碼頁面，可以為 GitHub Repository 引流，大家如果想顯示的話可以自行選擇打開，我的配置如下：
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: true
permalink: https://github.com/59devops/59devops.github.io.git
title: Follow 59devops on GitHub
效果如下：
7.12 gitalk
由於 Hexo 的博客是靜態博客，而且也沒有連接數據庫的功能，所以它的評論功能是不能自行集成的，但可以集成第三方的服務。
Next 主題里面提供了多種評論插件的集成，有 changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte 這些。
1.12.1 注冊OAuth Application
首先需要在 GitHub 上面注冊一個 OAuth Application，鏈接為：https://github.com/settings/applications/new，注冊完畢之后拿到 Client ID、Client Secret 就可以了。
1.12.2 修改配置
首先需要在 _config.yml 文件的 comments 區域配置使用 gitalk：
# Multiple Comment System Support
comments:
# Available values: tabs | buttons
style: tabs
# Choose a comment system to be displayed by default.
# Available values: changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte
active: gitalk
主要是 comments.active 字段選擇對應的名稱即可。
然后找打 gitalk 配置，添加它的各項配置：
# Gitalk
# Demo: https://gitalk.github.io
# For more information: https://github.com/gitalk/gitalk
gitalk:
enable: true
github_id: 59devops
repo: 59devops.github.io
client_id: cb34a61011c438548cec
client_secret: 3d9c756a081ce2b91a6a286eb1a0a02a71ced6ca
admin_user: 59devops
distraction_free_mode: true # Facebook-like distraction free mode
# Gitalk's display language depends on user's browser or system environment
# If you want everyone visiting your site to see a uniform language, you can set a force language value
# Available values: en | es-ES | fr | ru | zh-CN | zh-TW
language: zh-CN
進入文章之后，效果如下：
GitHub 授權登錄之后就可以使用了，評論的內容會自動出現在 Issue 里面。
7.13 pangu
如果你習慣在中文和英文之間留空格的話，pangu 就是來解決這個問題的，我們只需要在主題里面開啟這個選項，在編譯生成頁面的時候，中英文之間就會自動添加空格，看起來更加美觀。
具體的修改如下：
pangu: true
7.14 math
可能在一些情況下我們需要寫一個公式，比如演示一個算法推導過程，MarkDown 是支持公式顯示的，Hexo 的 Next 主題同樣是支持的。
Next 主題提供了兩個渲染引擎，分別是 mathjax 和 katex，后者相對前者來說渲染速度更快，而且不需要 JavaScript 的額外支持，但后者支持的功能現在還不如前者豐富，具體的對比可以看官方文檔：https://theme-next.org/docs/third-party-services/math-equations。
這里選擇了 mathjax，通過修改配置即可啟用：
math:
enable: true
# Default (true) will load mathjax / katex script on demand.
# That is it only render those page which has `mathjax: true` in Front-matter.
# If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
per_page: true
# hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
mathjax:
enable: true
# See: https://mhchem.github.io/MathJax-mhchem/
mhchem: true
mathjax 的使用需要我們額外安裝一個插件，叫做 hexo-renderer-kramed，另外也可以安裝 hexo-renderer-pandoc，命令如下：
npm un hexo-renderer-marked --save
npm i hexo-renderer-kramed --save
另外還有其他的插件支持，大家可以到官方文檔查看。
7.15 pjax
可能大家聽說過 Ajax，沒聽說過 pjax，這個技術實際上就是利用 Ajax 技術實現了局部頁面刷新，既可以實現 URL 的更換，有可以做到無刷新加載。
要開啟這個功能需要先將 pjax 功能開啟，然后安裝對應的 pjax 依賴庫，首先修改 _config.yml 修改如下：
pjax: true
然后安裝依賴庫，切換到 next 主題下，然后安裝依賴庫：
cd themes/next
git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax
這樣 pjax 就開啟了，頁面就可以實現無刷新加載了。
7.16 其他配置
參考官方文檔：https://theme-next.org/docs/。
8、文章
8.1 新建文章
Hexo默認安裝完就會有一篇文章，我們需要借助hexo命令添加新的文章：
hexo new hello-hexo
創建的文章會出現在 source/_posts 文件夾下，是 MarkDown 格式。
8.2 文章標簽和分類
在文章開頭通過如下格式添加必要信息：
---
title: 標題 # 自動創建，如 hello-world
date: 日期 # 自動創建，如 2019-09-22 01:47:21
tags:
- 標簽1
- 標簽2
- 標簽3
categories:
- 分類1
- 分類2
---
開頭下方撰寫正文，MarkDown 格式書寫即可。
這樣在下次編譯的時候就會自動識別標題、時間、類別等等，另外還有其他的一些參數設置，可以參考文檔：https://hexo.io/zh-cn/docs/writing.html。
8.3 博客首頁只顯示文章標題和摘要
默認情況下hexo博客(如本站)的首頁顯示的是完整的文章 – 而文章比較長的時候這無疑會帶來諸多不便。只要加入一個<!-- more -->這樣的占位符在文章正文里面即可：
這就是一個簡介
<!-- more -->
這里更多的內容
本地運行刷新后效果如下：
9、標簽頁
現在我們的博客只有首頁、文章頁，如果我們想要增加標簽頁，可以自行添加，這里 Hexo 也給我們提供了這個功能，在根目錄執行命令如下：
hexo new page tags
執行這個命令之后會自動幫我們生成一個 source/tags/index.md 文件，內容就只有這樣子的：
---
title: tags
date: 2019-09-27 11:42:49
---
我們可以自行添加一個 type 字段來指定頁面的類型：
type: tags
comments: false
然后再在主題的 _config.yml 文件將這個頁面的鏈接添加到主菜單里面，修改 menu 字段如下：
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
本地運行刷新后，界面如下：
可以看到左側導航也出現了標簽，點擊之后右側會顯示標簽的列表。
10、分類頁
分類功能和標簽類似，一個文章可以對應某個分類，如果要增加分類頁面可以使用如下命令創建：
hexo new page categories
然后同樣地，會生成一個 source/categories/index.md 文件。
我們可以自行添加一個 type 字段來指定頁面的類型：
type: categories
comments: false
然后再在主題的 _config.yml 文件將這個頁面的鏈接添加到主菜單里面，修改 menu 字段如下：
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
刷新后頁面如下：
11、搜索頁
很多情況下我們需要搜索全站的內容，所以一個搜索功能的支持也是很有必要的。
如果要添加搜索的支持，需要先安裝一個插件，叫做 hexo-generator-searchdb，命令如下：
npm install hexo-generator-searchdb --save
然后在項目的 _config.yml 里面添加搜索設置如下：
search:
path: search.xml
field: post
format: html
limit: 10000
然后在主題的 _config.yml 里面修改如下：
# Local Search
# Dependencies: https://github.com/wzpan/hexo-generator-search
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 5
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false
這里用的是 Local Search，如果想啟用其他是 Search Service 的話可以參考官方文檔：https://theme-next.org/docs/third-party-services/search-services。
12、404頁面
另外還需要添加一個 404 頁面，直接在根目錄 source 文件夾新建一個 404.md 文件即可，內容可以仿照如下：
---
title: 404 Not Found
date: 2019-09-27 12:21:37
---
<center>
對不起，您所訪問的頁面不存在或者已刪除。
您可以<a href="https://blog.59devops.com>">點擊此處</a>返回首頁。
</center>
<blockquote class="blockquote-center">
59Dveops
</blockquote>
這里面的一些相關信息和鏈接可以替換成自己的。
其實 Hexo 還有很多很多功能，可以直接參考官方文檔：https://hexo.io/zh-cn/docs/ 查看更多的配置。
15、部署腳本
最后我這邊還增加了一個簡易版的部署腳本，其實就是重新 gererate 下文件，然后重新部署。在根目錄下新建一個 deploy.sh 的腳本文件，內容如下：
hexo clean
hexo generate
hexo deploy
這樣我們在部署發布的時候只需要執行：
sh deploy.sh
就可以完成博客的更新了，非常簡單。
16、自定義域名
將頁面修改之后可以用上面的腳本重新部署下博客，其內容便會跟着更新。
另外我們也可以在 GitHub 的 Repository 里面設置域名，找到 Settings，拉到下面，可以看到有個 GitHub Pages 的配置項，如圖所示：
下面有個 custom domain 的選項，輸入你想自定義的域名地址，然后添加 CNAME 解析就好了。
另外下面還有一個 Enforce HTTPS 的選項，GitHub Pages 會在我們配置自定義域名之后自動幫我們配置 HTTPS 服務。剛配置完自定義域名的時候可能這個選項是不可用的，一段時間后等到其可以勾選了，直接勾選即可，這樣整個博客就會變成 HTTPS 的協議的了。
另外有一個值得注意的地方，如果配置了自定義域名，在目前的情況下，每次部署的時候這個自定義域名的設置是會被自動清除的。所以為了避免這個情況，我們需要在項目目錄下面新建一個 CNAME 文件，路徑為 source/CNAME，內容就是自定義域名。
比如我就在 source 目錄下新建了一個 CNAME 文件，內容為：
blog.59devops.com
這樣避免了每次部署的時候自定義域名被清除的情況了。