如何快速搭建博客

新建項目

首先在 GitHub 新建一個倉庫（Repository），名稱爲 {username}.github.io，注意這個名比較特殊，必需要是 github.io 爲後綴結尾的。要與用戶名一致，好比 ihankleo 的 GitHub 用戶名就叫 ihankleo ihankleo.github.io，新建完成以後就能夠進行後續操做了。

在此以前要先配置好SSH連接，由於後面在部署博客是會用到。這裏就簡單介紹下如何配置SSH，先進入Settings-SSH and GPC keys-New SSH key，這裏的Title可自定義，

安裝環境

安裝 Node.js

首先在本身的電腦上安裝 Node.js，下載地址: https://nodejs.org/zh-cn/download/，能夠安裝 Stable 版本。

安裝完畢以後，確保環境變量配置好，能正常使用npm 命令。

安裝 Hexo

接下來就須要安裝 Hexo 了，這是一個博客框架，Hexo 官方還提供了一個命令行工具，用於快速建立項目、頁面、編譯、部署 Hexo 博客，因此在這以前咱們須要先安裝 Hexo 的命令行工具。

命令以下：

npm install -g hexo-cli

安裝完畢以後，確保環境變量配置好，能正常使用hexo命令。

初始化項目

接下來咱們使用 Hexo 的命令行建立一個項目，並將其在本地跑起來，總體跑通看看。

首先使用以下命令建立項目：

hexo init {name}

這裏的 name 就是項目名，我這裏要建立 ihankleo 的博客，我就把項目取名爲 ihankleo 了，用了純小寫，命令以下：

hexo init ihankleo

這樣 nightteam 文件夾下就會出現 Hexo 的初始化文件，包括 themes、scaffolds、source 等文件夾，這些內容暫且先不用管是作什麼的，咱們先知道有什麼，而後一步步走下去看看都發生了什麼變化。

接下來咱們首先進入新生成的文件夾裏面，而後調用 Hexo 的 generate 命令，將 Hexo 編譯生成 HTML 代碼，命令以下：

hexo generate

能夠看到輸出結果裏面包含了 js、css、font 等內容，並發現他們都處在了項目根目錄下的 public 文件夾下面了。

而後咱們利用 Hexo 提供的 serve 命令把博客在本地運行起來，命令以下：

hexo server

運行以後命令行輸出以下：

INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

至此本地 4000 端口上就能夠查看博客站點了

部署

接下來咱們來將這個初始化的博客進行一下部署，放到 GitHub Pages 上面驗證一下其可用性。成功以後咱們能夠再進行後續的修改，好比修改主題、修改頁面配置等等。

那麼怎麼把這個頁面部署到 GitHub Pages 上面呢，其實 Hexo 已經給咱們提供一個命令，利用它咱們能夠直接將博客一鍵部署，不須要手動去配置服務器或進行其餘的各項配置。

部署命令以下：

hexo deploy

在部署以前，咱們須要先知道博客的部署地址，它須要對應 GitHub 的一個 Repository 的地址，這個信息須要咱們來配置一下。

打開根目錄下的 _config.yml 文件，找到 Deployment 這個地方，把剛纔新建的 Repository 的地址貼過來，而後指定分支爲 master 分支，最終修改成以下內容：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: {git repo ssh address}
  branch: master

具體修改成以下內容:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:ihankleo/ihankleo.github.io.git
  branch: master

另外咱們還須要額外安裝一個支持 Git 的部署插件，名字叫作 hexo-deployer-git，有了它咱們才能夠順利將其部署到 GitHub 上面，若是不安裝的話，在執行部署命令時會報以下錯誤：

Deployer not found: git

好，那就讓咱們安裝下這個插件，在項目目錄下執行安裝命令以下：

npm install hexo-deployer-git --save

安裝成功以後，執行部署命令：

hexo deploy

運行結果相似以下:

INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
...
INFO  Deploy done: git

