0%

在 Github 上安裝 Hexo 記錄

在學員的鼓勵下,決定試試安裝輕量級 blog Hexo。隨然玩 Wordpress 已經很久了,但 WP 的架構越來越龐大更新速度快,整個檔案也越來越龐大了,且 WP 需要資料庫的配合。但 Hexo 不但不需要,且還可以部屬在 Github 上,超方便的!雖然設定與修改比較繁瑣,但也有它的樂趣,且既然是與程式有關的文章和內容,那何不把他們放在一起。

將 Hexo 自動生成的靜態頁面、搭配 github 的 page 功能,推上 github 後就可達到輕量 blog 的基本功能,如果想要一些功能如搜尋、留言,則要自行設定或安裝外掛,比較方便的是找個完善的主題,就不需這些繁複的設置,但最好對 Hexo 架構有一定的了解,否則一有問題仍須花很多時間查詢。

這裡使用的佈景主題是 Hexo 的預設主題:landscape,希望慢慢修改成自己喜歡的樣子即可,功能仍不是很完善,期待自己慢慢把它做的更完整一點。

Hexo 建立文章的方式

一般我們都會使用 hexo new <title>來建立新文章,這種方法會將新文章建立在 source/_posts 目錄下,當使用 hexo generate 編譯 markdown 文件時,就會將其 HTML 結果編譯在 public 目錄下,之後 hexo deploy 再將把 public 目錄下所有文章一起部署到 GitHub,這是我們熟悉的 Hexo 流程。

這種建立文章方式的缺點是:如果同時編輯多篇文章,只要其中一篇文章尚未編輯完成,也會隨著 hexo deploy 通通一起部署到 GitHub,也就是 GitHub 可能會看到我們尚未完成的文章。以下會介紹先將文章存成草稿的步驟。

如何安裝

條件:node.js 環境 + git
官網文件

先在本地端安裝好需要檔案,安裝後檔案夾內會有

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

_config.yml :
網站配置檔案,可以在此配置大部分的設定。

package.json :
應用程式資料。EJS, Stylus 和 Markdown renderer 已預設安裝,可以稍後移除。

scaffolds :
鷹架 資料夾。當建立新文章時,Hexo 會根據 scaffold 來建立檔案。

source :
原始檔案資料夾是放置內容的地方。檔案 / 資料夾名稱開頭為 _ (底線) 和隱藏檔案會被忽略,除了 _posts 資料夾以外。Markdown 和 HTML 檔案會被處理並放到 public 資料夾,而其他檔案會被拷貝過去。

themes :
主題 資料夾。Hexo 會根據主題來產生靜態檔案。

Hexo 指令

指令明細
$ hexo init [folder]
建立一個新的網站。如果沒有設定 folder 的話,Hexo 會在目前的資料夾建立網站。

如何產生文章

建立文章 : hexo new [layout] <title>

$ hexo new [layout] <title>
Hexo 的 layout 有三種:草稿 draft、頁面 page 和文章 post。也可以自定義 layout.
如果沒有設定 layout 的話,則會使用 _config.yml 中的 default_layout 設定代替,原始預設為 post。
檔案名稱可以中文,如果標題包含空格的話,請使用引號括起來。
建立文章後 hexo 會在 source 裡的 _posts 生成新的 .md。

產生靜態文章 : hexo g

$ hexo generate
產生靜態檔案。
|選項 | 描述 |
| ——– | ——– |
| -g, –generate | 部署網站前先產生靜態檔案 |

本地伺服器 : hexo s

$ hexo server
啟動伺服器,預設是 http://localhost:4000/。
| 選項| 描述|
| ——– | ——– |
| -p, –port | 覆蓋連接埠設定 |
| -s, –static | 只使用靜態檔案 |
| -l, –log | 啟動記錄器,或覆蓋記錄格式 |

部署到 github : hexo d

$ hexo deploy
部署網站。
| 選項 | 描述 |
| ——– | ——– |
| -d, –deploy | 產生完成即部署網站 |
| -w, –watch | 產生完成即部署網站 |

$ hexo render <file> [file2] ...
渲染檔案。

選項 描述
-o, –output 輸出位置

其他指令侯塞雷還可以轉移!

==注意==
如果有使用部分搜尋外掛,會使用 xml 格式搜尋,丟文章上去時先檢查是否有正確規格化為 XML 格式,以免出錯查不出來,所以可先去此網站檢查

常用 Hexo 指令

hexo clean && hexo g && hexo d
hexo clean :清除快取檔案 (db.json) 和已產生的靜態檔案 (public)。

可一起使用:hexo g && hexo s && hexo d && hexo new [文章名稱]

如何更換主題

可上Hexo 官網 Themes直接找自己喜歡的主題,進入主題後,找到install這項,複製 git clone 的網址如,以 Themes 名為 light 為例:
git clone https://github.com/hexojs/hexo-theme-light.git themes/light

Clon 完畢後,到根目錄的 _config.yml 去設定對應的 Themes 主題名稱: theme: light

