在網路世界上安一個家

艾三元發表於2020-09-19

一、前言

最近因為忙於專案，所以都沒時間更新文章了，正好也在帶幾個實習小妹。所以也建議他們要善於思考，學會總結，多寫寫筆記，便於記憶與查閱。

授人以魚不如授人以漁。

當然了，在你寫寫筆記的同時，也可以以部落格的形式發表個人的筆記，現在網路上又很多部落格平臺，我們都可以直接在上面發表，但是在這些平臺存在比較不自由，會受到各種限制等等。所以，你就可以考慮搭建一個屬於自己的平臺，一個在網路世界中屬於自己的家。

好記性不如爛筆頭，將網路筆記當做自己的網路中的家，可以隨時隨地的檢視，不受限制。

如果你有足夠的成本和時間，完全可以自己寫一個部落格程式，通過購買伺服器並部署自己編寫的部落格程式，定期的維護，通過這種方式搭建屬於自己的家。當然了，這種方式可行但卻太耗精力和成本。所以有的人建議，在github page平臺上託管我們的部落格。這樣就可以安心的來寫作，又不需要定期維護，而且hexo作為一個快速簡潔的部落格框架，用它來搭建部落格真的非常容易。

各抒己見，每個人都可以通過自己的方式搭建一個家。

我來說說寫部落格的好處吧：

  1. 當你把經驗的總結寫成部落格的時候思路會很清晰，會有新的啟發，尤其是自己實踐過後的思考總結；

  2. 當遇到問題，並解決的時候，可以給自己的技術和解決思路做存檔，加深記憶，這樣即使過一段時間忘了或者以後需要又或者遇到相同問題的時候，你就可以開啟自己的部落格看到自己的記錄了；

  3. 可以記錄自己的成長，記錄自己的工作與生活；

  4. 當然了，部落格給你帶來的另一些價值利益好處就不言而喻了。

總的來說，你寫了部落格和不寫，肯定收穫是不一樣的。

而在本文中，採取的方式利用hexo作為一個快速簡潔的部落格框架，用它來搭建部落格，但因為部署託管到github page平臺上有時候網路受限訪問太慢了，所以就託管到併發布部署到自己的伺服器上。這樣不僅可以快速搭建訪問部落格也能將資料儲存在自己手上。

Hexo是一款基於Node.js的靜態部落格框架, 可以快速生成靜態檔案，訪問速度快；

方便快捷，可以搭建一個自由的個人部落格，不需要後臺；

資料安全，可以自行儲存自己的筆記資料；

部落格內容文章可以輕鬆快速打包、轉移、釋出到其它平臺。

hexo

二、準備

  1. 安裝git客戶端 （為了展示效果，我是用的window環境下安裝git客戶端）

  2. 安裝node.js （這個可以看之前的文章）

  3. 有一個個人github賬號（沒有的可以註冊一個）（如果有伺服器的話，可以直接使用伺服器）

    （本文不對git部署方式進行說明，可自行網上查閱。）

  4. 熟悉markdown語法。（便於後續通過markdown語法編寫文章）

官網建議Node.js 版本需不低於 10.13，建議使用 Node.js 12.0 及以上版本。

本文用的環境：

node.js@ 12.13.1 ( 指令 ：node -v)

hexo @ 5.1.1 ( 指令 ：hexo -v)

git @ 2.24 ( 指令 ：git version)

三、搭建

3.1 安裝 Hexo 包

npm install -g hexo

注意：

安裝以後，可以通過 Hexo 指定的方式執行相應的操作。

如果出現 hexo不存在的情況，需要將 Hexo 所在的目錄下的 node_modules 新增到環境變數之中即可直接使用 hexo <command>

環境變數下：

環境變數

3.2 初始化

在指定檔案位置新建一個資料夾，如果本文的路徑F:\site, 切換到相應的資料夾目錄後，通過初始化的

