這篇文章是從我的個人博客站點中搬過來的，后面不打算繼續維護站點了，所以將之前的文章搬過來。 原文寫于2017年3月12號。

很久以來，都想搭建屬于自己的一個博客。折騰了幾天，對比了 Jekyll 和 Hexo ，由于自己稍微有那么一點 Node.js 的基礎，而對于 Ruby 比較陌生，于是就選擇了 Hexo + GitHub 來搭建自己的博客小站。

Hexo簡介

Hexo 是一個快速、簡潔且高效的博客框架，支持Markdown書寫文章。

前提環境

• 安裝 Node.js
  Hexo 是基于 Node.js 的，所以需要先安裝 Node.js。
  到Node.js官網下載相應平臺的最新版本，一路Next安裝即可。我安裝的Node.js版本是: v6.9.1 。
• 安裝git
  Windows平臺下推薦安裝最新版的Git for Windows，同樣也是一路Next安裝。我安裝的Git for Windows 版本是: 2.12.0.windows.1 。
• 申請GitHub賬戶
  托管自己的博客站點，并作為站點服務器。
  到GitHub官網申請就行
• 配置ssh
  可以使用https來鏈接GitHub，但每次都要輸入用戶名和密碼，且安全性較差。推薦使用ssh方式來與GitHub鏈接。具體的配置可以參考我的另一篇博客。

開啟Hexo之旅

注意： 涉及到Hexo的命令最好在Git Bash中操作，否則可能無法正確使用Hexo。

安裝Hexo

前提環境配置好后，就可以安裝 Hexo 了。

$ npm install -g hexo-cli

或者

$ npm install -g hexo

輸入 hexo 若出現 Usage: hexo <command> 表示已經安裝成功。

建立自己的博客站點

博客站點對應一個文件夾，也就是你的站點根目錄。

$ cd <你的站點根目錄>      #最好是一個空的文件夾，這樣有助于你查看和分析一個Hexo站點的目錄結構
$ hexo init         #此句必須在Git Bash中輸入，否則沒有效果，仍然會跳轉到Git Bash下，需再次cd到<你的站點根目錄>來執行 `hexo init`

看到 INFO start blogging with Hexo! ，則表明已經在你的本地新建了一個博客站點。

順便提一下，此時可以執行 hexo --version 可以查看 Hexo 版本。我的 Hexo 的版本是：3.2.2 。

站點目錄中幾個重要的文件和文件夾：

• _config.yml: 網站的 配置 信息，您可以在此配置大部分的參數。
• scaffolds: 模版文件夾.當你新建文章時，Hexo 會根據你指定的模板來建立文章。新建文章時，若不指定模板，則使用 post.md 模板來新建文章。你可以打開具體的模板文件，根據自己的需要進行修改。
• source：站點的資源文件夾。其中 _posts 文件夾存放的時你的所有博客，你也可以在 source 文件夾下增加站點需要用到的其他資源，如圖片文件夾或者其他 html 文件.
• themes：主題文件夾。默認已經下載了 landscape 主題,并配置為當前使用的主題。

本地瀏覽

現在你可以在本地啟動站點進行瀏覽了。

$ hexo server       #也可以簡寫為 `hexo s`,并且可以加上參數 `--debug`,這樣在調試狀態下啟動站點，你可以看到啟動站點所處理的文件以及后臺處理請求的詳細信息

看到 INFO Start processing ，表明已經成功啟動站點。接下來，我們按照提示，打開瀏覽器，在瀏覽器地址欄中輸入 http://localhost:4000，你將會看到屬于自己的博客小站了，看著熟悉的 Hello World,是不是很激動啊。不過，此時的興奮還有點早，因為現在的博客只有你自己看得到，還無法在互聯網上瀏覽，也就是說你想要讓廣大博友看到你的博客，你還需要將你的站點部署到網絡服務器中。最簡便的方法還是將其托管到GitHub。

