Hexo + Github 搭建靜態部落格(一)

本文是滴滴雲開源框架教程系列文章的一篇。

快速介紹

Hexo是一個基於Node.js搭建的靜態部落格框架，透過Hexo，使用者可以以博文的方式釋出Markdown文件。結合預設或定製化主題模板（很像其他靜態部落格生成框架，Jekyll或Ghost）博文會被轉化和生成為HTML/CSS。Hexo所需的所有元件都是模組化的，可以按需安裝。

提前準備

你可能需要提前準備：

• git

• Node.js

• Github賬號

第一步 安裝和初始化Hexo

這一步需要安裝好Hexo所需的東西，Hexo是有許多軟體包組成的，而最必要的一個就是npm，Node.js包管理器。

首先，安裝hexo-cli,最重要最核心的Hexo命令。

$ npm install hexo-cli -g

其次，需要建立一些基礎檔案，很幸運，Hexo提供了一鍵生成的命令。只需要切換到準備好的資料夾目錄，執行如下命令。

$ hexo init 

此時，資料夾下可能會出現很多檔案和資料夾，如下圖所示：

blog/

├── _config.yml

├── node_modules

├── package.json

├── scaffolds

├── source

└── theme

4 directory, 2 files

第二步 設定Hexo主要的配置檔案 _config.yml

上圖的這些檔案中，_config.yml是至關重要的，所有的核心配置都儲存在這個部落格中，如果將來想調整部落格的一些設定，大機率就是這個檔案。

我們將會一步一步的修改配置，選擇喜歡的編輯器，vi， nano 或者sublime等開啟_config.yml，在最上邊會看到如下的內容。

# Site

title: Hexo

subtitle:

description:

author: John Doe

language:

timezone:

前四行分別是部落格的名稱，二級名稱，描述和作者的名稱。目前不是所有的Hexo主題都會顯示這些資訊，所以它大多數當成網站基本資訊。

後邊兩行是語言和時區，語言選擇兩字元ISO 639-1程式碼。時區預設指的是使用者伺服器的時區，用“tz database"格式。你可以根據需要修改他們，下邊是一個例子：

#Site

title: 滴滴雲部落格 

subtitle: 為開發者而生 

description: 滴滴雲基於滴滴出行的業務技術和經驗積累,採用領先的雲端計算架構、高規格伺服器叢集搭建、高效能資源配置機制、精細化運營模式,致力於為開發者提供簡單快捷、高效穩定。

author: didicloud 

language: zh-CN 

timezone: 

最後要更改的設定是default_layout: 在Writing下邊，在一個博文沒發表之前，它是不可見的，我們想存成草稿，所以把default_layout設定成draft。

# Writing

new_post_name: :title.md # File name of new posts

default_layout: draft

titlecase: false # Transform title into titlecase

第三步 建立和發表部落格

用如下命令來建立一個博文（草稿）,這裡的‘first-page’是博文的名稱。

$ hexo new first-post

應該會看到這樣的顯示：

Output

INFO  Created: ~/hexo_blog/source/_drafts/first-post.md

可以選擇自己喜歡的編輯器，開啟first-post.md

每一個博文都有一個front-matter設定，Front-matter是一個JSON or YAML塊，它可以用來設定這標題，釋出時間，標籤等等。Front-matter一般用---或者;;;標誌結尾。在Front-matter之後，可以用Markdown語法寫自己的博文。

用如下的內容替換first-post.md的內容。

title: 滴滴雲--為開發者而生

tags:

  - Test

  - Blog

categories:

  - Hexo

comments: true

**This is our first post!**

然後執行$ hexo publish first-post會看到如下的結果：

Output

INFO  Published: ~/hexo_blog/source/_posts/first-post.md

第四步 啟動伺服器

到目前為止，所有的配置檔案和博文都已準備完畢，接下來啟動伺服器。

$ hexo server

現在可以訪問自己的部落格透過

第五步 設定部署指令碼

到目前為止，Hexo有許多不同的方法可以部署，本部落格是用git來進行儲存，上傳，託管部落格。除此之外，還支援Heroku, Git, Rsync, OpenShift, FTPSync等多種工具。

這裡需要一個git倉庫來儲存Hexo生成的靜態HTML檔案，為了簡單起見，這裡用Github提供的git倉庫。

在Github上建立一個<username>.Github.io的倉庫，選擇“Public”，並且點選“Initialize this repository with a README”選擇框。然後開啟_config.yml。

# Deployment

## Docs:

deploy:

  type:

按如下所示，填上deploy選項，你必須替換username為自己的Github賬號。

deploy:

  type: git

  repo:

  branch: master

因為選擇了git來部署，所以我們需要安裝Hexo包來發布靜態模板到git倉庫。用npm來安裝：

$ npm install hexo-deployer-git --save

現在可以部署程式碼到Github倉庫了。

$ hexo generate && hexo deploy

在Github密碼校驗框輸入密碼以後，如下是成功結果。

hexo HEXO G

INFO  Start processing

INFO  Files loaded in 214 ms

INFO  Generated: archives/2018/index.html

INFO  Generated: repository/index.html

INFO  Generated: archives/index.html

INFO  Generated: about/index.html

INFO  Generated: archives/2018/11/index.html

INFO  Generated: index.html

INFO  Generated: angular-splitter/index.html

INFO  Generated: 如何使用GZIP來最佳化你的網站/index.html

INFO  8 files generated in 231 ms

➜  hexo HEXO D

INFO  Deploying: git

INFO  Clearing .deploy_git folder...

INFO  Copying files from public folder...

INFO  Copying files from extend dirs...

[master 143ec29] Site updated: 2018-11-04 23:14:03

 8 files changed, 80 deletions(-)

To

   c8f0b04..143ec29  HEAD -> master

Branch master set up to track remote branch master from .

INFO  Deploy done: git

結語

至此，完成了所有配置和部署，快去搭建屬於自己的靜態部落格吧。以下連結為Hexo搭建起來的部落格，可以參考。

Hexo的子頁面包括歸檔、分類，標籤使用，github專案的關聯，ejs模板的使用將在下一篇《Hexo + Github搭建靜態部落格(二)》中給大家分享。