Hexo+GitHub搭建靜態博客平臺(一)-環境配置及建站

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，並在幾秒內即可利用靚麗的主題生成靜態網頁。

一、安裝Hexo

安裝Hexo前需要提前安裝：

• Node.js
• Git

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

$ npm install -g hexo-cli

注意：這是一個全局安裝，可能你以爲我說這句話是多餘的，但是下面我們要安裝的基本上是局部安裝，因此當你重新Down下來源碼後是需要再次安裝的，在這裏提前進行說明。

我們可以使用npm list -g --depth 0命令來查看你的全局安裝文件：

C:\Users\Administrator>npm list -g --depth 0
C:\Users\Administrator\AppData\Roaming\npm
`-- hexo-cli@1.0.4

二、創建倉庫及管理配置

搭建博客的前提：

• 擁有一個GitHub賬號
• Git正確配置

如果沒有GitHub賬號，需要先註冊一個GitHub賬號，然後在客戶端上安裝Git。

2.1 Git基本配置

git config --global user.name "fxb577328725" // 你的github用戶名，而非暱稱
git config --global user.email "[email protected]" // 填寫你註冊github的郵箱

說明：以上兩個配置是Git針對全局的配置。

2.2 創建倉庫

我們需要在GitHub創建一個名爲 username.github.io 的倉庫。

注意： 如果你的 github 用戶名是 test ，那麼你就新建 test.github.io 的倉庫（必須是你的用戶名，其它名稱無效），將來你的網站訪問地址就是 http://test.github.io 了，是不是很方便！

2.3 配置SSH key

爲什麼要配置這個呢？ 因爲你提交代碼肯定要擁有你的github權限纔可以，但是直接使用用戶名和密碼太不安全了，因此我們使用 ssh key 來解決本地和服務器的連接問題。

首先檢查檢查本機是否已包含ssh祕鑰：

$ ssh -T [email protected]

注意：需要在Git Bash中執行，如果你正常安裝了Git，那麼鼠標右擊即可看到Git Bash！

如果顯示類似下面信息表示配置成功：

$ ssh -T [email protected]
Hi fxb577328725【這是我的GitHub名稱】! You've successfully authenticated, but GitHub does not provide shell access.

提示：其實有一個比較簡潔的方法就是進入到當前系統賬戶的根目錄查看是否包含一個.ssh 文件夾

如果沒有提示successfully也不存在.ssh 文件夾，那麼就需要生成本地公鑰私鑰：

$ ssh-keygen -t rsa -C "GitHub註冊郵箱"

然後連續3次回車，最終會在當前賬戶的根目錄下生成一個.ssh 文件夾，找到 .ssh\id_rsa.pub 文件，使用記事本打開並複製裏面的內容，然後打開你的github主頁，進入 個人設置 → SSH and GPG keys → New SSH key ，將剛複製的內容粘貼到 key 那裏，title 隨意，最後保存即可。

測試配置是否成功：

$ ssh -T [email protected] # 注意郵箱地址不用改

如果提示 Are you sure you want to continue connecting (yes/no)?，輸入yes，然後會看到：

Hi 你的用戶名! You’ve successfully authenticated, but GitHub does not provide shell access.

三、建站

Hexo搭建博客的特點是博客源文件與部署文件是分離的，我們可以將生成的靜態文件部署到任何地方，我們只是利用了GitHub Page來託管並解析我們的靜態文件罷了！
其實比較合理的方法是我們在master分支部署靜態文件，然後在創建一個源文件分支來管理博客的源文件！但這需要一定的Git與GitHub的使用基礎，對於還不太熟的朋友建議你們還是另外創建一個倉庫來維護源文件比較穩妥，在這裏我將採用兩個倉庫的方式實現，後期會對前面提及的方式進行說明！

另外在創建一個倉庫然後克隆到本地，我的源碼維護倉庫是BlogSource，當然我們可以不創建此倉庫，其只是爲了維護博客的源代碼而已！

安裝好 Hexo並創建及配置好倉庫後，執行下列命令，Hexo將會在指定文件夾中下載搭建博客所需文件。

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

注意：如果沒有指定文件夾，也就是僅執行 hexo init 命令，則會在當前目錄下存儲下載的文件；並且此命令要求對應目錄下不能有文件，也就是說不能在你源代碼維護倉庫中執行，我們將生成的所有文檔拷貝或剪切到你的源碼維護倉庫，此處我是拷貝到了BlogSource文件夾下！

新建完成後，文件夾的目錄結構如下：

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

3.1 _config.yml

網站的 配置 信息，您可以在此配置大部分的參數。

3.2 package.json

應用程序的信息。EJS, Stylus 和 Markdown renderer【渲染器】 已默認安裝，您可以自由移除。

{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.5.0"
},
"dependencies": {
"hexo": "^3.2.0",
"hexo-generator-archive": "^0.1.4",
"hexo-generator-category": "^0.1.3",
"hexo-generator-index": "^0.2.0",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.3.0",
"hexo-renderer-stylus": "^0.3.1",
"hexo-renderer-marked": "^0.3.0",
"hexo-server": "^0.2.0"
}
}

3.3 scaffolds

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

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

3.4 source

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

3.5 themes

themes 文件夾。Hexo會根據themes文件夾中的主題來生成靜態頁面。

結語：
  至此博客整體框架搭建完成！接下來就是來美化自己的博客網站以及編寫博客了！