注意： hexo server 是會監視文件的變化的，也就是你的博客內容更改后，只需要在瀏覽器頁面中刷新即可看到最新的內容。 帶參數 -s 則不會監視文件的變化，一般用于生成環境。本篇博客默認這一步是以 hexo server 來啟動站點的。若你發現瀏覽器頁面刷新后看到的結果不是期望中的，則可嘗試重啟站點。

部署到GitHub

在你的GitHub中新建一個Repository，注意名稱為 <你的GitHub用戶名>.github.io (當然，也可以為其他名稱，只不過這樣的話，GitHub將會將改Repository當作普通的倉庫來處理，需要你新建一個名為 gh-pages的Branch, 或者在Repository的 Settings 中將 GitHub Pages 下面的 Source 設置為 master branch; 同樣后面的 _config.yml 的配置也需要更改)

回到本地配置你的站點根目錄下的 _config.yml 文件。

配置 deploy 項為：

deploy:
    type: git
    repository: git@github.com:<你的GitHub用戶名>/<你的GitHub用戶名>.github.io.git
    branch: master

注意，如果你沒有配置ssh連接GitHub的話，repository 配置為https方式。

配置好后，還需要安裝 hexo-deployer-git 包。

$ npm install hexo-deployer-git --save

之后即可執行以下命令，將站點部署到GitHub:

$ hexo deploy       #也可以簡寫為 `hexo d`

看到提示 INFO Deploy done: git, 表明已將你的博客站點成功部署到GitHub。登錄你的GitHub，進入相應的Repository，可以看到已經提交了很多的目錄和文件。

是不是迫不及待了！在瀏覽器地址欄中輸入 <你的GitHub用戶名>.github.io ,正如意料中的一樣，你將會看到自己的博客頁面。此時的博客就是部署在互聯網上的了，有網絡的地方均能瀏覽你的文章。

站點配置

為了使博客更加個性化，你需要做一些配置。

在進行配置之前，先明確兩個概念。

Hexo 通過兩套配置文件來控制你的站點的樣式、內容等，文件名均為 _congif.yml。其中一個位于站點根目錄下，包含的是Hexo本身的配置，我們將其稱為 站點配置文件；另一個位于主題目錄下（<站點根目錄>/themes/<主題名>/, 默認使用的主題是 landscape）,用來控制與主題相關的配置，我們將其稱為 主題配置文件。

語言配置

你可能發現你的博客除了博文外到處都是看起來似乎很高端的英文，而你的博客主要是面對國內用戶的，那么你可以設置博客所使用的語言。打開站點配置文件（路徑為：<站點根目錄>/_config.yml）

language: zh-CN

設置完成后，瀏覽器中刷新頁面，查看效果。 注意看首頁右邊部分的 ARCHIVES 已經改為了 歸檔, ARTICLES RéCENTS 已經改為了 最新文章。

細心的你可能會發現，頁面最頂部左邊的菜單仍然還是英文。將其改為中文的方法是: 打開主題配置文件，更改以下參數的名字：

menu:
  Home: /
  Archives: /archives

更改后為：（當然，你可以改為任何你喜歡的名字）

menu:
  首頁: /
  歸檔: /archives

你也可以增加其他的菜單，指向的地址可以是站點的某個文件或者其他任何可訪問的網址。如增加一個跳轉到 百度 的菜單：

menu:
    ...
    百度: http://www.baidu.com

再次刷新頁面，即可看到修改后的效果。

標題、作者等配置

現在打開你的博客站點，首頁你會看到一個很明顯的 Hexo, 將網頁拖到最下腳會看到左邊有作者的名字，你可以修改站點配置文件中的以下參數：

title: <網站標題>
subtitle: <網站副標題>
description: <網站描述>
author: <你的名字>  

刷新頁面，看看你的設置吧！

開始撰寫你的博客

此時你的站點下就只有一篇 Hello World 的博文，你肯定希望將自己的經驗、想法和心得與別人分享，那么我們開始撰寫自己的博客吧。

$ hexo new "我的文章標題"

