Hexo 部落格架設流程紀錄

發表於 | 更新於: | 分類於 |
圖片來源： 網路

開始寫學習筆記大概三個月，之前一直使用 github issue 來放文章，它可以支援 markdown 語法，有簡單的分類標籤，不需要架設，登入即用，能滿足最基本的要求，缺點大概是他本來就不是拿來當部落格用的，文章如果多找一些資料蠻不方便的，另外也無法被搜尋引擎找到。

為什麼轉戰 hexo

  • 支援分類、站內搜尋功能
  • Next 主題會自動幫你生成文章大綱
  • 支援 Markdown
  • 簡單美觀
  • 可以做些客製化
  • 可做 SEO

對我而言，寫筆記主要的用途是幫助自己在未來遇到相同問題時可以很快透過過去的經驗找到解答，在撰寫的過程中透過大量的查找資料，無形中也更加深觀念。Hexo 的分類、標籤、站內搜尋和文章目錄功能都可以幫助我很快的過濾我需要的資訊，這點真的非常方便！
網路上 Hexo 的架站教學非常豐富完整，只要照著文章做，30 分鐘就能做出個基本可用的部落格了，後面再花些時間去加入一些你自己想要的功能就可以開始使用了。

需求

  • Node.js 環境
  • Git 環境以及基本 Github 使用

基本建置

安裝 Node.js 環境

如果是沒有使用過 Node.js 的人可能會比較辛苦，需要花點時間學習一下，建議先了解看看基本概念和使用方式。

  • Node.js 有兩種安裝方式

如果是剛接觸的朋友可以先到官網直接下載來先試試，但未來建議使用 nvm 來安裝， node.js 隨著版本更新會有些版本上的差異，有時這個專案是這個版本，那個專案又是別的版本，會有一些不相容的問題。nvm 只要使用簡單的指令 nvm install :版本號 + nvm use :版本號，就可以自如切換 node 版本。

安裝 Hexo

使用 npm 安裝 hexo ( npm 是安裝 node.js 會一併附給你的套件管理工具 )

1
$ npm install hexo-cli -g

安裝成功後，查詢版本

1
$ hexo -v

創建部落格

初始化

1
$ hexo init blog

移動到剛剛創建的資料夾

1
$ cd blog

安裝相關套件

1
$ npm install

將 Hexo 上傳到 Github

  1. 首先先到 Github 新增一個 repository

  2. 將 repository 名稱命名為 :你的帳號.github.io， 像我的帳號是 dylan237，那就輸入

1
dylan237.github.io

配置 _config.yml

檔案路徑./_config.yml，這個檔案是 Hexo 的全域配置文檔，在上面進行 hexo init blog 步驟的時候就會自動生成了。

開啟之後拉到檔案最底部

1
2
deploy:
  type:

將它修改為

1
2
3
4
deploy:
  type: git
  repository: https://github.com/dylan237/dylan237.github.io.git
  branch: master

這邊以我自己的帳號作範例，帳號部分記得要換成自己的。且注意 : 後一定要有一個空格。

部屬

先安裝 Hexo Git

1
$ npm install hexo-deployer-git --save

使用 Hexo 的指令編譯你的部落格，並且快速部屬到你的 Github，指令是：

1
$ hexo d -g

啟動本機服務

1
$ hexo s

接著就可以到　https://dylan237.github.io/ 查看是否部屬成功

Next 主題

官方文檔

  • 安裝
1
2
$ cd blog
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
  • 配置

開啟站點配置文件，./themes/next/_config.yml

1
theme: next

到此，NexT 主題安裝完成。下一步我們將驗證主題是否正確啟用。在切換主題之後、驗證之前，我們最好使用這個語法來清除 Hexo 的緩存。

1
hexo clean
  • 主題設定

檔案同樣是 ./themes/next/_config.yml

Scheme 的切換通過更改主題配置文件，搜索 scheme 關鍵字。你會看到有三行 scheme 的配置，將你需用啟用的 scheme 前面註釋 # 去除即可。

1
2
3
#scheme: Muse
#scheme: Mist
scheme: Pisces

發布及刪除文章

創建文章

1
$ hexo new :文章名稱

前往 source / _post 資料夾中，打開 :文章名稱.md 文件，在最下面新增 Markdown 語法的內容。

修改完後，執行以下指令

1
$ hexo d -g    # d = 部署, g = 生成

刪除文章

進入到 source / _post 資料夾中，找到欲刪除文件，在本地直接執行刪除。

執行

1
2
$ hexo clean    # 清除快取檔案和已產生的靜態檔案。
$ hexo d -g     # d = deploy, g = generate

額外功能

新增站內搜尋功能

參考文章

首先安裝

1
$ npm install hexo-generator-searchdb --save

編輯站點配置文件 ./_config.yml

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

編輯主題配置文件 ./themes/next/_config.yml

1
2
3
# Local search
local_search:
  enable: true

新增分類功能

參考文章

首先安裝

1
$ hexo new page categories

成功後會提示

1
INFO  Created: ~/Documents/blog/source/categories/index.md

根據以上路徑找到 index.md文件，打開後會看到預設是

1
2
3
4
---
title: categories
date: 2017-05-27 13:47:40
---

添加 type: "categories" 到內容中，並存檔

1
2
3
4
5
---
title: categories
date: 2017-05-27 13:47:40
type: 'categories'
---

開啟 ./themes/next/_config.yml 搜尋，menu 找尋相關配置，將 categories 註解取消

1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

之後在 ./source/_post 新增 Markdown 文章都可以添加 categories屬性

注意： hexo 一篇文章只能屬於一個分類，舉例來說如果在 - web前端 下方添加 - JavaScript， hexo 不會產生兩個分類，而是把 - JavaScript 分類歸在 - web前端 分類下。

