如何使用Github+Hexo快速搭建個人部落格

Hexo GitHub · 發表 2019-01-27 22:17:33

摘要：假設道友已經都是git熟練使用者了，這裡不再詳細介紹git相關知識。 git還未入門的可以檢視Git常用核心命令或者訪問Pro Git（中文版） get 更多知識點。在Github新建倉庫，取名account.github.io 這裡的 account 是您的在Github...

假設道友已經都是git熟練使用者了，這裡不再詳細介紹git相關知識。 git還未入門的可以檢視Git常用核心命令或者訪問Pro Git（中文版） get 更多知識點。

在Github新建倉庫，取名account.github.io

這裡的 account 是您的在Github上的賬戶名。

也可以直接用命令建立倉庫：

echo "# Byron4j.github.io" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/Byron4j/Byron4j.github.io.git
git push -u origin master
複製程式碼

或者將已經存在的倉庫覆蓋：

git remote add origin https://github.com/Byron4j/Byron4j.github.io.git
git push -u origin master
複製程式碼

安裝Node.js

Hexo基於Node.js，所以您還需要安裝Node.js。Node.js的官網下載地址： nodejs.cn/download/，選…

安裝Hexo

Hexo 官方網址：hexo.io/zh-cn/。 Hexo使用文件參考：hexo.io/zh-cn/docs/…

使用 npm 安裝 Hexo(演示是在windows-64環境下)：

npm install -g hexo-cli
複製程式碼

安裝結果如下：

C:\Users\BYRON.Y.Y>npm install -g hexo-cli
C:\Users\BYRON.Y.Y\AppData\Roaming\npm\hexo -> C:\Users\BYRON.Y.Y\AppData\Roaming\npm\node_modules\hexo-cli\bin\hexo
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): EPERM: operation not permitted, rmdir 'C:\Users\BYRON.Y.Y\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\fsevents'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\hexo-cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 225 packages from 431 contributors in 60.523s
複製程式碼

如何使用 Hexo

指定一個空目錄初始化hexo所需檔案：

命令：

hexo init 目錄名(要求是空目錄)
複製程式碼