執行以上命令后，會在 站點根目錄/source/_post/下新建一篇以你輸入的標題命名的博客，為 *.md 格式的文件。使用任意文本編輯器或者專業的 Markdown 編輯器打開該文件，之后你就可以使用 Markdown 語法書寫博客了。 （如果你還不熟悉Markdown語法，建議你先花一點時間學習一下，常用的標簽就幾個，比較簡單。Markdown入門可以看我的另一篇博客

博客撰寫完成后，重啟站點（hexo s），即可在首頁中看到你的博客，對自己的作品滿意了就可以部署（hexo d）到GitHub。這就是每一篇博客從無到有再到發布的全過程。

到此，你的博客小站基本搭建完畢了。剩下的工作就是專心撰寫博客，生產高質量的文字內容。

趕快把網址廣播給你的小伙伴，分享你的喜悅吧！！

要說明的幾個問題

hexo deploy

執行 hexo deploy 時，包含了兩個步驟，一個時在本地生成靜態文件，另外一個步驟時將生成的靜態文件提交到你配置的GitHub中。
查看站點根目錄，可以看到多了兩個文件夾：

• public: 生成的靜態文件。該文件夾已經是靜態的，不依賴于 Hexo，也就是說你可以將該文件夾拷貝部署到任何服務器中。
• .deploy_git: 為 public 文件夾的一個副本，只是該文件夾為一個連接到GitHub的Git版本庫。

若你只想在本地生成靜態文件，而不同步到GitHub，可以執行：

$ hexo generate   #可以簡寫為 hexo g

參數配置

配置配置文件中，所有的參數 : 后面均需要有一個空格，否則啟動站點時將不能讀取配置文件，從而無法瀏覽配置效果。

一定要注意參數是區分大小寫的。

語言配置

語言配置中，給出的參數值 zh-CN 為 中文簡體的意思。 為什么是這個值呢？你可以打開 <你的站點根目錄>/themes/landscape/languages 文件夾，可是看到有許多個 *.yml 文件，這些文件的名字就可以作為 language 參數的值 （后綴名.yml不需填寫）， 換句話說，你可以設置 zh-CN 外的其他值，只不過這樣的話，你的博客站點使用的將是其他國家或地區的語言。

站點重啟

在Git Bash 中，按下 ctrl+c 停止之前啟動的站點，再次執行 hexo s 重啟站點。

新建博客

可以直接在 站點根目錄/source/_post 文件夾下新建 *.md 文件來新建博客，但推薦使用 hexo new [博客使用的模板] <博客的標題> 命令 來新建博客。這樣做的好處是，一方面你可以使用默認或者自定義的模板，自動為新建的博客增加說明信息；另一方面是，若你開啟了資源文件管理功能，新建博客后會在與 *.md 文件同級的目錄下新建一個與博客標題同名的文件夾，用于存放該博客用到的資源，如圖片等。

需要注意，使用 hexo new 來創建新博客時，若博客的標題中含有空格，需要使用雙引號 " 將其包起來，而新建的 *.md 文件名稱則將空格使用 - 進行代替，資源文件夾同樣如此（若開啟的話），但打開 *.md 文件，其說明參數 title 則保持原樣。

博客的說明信息

剛打開你新建的博客時，你會看到如下的內容：

---
title: 我的第一篇博客
date: 2017-03-10 14:50:31
tags:
---

這寫內容是根據你的模板生成的（默認的模板為 站點根目錄/scaffolds/post.md），你可以根據自己的需要進行修改。

生成靜態文件后，這些內容不會出現在你的博客上，但他們是你的本篇博客的元數據（如果你不知道這個詞的意思，請自行百度），說明了該篇博客的基本信息。你可以為博客添加如下一些說明：

- title: [博客的標題]
- date: [創作時間]
- categories：[分類] 
- tags: [標簽]

categories 和 tags 都是以Markdown列表的形式列出，二者的區別是：categories是你的博客的分類，默認給出的列表其含義從上到下范圍逐漸變小，如

categories:
- 編程
- C++
- 泛型