方式將程式碼存放在這個檔案目錄下

hexo init

1970944824

初始化後生成的以下目錄結構如下：

3.3 生成

hexo g

執行生成指令後，檔案目錄下就會有public資料夾，對應的生成相關的html檔案。這個public資料夾目錄下的檔案是可以進行部署個人伺服器釋出或提交到github上面進行部署的。

3.4 啟動

hexo s

啟動服務，這個是可以進行本地預覽效果的，預設埠4000，開啟就可以看到你即將部署的站點的模樣了。

通過以上步驟，hexo已經為我們搭建一個站點的框架和預設的主題樣式。當然了，你也可以根據自己的喜歡選擇相應的官方主題進行修改。

四、更換主題

本文采用的主題是 hexo-theme-matery, 當然了，我自己現在用的也是這個主題。

4.1 下載

切換到目錄 F:\site\themes 執行下載主題

git clone https://github.com/blinkfox/hexo-theme-matery.git

下載完之後，將F:\site目錄下的_config.yml中的theme:landscape改為我們想要的主題theme: hexo-theme-matery, 然後再次執行 hexo g指令重新生成。

如果出現問題，可以嘗試先執行hexo clean清理public資料夾的內容，再重新生成hexo g和釋出。

再次啟動服務hexo s，這次可以預覽到的效果就是我們更換主題後想要的效果了。

4.2 配置

4.2.1 新建分類 categories 頁

categories 頁是用來展示所有分類的頁面，如果在你的部落格 source 目錄下還沒有 categories/index.md 檔案，那麼你就需要新建一個，命令如下：

hexo new page "categories"

編輯你剛剛新建的頁面檔案 /source/categories/index.md，至少需要以下內容：

---
title: "分類"
date: 2020-09-13 17:06:27
type: "categories"
layout: "categories"
---

4.2.2 新建標籤 tags 頁

tags 頁是用來展示所有標籤的頁面，如果在你的部落格 source 目錄下還沒有 tags/index.md 檔案，那麼你就需要新建一個，命令如下：

hexo new page "tags"

編輯你剛剛新建的頁面檔案 /source/tags/index.md，至少需要以下內容：

---
title: "標籤"
date: 2020-09-13 17:07:18
type: "tags"
layout: "tags"
---

4.2.3 新建關於我 about 頁

about 頁是用來展示關於我和我的部落格資訊的頁面，如果在你的部落格 source 目錄下還沒有 about/index.md 檔案，那麼你就需要新建一個，命令如下：

hexo new page "about"

編輯你剛剛新建的頁面檔案 /source/about/index.md，至少需要以下內容：

---
title: about
date: 2020-09-13 17:07:42
type: "about"
layout: "about"
---

4.2.4 新建 404 頁

如果在你的部落格 source 目錄下還沒有 404.md 檔案，那麼你就需要新建一個

編輯你剛剛新建的頁面檔案 /source/404.md，至少需要以下內容：

---
title: 404
date: 2018-09-30 17:25:30
type: "404"
layout: "404"
description: "Oops～，我崩潰了！找不到你想要的頁面 :("
---

4.2.4 程式碼高亮

由於 Hexo 自帶的程式碼高亮主題顯示不好看，所以主題中使用到了 hexo-prism-plugin 的 Hexo 外掛來做程式碼高亮，安裝命令如下：

npm i -S hexo-prism-plugin

然後，修改 Hexo 根目錄下 _config.yml 檔案中 highlight.enable 的值為 false，並新增 prism 外掛相關的配置，主要配置如下：

highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

4.2.5 搜尋

本主題中還使用到了 hexo-generator-search 的 Hexo 外掛來做內容搜尋，安裝命令如下：

npm install hexo-generator-search --save

在 Hexo 根目錄下的 _config.yml 檔案中，新增以下的配置項：

search:
  path: search.xml
  field: post

4.2.6 中文連結轉拼音