若是出現相似上面的內容，就證實咱們的博客已經成功部署到 GitHub Pages 上面了，這時候咱們訪問一下 GitHub Repository 同名的連接，好比個人 ihankleo 博客的 Repository 名稱取的是 ihankleo.github.io，那我就訪問 http://ihankleo.github.io，這時候咱們就能夠看到跟本地如出一轍的博客內容了。
其實是博客文件夾下面的 public 文件夾下的全部內容，Hexo 把編譯以後的靜態頁面內容上傳到 GitHub 的 master 分支上面去了。
若是想放到 GitHub 上面怎麼辦呢？其實很簡單，新建一個其餘的分支就行了，好比我這邊就新建了一個 source 分支，表明博客源碼的意思。
具體的添加過程就很簡單了，參加以下命令：

git init
git checkout -b source
git add -A
git commit -m "init blog"
git remote add origin git@github.com:{username}/{username}.github.io.git
git push origin source

成功以後，能夠到 GitHub 上再切換下默認分支，好比我就把默認的分支設置爲了 source，固然不換也能夠。

配置站點信息

完成如上內容以後，實際上咱們只完成了博客搭建的一小步，由於咱們僅僅是把初始化的頁面部署成功了，博客裏面尚未設置任何有效的信息。下面就讓咱們來進行一下博客的基本配置，另外換一個好看的主題，配置一些其餘的內容，讓博客真正變成屬於咱們本身的博客吧。

下面我就以本身的站點 ihankleo 爲例，修改一些基本的配置，好比站點名、站點描述等等。

修改根目錄下的 _config.yml 文件，找到 Site 區域，這裏面能夠配置站點標題 title、副標題 subtitle 等內容、關鍵字 keywords 等內容，好比個人就修改成以下內容：

# Site
title: ihankleo
subtitle: 一個專一技術的組織
description: 涉獵的主要編程語言爲 Python,爬蟲
author: ihankleo

另外還能夠設置一下語言，若是要設置爲漢語的話能夠將 language 的字段設置爲 zh-CN，修改以下：

language: zh-CN

這樣就完成了站點基本信息的配置，完成以後能夠看到一些基本信息就修改過來了

修改主題

目前來看，整個頁面的樣式我的感受並非那麼好看，想換一個風格，這就涉及到主題的配置了。

目前 Hexo 裏面應用最多的主題基本就是 Next 主題了，我的感受這個主題仍是挺好看的，另外它支持的插件和功能也極爲豐富，配置了這個主題，咱們的博客能夠支持更多的擴展功能，好比閱覽進度條、中英文空格排版、圖片懶加載等等。

那麼首先就讓咱們來安裝下 Next 這個主題吧，目前 Next 主題已經更新到 7.x 版本了，咱們能夠直接到 Next 主題的 GitHub Repository 上把這個主題下載下來。

主題的 GitHub 地址是：https://github.com/theme-next/hexo-theme-next，咱們能夠直接把 master 分支 Clone 下來。

首先命令行進入到項目的根目錄，執行以下命令便可：

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

執行完畢以後 Next 主題的源碼就會出如今項目的 themes/next 文件夾下。

而後咱們須要修改下博客所用的主題名稱，修改項目根目錄下的 _config.yml 文件，找到 theme 字段，修改成 next 便可，修改以下：

theme: next

而後本地從新開啓服務，訪問刷新下頁面，就能夠看到 next 主題就切換成功了

主題配置

如今咱們已經成功切換到 next 主題上面了，接下來咱們就對主題進行進一步地詳細配置吧，好比修改樣式、增長其餘各項功能的支持，下面逐項道來。

Next 主題內部也提供了一個配置文件，名字一樣叫作 _config.yml，只不過位置不同，它在 themes/next 文件夾下，Next 主題裏面全部的功能均可以經過這個配置文件來控制，下文所述的內容都是修改的 themes/next/_config.yml 文件。

樣式

Next 主題還提供了多種樣式，風格都是相似黑白的搭配，但整個佈局位置不太同樣，經過修改配置文件的 scheme 字段便可，我選了 Pisces 樣式，修改 _config.yml （注意是 themes/next/_config.yml 文件）以下：

scheme: Pisces

另外還有幾個可選項，好比：

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

favicon

favicon 就是站點標籤欄的小圖標，默認是用的 Hexo 的小圖標，若是咱們有站點 Logo 的圖片的話，咱們能夠本身定製小圖標。