表示的是，該篇博客屬于的類別為 編程 > C++ > 泛型。
而tags是你的博客的關鍵字，沒有順序之分。

博客的這些說明信息，雖然不會出現在你的博客內容上，但他們會出現在你的頁面中，如分類和標簽均會出現在頁面的右邊，便于你對博客進行管理。

博客中圖片的引用。

若你的博文中需要用到圖片，則在 站點根目錄/source 下新建一個 images 文件夾，用于存放你的圖片，然后在博客中通過 [圖片上傳失敗...(image-cb9512-1527432544395)] 的方式引用圖片。

當然，將圖片統一放在 iamges 文件夾，可能不是最好的方法，因為你的博客增加，用到的圖片會越來越多，將所有圖片都放在同一個文件夾，無論是圖片命名還是對圖片的管理，都非常不方便。針對這個問題，Hexo為我們提供了另外一個簡單可行的方法：開啟資源文件管理功能。

配置站點文件，將參數 post_asset_folder 設置為 true ：

post_asset_folder: true

這樣設置以后，每一次通過 hexo new 新建博客時都會在與 *.md 文件同級的目錄下自動創建一個與博客標題同名的文件夾，用于存放該博客用到的圖片等資源文件。 要注意的是博客中引用圖片的時候，其相對路徑直接為圖片的名稱即可，不需包含圖片所在的文件夾名。如，通過

hexo new "firstblog"

來新建博客，則 _post 文件夾目錄如下：

.
|—— firstblog
|—— firstblog.md
|.

若你想在博客中加入一個 test.jpg 的圖片，則先將 test.jpg 放入 firstblog 文件夾中，然后在 firstblog.md 文件中這樣引用：

[圖片上傳失敗...(image-784769-1527432544396)]

而不是：

[圖片上傳失敗...(image-7231bc-1527432544396)]    #這真是一個坑，不過如果你看一下Hexo生成的靜態文件的目錄結構，你就會明白為什么要這樣引用了。

如果你足夠細心，那么你可能會發現，使用這種方式引用圖片，僅能在博客正文中正常顯示，而在博客站點的首頁中無法加載圖片。我會在另一篇博客中談這個問題。

設置文章在首頁顯示的長度

如果你不想在首頁顯示你的整篇博客，可以在你的博客文件中加入 `` 標識，該標識之前的內容將會作為文章的摘要在首頁中顯示，并且點擊摘要下方的 Read More （你也可以在主題配置文件中將其改寫為 閱讀全文） 會跳轉到博客全文。

碰到問題怎么辦

搭建博客的過程中肯定會遇到很多問題，不要著急，去 Hexo 官網和 GitHub中 Hexo 的 Issues 看看，說不定那里就有你碰到的問題的解決方法。并且很多 Issues 中，都有一些博友安利自己的博客，你可以點進去看看，學習一下別人的經驗，取長補短。

關于主題（theme）

新建的站點默認使用的主題 landscape,風格極簡，你不一定喜歡。你可以到官網的主題中淘自己喜歡的主題，下載下來，放到 themes 文件夾中，并在 站點配置文件 中進行配置即可。

一種方法是：

• 在官網的主題頁面中，定位自己喜歡的主題，記住名字

• 到 Hexo 官網的GitHub中，進入頁面 /source/_data/themes.yml 點擊進入, 根據主題名搜索到你需要的主題，復制其 link 值

• 在 Git Bash 中：

  $ cd 站點根目錄
  $ git clone <主題的link值> themes/<主題名>

更改站點配置文件：

theme: <主題名>

重啟站點，即可看到新更換的主題了。

站點的進一步改進

按照本文一步一步構建的站點，還屬于比較簡陋的小屋，還有許多地方需要改進，或者調整配置文件。包括但不限于：

• 頁面的樣式、布局
• 網站的訪問量統計
• 文章評論
• 站內搜索
• 社交平臺分享
• RSS 訂閱
• 音樂播放
• 文章打賞
• ...

參考：
Hexo官方網站