如果你的文章名稱是中文的，那麼 Hexo 預設生成的永久連結也會有中文，這樣不利於 SEO，且 gitment 評論對中文連結也不支援。我們可以用 hexo-permalink-pinyin Hexo 外掛使在生成文章時生成中文拼音的永久連結。

安裝命令如下：

npm i hexo-permalink-pinyin --save

在 Hexo 根目錄下的 _config.yml 檔案中，新增以下的配置項：

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

注：除了此外掛外，hexo-abbrlink 外掛也可以生成非中文的連結。

更多具體的操作，可以查閱該主題的具體的操作文件說明。

五、部署

根據上文自定義的方式配置主題後，根據自己的需求，修改對應的資訊之後，釋出部署。

5.1 部署

如果沒有伺服器的可以通過註冊github賬號，通過github pages服務搭建部落格。（具體的github釋出hexo可以網上查閱）

因為剛好有一個伺服器可以使用，暫用的空間也不大，所以我就直接將釋出後的檔案部署到伺服器上了。繫結後域名後，就可以進行訪問。

可以得到如下的效果。

5.2 最終效果

站點地址: http://www.i3yuan.top

六、說明

簡寫指令:

`hexo init` #初始化XX資料夾名稱
`hexo n "我的第一篇文章"` # 等價於  `hexo new "我的第一篇文章"`還等價於`hexo new post "我的第一篇文章"` 
`hexo p` 等價於 `hexo publish`    #通過 publish 命令將草稿移動到 source/_posts 資料夾 
`hexo g` 等價於 `hexo generate`  # 生成靜態網頁(生成在public資料夾）
`hexo s`等價於 `hexo server`     # Hexo 會監視檔案變動並自動更新，除修改站點配置檔案外,無須重啟伺服器,直接重新整理網頁即可生效。
`hexo d` 等價於 `hexo deploy` # 將本地資料部署到遠端伺服器(如github)
`hexo deploy -g`  等價於 `hexo deploy --generate`
`hexo generate -d`等價於`hexo generate --deploy
`hexo clean` #清除快取 ,網頁正常情況下可以忽略此條命令,執行該指令後,會刪掉站點根目錄下的public資料夾

注: hexo clean 沒有 簡寫, git --version 沒有簡寫

npm update hexo -g#升級
npm install hexo -g#安裝
node-v #檢視node.js版本號
npm -v #檢視npm版本號
git --version #檢視git版本號
hexo -v #檢視hexo版本號

錯誤

  1. 網頁將程式碼中片的 {} 解析為 &#123 的錯誤

    錯誤這個問題，無法轉換{ },直接找到路徑node_modules/hexo_prism_plugin/src/index.js下的檔案,程式碼如下：

    const map = {
  '&#39;': '\'',
  '&amp;': '&',
  '&gt;': '>',
  '&lt;': '<',
  '&quot;': '"'
};

    解決方法就是多加&#123和&#125對花括號的轉義

    const map = {
  '&#39;': '\'',
  '&amp;': '&',
  '&gt;': '>',
  '&lt;': '<',
  '&quot;': '"',
  '&#123': '{',
  '&#125': '}'
};

    這裡的採用的方式是直接找到對應的原始碼修改程式碼裡面內容，實現花括號轉換問題。當然了，你也可以採取別的方式，歡迎指定，提出更好的方案。

    如果你在使用搭建過程中也遇到其他問題，可以評論提出，方便大家一併學習彙總。

七、總結

  1. 在後續中我們可以通過Markdown編寫部落格文章，釋出到各個平臺的同時，也可以釋出到自己搭建的個人部落格站點，方便自己學習記錄，便於查閱。
  2. 如果有不對的或不理解的地方，希望大家可以多多指正，提出問題，一起討論,不斷學習,共同進步。
  3. 本文中參考資料： Hexo官方簡介 、hexo-theme-matery主題

相關文章