1
2
3
4
5
6
---
title: 表單的操作及應用
date: 2017-05-26 12:12:57
categories:
  - web前端
---

到這邊，就成功增加分類了，點擊首頁的分類可以看到該分類下的所有文章，只有添加了 categories: xxx的文章才會被收錄到首頁的分類中

新增標籤功能

首先安裝

1
$ hexo new page tags

成功後會提示

1
INFO  Created: ~/Documents/blog/source/tags/index.md

根據以上路徑找到 index.md文件，打開後會看到預設是

1
2
3
4
---
title: tags
date: 2017-05-27 13:47:40
---

添加 type: "tags" 到內容中，並存檔

1
2
3
4
5
---
title: tags
date: 2017-05-27 13:47:40
type: 'tags'
---

開啟./themes/next/_config.yml 搜尋，menu 找尋相關配置，將 tags 註解取消

1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

之後在 ./source/_post 新增 Markdown 文章可以添加 tags屬性

1
2
3
4
5
6
7
8
9
---
title: 表單的操作及應用
date: 2017-05-26 12:12:57
categories:
  - web前端
tags:
  - 表格
  - 表單驗證
---

作者相關設定

大頭照

新增一個資料夾來放照片

1
$ mkdir source/uploads

將照片丟進資料夾裡，並且設定在設定檔 themes/next/_config.yml設定路徑

1
avatar: /uploads/avatar.jpg

作者

在根目錄的網站設定 /_config.yml中設定名字、標題和副標題

1
2
3
4
title: <標題>
subtitle: <副標題>
description: <描述>
author: <你的名字>

社群媒體連結

在主題設定 themes/next/_config.yml中新增社群網路連結

1
2
3
4
# Social links
social:
  GitHub: #url
  Twitter: #url

About Me Page

新建關於我頁面

1
$ hexo new page "about"

在 themes/next/_config.yml搜尋 menu 找到相關設定，並且將 about 註解去除

1
2
3
4
5
menu:
  home: /
  archives: /archives
  tags: /tags
  about: /about

可以開始編輯關於我頁面囉 source/about/index.md

1
2
3
4
5
6
7
8
---
title: 關於我
date: 2019-05-27 09:57:05
---

# 關於我

大家好，我是 Dylan .......

Disqus 留言功能

  1. 先到Disqus註冊服務
  2. 選擇 I want to install Disqus on my site
  3. 自訂一個 Website Name
  4. 回到 themes/next/_config.yml 搜尋 disqus，填入以下資訊
1
2
3
4
disqus:
  enable: true
  shortname: #你的Website Name
  count: true
  1. 未來你的所有文章會預設開啟評論功能，如果要關閉可以在該文章表頭設定
1
2
3
4
---
...略
comments: false
---

文章預設表頭模板

打開 ./scaffolds/post.md， 可以設置新文章的模板，在執行 hexo new :文章名 後，新文章會根據該模板添加預設的預設值。

1
2
3
4
5
6
---
title: { { title } }
date: { { date } }
categories:
tags:
---

首頁文章顯示自訂摘要

這邊承接上面的模板功能，打開 ./scaffolds/post.md，在下方新增配置

1
2
3
4
5
6
7
8
---
title: { { title } }
date: { { date } }
categories:
tags:
---

<!-- more -->

從表頭結尾的 ---開始到 <!-- more -->中間可以撰寫該文章的摘要，當瀏覽部落格首頁時，hexo 只會顯示該摘要而不會顯示文章的全文，如此可以讓首頁更加整潔好閱讀。

常用指令整理

1
2
3
4
5
6
7
8
hexo init
hexo clean
hexo generate
hexo new post <title>
hexo new page tags
hexo server
hexo server -p 8000 --debug
hexo deploy

補充

將 Next 自訂配置分離

目前升級 NexT 主題的時候並非是非常的流暢。若使用 git pull的方式，很多時候可能會產生衝突;而下載新版本覆蓋安裝的方式又需要手動合併主題的 _config.yml文件。

在此修改之前，NexT 建議將配置分離，一部分在站點的配置文件中，另外一部分在主題的配置文件中。將需要自定的選項放置在站點配置文件中，從而脫離避免更新主題時可能遇到的麻煩這種方式是可行，但是有一些缺點：

  1. 配置分離成了兩個部分
  2. 用戶可能會疑惑一些選項該放置在哪裡比較合適

為了解決這個問題，NexT 將會使用 Hexo 的 Data 文件。然而由於數據文件是在 Hexo 3 版本時引進的，所以要使用這個特性，需要 Hexo 的版本不低於 3。

若你比較喜歡 Hexo 2.x 版本，可以繼續使用原先的配置方式.NEXT 保持著向下兼容。

優點

通過這個特性，你可以將所有的主題配置放置在站點的 source/_data/next.yml文件中。原先放置在站點配置文件中的選項可以遷移到新的位置，同時，主題配置文件可以不用做任何修改。若後續版本有配置相關的改動時，僅需你在 next.yml中做相應調整即可。

如何使用此功能

  1. 請先確保你所使用的 Hexo 版本在 3 以上
  2. 站點在的 source/_data目錄下新建 next.yml文件（_data 目錄可能需要手動新建）
  3. 將 NexT 主題設定檔 _config.yml複製到 next.yml。

參考來源

远程仓库无法备份 theme/next 主题的问题
Theme configurations using Hexo data files
Hexo 博客主题文件夹无法完整 push 及 clone

SEO 搜尋引擎優化

由於篇幅過長，請直接參考文章

參考資料

Hexo+GitHub，新手也可以快速建立部落格
用 Hexo-Github-Pages 搭建個人部落格
Hexo 使用攻略-添加分类及标签