但這並不意味着咱們須要本身用 PS 本身來設計，已經有一個網站能夠直接將圖片轉化爲站點小圖標，站點連接爲：https://realfavicongenerator.net[1]，到這裏上傳一張圖，即可以直接打包下載各類尺寸和適配不一樣設備的小圖標。

圖標下載下來以後把它放在 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

配置完成以後刷新頁面，整個頁面的標籤圖標就被更新了。

avatar

avatar 這個就相似站點的頭像，若是設置了這個，會在站點的做者信息旁邊額外顯示一個頭像

將其放置到 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

這裏有 rounded 選項是是否顯示圓形，rotated 是是否帶有旋轉效果，你們能夠根據喜愛選擇是否開啓。

配置完成以後就會顯示頭像。

rss

博客通常是須要 RSS 訂閱的，若是要開啓 RSS 訂閱，這裏須要安裝一個插件，叫作 hexo-generator-feed，安裝完成以後，站點會自動生成 RSS Feed 文件，安裝命令以下：

npm install hexo-generator-feed --save

在項目根目錄下運行這個命令，安裝完成以後不須要其餘的配置，之後每次編譯生成站點的時候就會自動生成 RSS Feed 文件了。

code

做爲程序猿，代碼塊的顯示仍是須要很講究的，默認的代碼塊我我的不是特別喜歡，所以我把代碼的顏色修改成黑色，並把複製按鈕的樣式修改成相似 Mac 的樣式，修改 _config.yml 文件的 codeblock 區塊以下：

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright
  # See: https://github.com/chriskempson/tomorrow-theme
  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

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。

reading_process

有些站點的最上側會出現一個細細的進度條，表明頁面加載進度和閱讀進度，若是你們想設置的話也能夠試試，我將其打開了，修改 _config.yml 以下：

reading_progress:
  enable: true
  # Available values: top | bottom
  position: top
  color: "#222"
  height: 2px

bookmark

書籤，能夠根據閱讀歷史記錄，在下次打開頁面的時候快速幫助咱們定位到上次的位置，你們能夠根據喜愛開啓和關閉，個人配置以下：

bookmark:
  enable: false
  # 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

github_banner

在一些技術博客上，你們可能注意到在頁面的右上角有個 GitHub 圖標，點擊以後能夠跳轉到其源碼頁面，能夠爲 GitHub Repository 引流，你們若是想顯示的話能夠自行選擇打開，個人配置以下：

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/ihankleo/ihankleo.github.io
  title: Hank GitHub

能夠看到在頁面右上角顯示了 GitHub 的圖標，點擊能夠進去到 Repository 頁面。

gitalk

因爲 Hexo 的博客是靜態博客，並且也沒有鏈接數據庫的功能，因此它的評論功能是不能自行集成的，但能夠集成第三方的服務。

Next 主題裏面提供了多種評論插件的集成，有 changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte 這些。

做爲一名程序員，我我的比較喜歡 gitalk，它是利用 GitHub 的 Issue 來當評論，樣式也比較不錯。

首先須要在 GitHub 上面註冊一個 OAuth Application，連接爲：https://github.com/settings/applications/new，註冊完畢以後拿到 Client ID、Client Secret 就能夠了。

首先須要在 _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: NightTeam

  repo: nightteam.github.io # Repository name to store issues

  client_id: {your client id} # GitHub Application Client ID

  client_secret: {your client secret} # GitHub Application Client Secret

  admin_user: germey # GitHub repo owner and collaborators, only these guys can initialize gitHub issues

  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

配置完成以後 gitalk 就可使用了，點擊進入文章頁面

GitHub 受權登陸以後就可使用了，評論的內容會自動出如今 Issue 裏面。

pangu

我我的有個強迫症，那就是寫中文和英文的時候中間必需要留有間距，一個簡單直接的方法就是中間加個空格，但某些狀況下可能習慣性不加或者忘記加了，這就致使中英文混排並非那麼美觀。