如何自動備份

可以在同一專案上再開一條 Git 分支,專門儲存原始檔案,或是使用 Askie 推薦的一鍵備份,但須另開專案。

如何文章分類

第一種方法:手動加入

使用 $ hexo n <name>新建頁面,打開此默認頁面是:

1
2
3
4
title: name
date: 2019-08-05 11:15:00
tags:
---

但裡面並沒有分類的資訊,可直接在 tags:上加 categories: 存檔後,重新執行 hexo n 'name',重新打開頁面裡頭就有分類了。

第二種方法:

scaffolds 目錄下,是新建頁面的模板,執行新建命令時,是根據這裡的模板頁來完成的,所以可在這裡根據自己的需求增加一些默認的分類值。
在寫文章時,如果我們的分類是程式,那麼在也面裡的分類就會是categories:程式,它的訪問路徑即是:*/categories/程式

如果想把路徑明和分類明分別設置,可打開根目錄的_config.yml,找到以下位置或增加以下這段做修改:

1
2
3
4
5
6
7
# Category & Tag
default_category: uncategorized
category_map:
程式: programming
生活: life
其他: other
tag_map:

category_map:是設置分類的地方,每行一個分類,冒號前面是分類名稱,後面是訪問路徑。可以提前在這裡設置好一些分類,當編輯的文章填寫了對應的分類名時,就會自動的按照對應的路徑來訪問。

設定分類標籤在頁面裡

在編輯文章的時候,tags:後面是設置標籤的地方,如果有多個標籤的話,可以用下面兩種辦法來設置:

1
2
3
4
5
6
7
8
9
10
11
12
tages:
-標籤1
-標籤2
...
- 標籤n

// 或是
tages:
-標籤1
-標籤2
...
- 標籤n

如何設定分類 menu

在 Hexo 默認菜單只有 Home 和 Archives 兩項,如何增加新的項目到 menu 裡?
打開 themes 裡主題的配置文件:_config.yml

1
2
3
4
menu :
Home: /
Archives: /archives
About: / about

menu : 表示 Nav,在底下加上的 About: /about 表示顯示的 Nav 項目/路徑。Nav 項目可為中文,路徑也可設置其他 url。
記得建立一個 nav 的項目就要執行建立 Nav 項目的指令:
hexo n page 'about' hexo 就會自動生成這個分類的分類頁,在 source 目錄裡會生成一個對應的目錄,此目錄裡的index.md 就是顯示這個分類列表的頁面。

參考:Hexo 使用攻略:(四)Hexo 的分类和标签设置

如何增加站內搜尋功能

swiftype.com服務來設定站內服務,
先至 swiftype 申請帳號,再把生成的碼丟入網頁中。
參考教學 使用 Swiftype 给 Hexo 搭建的博客添加站内搜索功能

如何將文章存成草稿 draft

必須先在 source/ 底下建立一個 _drafts 目錄,以存放草稿。

建立文章草稿

$ hexo new draft <title>
Hexo 另外提供 draft 機制,原理是將新文章將建立在 source/_drafts 目錄下,因此 hexo generate 並不會將其編譯到 public 目錄下,所以 hexo deploy 也不會將其部署到 GitHub。

本機預覽草稿

$ hexo S --draft
雖然 hexo generate 不會編譯 source/_drafts 目錄下的文章,但 Hexo 的 Hexo server 另外提供--draft的參數,這讓我們只要搭配hexo-browsersyncplugins,就可以做到一邊編輯 markdown 文章,一邊使用瀏覽器預覽的目的。

將草稿發佈為正式文章

$ hexo P <filename>
其中<filename>為不包含 md 後綴的文章名稱。它的原理只是將文章從 source/_drafts 移動到 source/_posts 而已。

將正式文章發佈為草稿

之後的 hexo generate 與 hexo deploy 的用法就完全一樣了。
若日後想將正式文章轉為為草稿,只需手動將文章從 source/_posts 目錄移動到 source/_drafts 目錄即可。

向 Google 申請 Blog Search: Google Search Console

增加邊欄

進入 themes\layout_widget 目錄中,建立 about.ejs 文件,模仿其他文件中的模版,輸入以下內容:

1
2
3
4
5
6
7
8
9
<% if (site.tags.length){ %>
<div class="widget-wrap">
<h3 class="widget-title">About</h3>
<div class="widget">
Email:xxx@xxx.com<br />
Site:www.
</div>
</div>
<% } %>

打開 themes_config.yml,找到#Sidebar,在最後面添加- about。刷新頁面。
Ref:Hexo 入門指南

參考

Hexo 檔案配置
在 landscape 主題安裝一些功能

讓 Google 能搜尋到自己的 Hexo Blog

为 Hexo 博客添加目录

發現 Hexo 新貼文後,GitHub 的首頁綠點卻沒出現,於是依照此篇重新設定 ssh,已重新更新。
Hexo+Github 搭建 yilia 主題的博客

紀錄

19/10/2020 增加分類、Tag、404 頁面。放棄更新。