C:\Users\BYRON.Y.Y>hexo init F:\217my_optLogs\001系統相關\系統設計\007\blog
INFOCloning hexo-starter to F:\217my_optLogs\001系統相關\系統設計\007\blog
Cloning into 'F:\217my_optLogs\001系統相關\系統設計\007\blog'...
remote: Enumerating objects: 68, done.
remote: Total 68 (delta 0), reused 0 (delta 0), pack-reused 68
Unpacking objects: 100% (68/68), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into 'F:/217my_optLogs/001系統相關/系統設計/007/blog/themes/landscape'...
remote: Enumerating objects: 1, done.
remote: Counting objects: 100% (1/1), done.
remote: Total 867 (delta 0), reused 0 (delta 0), pack-reused 866
Receiving objects: 100% (867/867), 2.55 MiB | 1.52 MiB/s, done.
Resolving deltas: 100% (459/459), done.
Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
[32mINFO [39m Install dependencies
npm WARN deprecated [email protected]: no longer maintained
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 421 packages from 500 contributors and audited 4699 packages in 72.178s
found 0 vulnerabilities

INFOStart blogging with Hexo!
複製程式碼

新建完成後，生成如下目錄檔案：

C:\Users\BYRON.Y.Y>dir /B F:\217my_optLogs\001系統相關\系統設計\007\blog
.gitignore
node_modules
package-lock.json
package.json
scaffolds
source
themes
_config.yml
複製程式碼

hexo 專案的檔案說明

_config.yml 是配置資訊

網站的配置資訊，您可以在此配置大部分的引數。應用程式的資訊。EJS,Stylus 和Markdown renderer 已預設安裝，您可以自由移除。更多關於該檔案的說明可以參考：hexo.io/zh-cn/docs/…

scaffolds 模板檔案

模板資料夾，當您新建文章時，hexo會根據模板來建立新的檔案。

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

source

資原始檔夾是存放使用者資源的地方。除 _posts 資料夾之外，開頭命名為 _ (下劃線)的檔案 / 資料夾和隱藏的檔案將會被忽略。Markdown 和 HTML 檔案會被解析並放到 public 資料夾，而其他檔案會被拷貝過去。

themes

主題資料夾。Hexo 會根據主題來生成靜態頁面。

瀏覽部落格雛形

進入hexo專案目錄中，使用如下命令開啟部落格服務：

hexo s
複製程式碼

瀏覽器中訪問： http://localhost:4000 。

至此，代表著部落格已經完成搭建了，剩下的工作就是不斷完善了。

使用Hexo寫文章

在專案目錄下使用如下命令可以建立一片新的文章：

hexo new [layout] <title>
複製程式碼

您可以在命令中指定文章的佈局（layout），預設為 post，可以通過修改 _config.yml 中的 default_layout 引數來指定預設佈局。

佈局（Layout）

Hexo 有三種預設佈局：post、page 和 draft，它們分別對應不同的路徑，而您自定義的其他佈局和 post 相同，都將儲存到 source/_posts 資料夾。

佈局	路徑
post	source/_posts
page	source
draft	source/_drafts

檔名稱

Hexo 預設以標題做為檔名稱，但您可編輯 new_post_name 引數來改變預設的檔名稱，舉例來說，設為 : year-:month-:day-:title.md 可讓您更方便的通過日期來管理文章。

我們修改配置檔案new_post_name的值後，新建一篇文章：

F:\217my_optLogs\001系統相關\系統設計\007\blog>hexo new post 如何使用Github+Hexo快速搭建個人部落格
INFOCreated: F:\217my_optLogs\001系統相關\系統設計\007\blog\source\_posts\2019-01-27-如何使用Github-Hexo快速搭建個人部落格.md
複製程式碼

再重新整理瀏覽器頁面，可以看到新增了一篇文章：

草稿

剛剛提到了 Hexo 的一種特殊佈局： draft ，這種佈局在建立時會被儲存到 source/_drafts 資料夾，您可通過 publish 命令將草稿移動到 source/_posts 資料夾，該命令的使用方式與 new 十分類似，您也可在命令中指定 layout 來指定佈局。

hexo publish [layout] <title>
複製程式碼

草稿預設不會顯示在頁面中，您可在執行時加上 --draft 引數，或是把 render_drafts 引數設為 true 來預覽草稿。

我們把配置引數設定一下: render_drafts.

#render_drafts: false
render_drafts: true
複製程式碼

模版（Scaffold）

在新建文章時，Hexo 會根據 scaffolds 資料夾內相對應的檔案來建立檔案，例如：

hexo new photo "My Gallery"
複製程式碼

在執行這行指令時，Hexo 會嘗試在 scaffolds 資料夾中尋找photo.md，並根據其內容建立文章，以下是您可以在模版中使用的變數：

變數	描述
layout	佈局
title	標題
date	檔案建立日期

匯入文章

您可以將已寫好的 .md 匯入到 _posts 目錄裡，完成文章的匯入。

扉頁 Front-matter

扉頁 front-matter 是檔案最上方以 --- 分隔的區域，用於指定個別檔案的變數，示例：

---
layout: photo
title: My Gallery
date: 2019-01-27 11:52:58
tags:
---

複製程式碼

以下是預先定義的引數，您可以在模板中使用這些引數值並加以利用：

引數	描述	預設值
layout	佈局
title	文章標題
date	建立日期	yyyy-MM-dd HH:mm:ss 格式
updated	更新日期
comments	開啟文章的評論功能	true
tags	標籤(不適用於分頁)
categories	分類（不適用於分頁）
permalink	覆蓋文章網址

分類和標籤

只有文章支援分類和標籤，您可以在 Front-matter 中設定。在其他系統中，分類和標籤聽起來很接近，但是在 Hexo 中兩者有著明顯的差別：分類具有順序性和層次性，也就是說 Foo, Bar 不等於 Bar, Foo；而標籤沒有順序和層次。

categories:
- Diary
tags:
- PS3
- Games
複製程式碼

分類方法的分歧

如果您有過使用WordPress的經驗，就很容易誤解Hexo的分類方式。WordPress支援對一篇文章設定多個分類，而且這些分類可以是同級的，也可以是父子分類。但是Hexo不支援指定多個同級分類。下面的指定方法：

categories:

Diary
Life

會使分類Life成為Diary的子分類，而不是並列分類。因此，有必要為您的文章選擇儘可能準確的分類。

JSON Front-matter

除了YAML格式外，還支援json格式的扉頁. 只要將 --- 代換成 ;;; 即可

,,,
"title": "Hello World",
"date": "2013/7/13 20:46:25"
;;;

複製程式碼

部署到伺服器上去

Hexo 提供了快速方便的一鍵部署功能，讓您只需一條命令就能將網站部署到伺服器上。

hexo deploy
複製程式碼

在開始之前，您必須先在 _config.yml 中修改引數，一個正確的部署配置中至少要有 type 引數，例如：

deploy:
type: git
複製程式碼

您可同時使用多個 deployer，Hexo 會依照順序執行每個 deployer:

deploy:
- type: git
repo:
- type: heroku
repo:
複製程式碼

deploy:
type: git
repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
branch: [branch] #published
message: [message]
複製程式碼

安裝 hexo-deployer-git

npm install hexo-deployer-git --save
複製程式碼

更多關於部署的資訊參考：hexo.io/zh-cn/docs/…

Hexo 主題

您可以在hexo.io/themes/inde… 進行主題的挑選更換。下載好後放在 themes 資料夾內，同時在 _config.yml 中進行配置變更就好了。

這裡採用了主體： blinkfox.github.io/2018/09/28/… 可參見使用說明。

展示成型的部落格

linux作為後臺服務啟動

安裝 pm2

npminstall -g pm2
複製程式碼

部落格根目錄下面建立一個hexo_run.js：

const { exec } = require('child_process')
exec('hexo server',(error, stdout, stderr) => {
if(error){
console.log('exec error: ${error}')
return
}
console.log('stdout: ${stdout}');
console.log('stderr: ${stderr}');
})
複製程式碼

根目錄下執行：

pm2 start hexo_run.js
複製程式碼

啟動後臺服務。