pangu 就是來解決這個問題的，咱們只須要在主題裏面開啓這個選項，在編譯生成頁面的時候，中英文之間就會自動添加空格，看起來更加美觀。

具體的修改以下：

pangu: true

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

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 就開啓了，頁面就能夠實現無刷新加載了。

另外關於 Next 主題的設置還有挺多的，這裏就介紹到這裏了，更多的主題設置你們能夠參考官方文檔：https://theme-next.org/docs/。

文章

新建一篇「HelloWorld」的文章，命令以下：

hexo new hello-world

建立的文章會出如今source/_posts文件夾下，是 MarkDown 格式。

在文章開頭經過以下格式添加必要信息：

---
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。

標籤頁

如今咱們的博客只有首頁、文章頁，若是咱們想要增長標籤頁，能夠自行添加，這裏 Hexo 也給咱們提供了這個功能，在根目錄執行命令以下：

hexo new page tags

執行這個命令以後會自動幫咱們生成一個source/tags/index.md文件，內容就只有這樣子的：

---
title: tags
date: 2019-09-26 16:44:17
---

咱們能夠自行添加一個 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

能夠看到左側導航也出現了標籤，點擊以後右側會顯示標籤的列表

分類功能和標籤相似，一個文章能夠對應某個分類，若是要增長分類頁面可使用以下命令建立：

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

這樣頁面就會增長分類的支持

搜索頁

不少狀況下咱們須要搜索全站的內容，因此一個搜索功能的支持也是頗有必要的。
若是要添加搜索的支持，須要先安裝一個插件，叫作 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。

404 頁面

另外還須要添加一個 404 頁面，直接在根目錄 source 文件夾新建一個 404.md 文件便可，內容能夠仿照以下：

---
title: 404 Not Found
date: 2019-09-22 10:41:27
---
<center>
對不起，您所訪問的頁面不存在或者已刪除。
您能夠<a href="https://ihankleo.github.io>">點擊此處</a>返回首頁。
</center>
<blockquote class="blockquote-center">
​    Hank
</blockquote>

這裏面的一些相關信息和連接能夠替換成本身的。
增長了這個 404 頁面以後就能夠.

完成了上面的配置基本就完成了大半了，其實 Hexo 還有不少不少功能，這裏就介紹不過來了，你們能夠直接參考官方文檔：https://hexo.io/zh-cn/docs/ 查看更多的配置。

部署腳本

最後我這邊還增長了一個簡易版的部署腳本，其實就是從新 gererate 下文件，而後從新部署。在根目錄下新建一個 deploy.sh 的腳本文件，內容以下：

hexo clean
hexo generate
hexo deploy

這樣咱們在部署發佈的時候只須要執行：

sh deploy.sh

就能夠完成博客的更新了，很是簡單。

自定義域名

將頁面修改以後能夠用上面的腳本從新部署下博客，其內容便會跟着更新。

另外咱們也能夠在 GitHub 的 Repository 裏面設置域名，找到 Settings，拉到下面，能夠看到有個 GitHub Pages 的配置項

下面有個 custom domain 的選項，輸入你想自定義的域名地址，而後添加 CNAME 解析就行了。

另外下面還有一個 Enforce HTTPS 的選項，GitHub Pages 會在咱們配置自定義域名以後自動幫咱們配置 HTTPS 服務。剛配置完自定義域名的時候可能這個選項是不可用的，一段時間後等到其能夠勾選了，直接勾選便可，這樣整個博客就會變成 HTTPS 的協議的了。

另外有一個值得注意的地方，若是配置了自定義域名，在目前的狀況下，每次部署的時候這個自定義域名的設置是會被自動清除的。因此爲了不這個狀況，咱們須要在項目目錄下面新建一個 CNAME 文件，路徑爲 source/CNAME，內容就是自定義域名。

好比我就在 source 目錄下新建了一個 CNAME 文件，內容爲：

blog.xxx.com

這樣避免了每次部署的時候自定義域名被清除的狀況了。

這裏附上本身剛搭建好的博客 https://ihankleo.github.io/

以上就是從零搭建一個 Hexo 博客的流程，但願對你們有幫助。

References

1. https://realfavicongenerator.net
2. NightTeam團隊