在網絡世界上安一個家

1、前言

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

授人以魚不如授人以漁。

固然了，在你寫寫筆記的同時，也能夠以博客的形式發表我的的筆記，如今網絡上又不少博客平臺，咱們均可以直接在上面發表，可是在這些平臺存在比較不自由，會受到各類限制等等。因此，你就能夠考慮搭建一個屬於本身的平臺，一個在網絡世界中屬於本身的家。

好記性不如爛筆頭，將網絡筆記當作本身的網絡中的家，能夠隨時隨地的查看，不受限制。

若是你有足夠的成本和時間，徹底能夠本身寫一個博客程序，經過購買服務器並部署本身編寫的博客程序，按期的維護，經過這種方式搭建屬於本身的家。固然了，這種方式可行但卻太耗精力和成本。因此有的人建議，在github page平臺上託管咱們的博客。這樣就能夠安心的來寫做，又不須要按期維護，並且hexo做爲一個快速簡潔的博客框架，用它來搭建博客真的很是容易。

各抒己見，每一個人均可以經過本身的方式搭建一個家。

我來講說寫博客的好處吧：

1. 當你把經驗的總結寫成博客的時候思路會很清晰，會有新的啓發，尤爲是本身實踐事後的思考總結；

2. 當遇到問題，並解決的時候，能夠給本身的技術和解決思路作存檔，加深記憶，這樣即便過一段時間忘了或者之後須要又或者遇到相同問題的時候，你就能夠打開本身的博客看到本身的記錄了；

3. 能夠記錄本身的成長，記錄本身的工做與生活；

4. 固然了，博客給你帶來的另外一些價值利益好處就不言而喻了。

總的來講，你寫了博客和不寫，確定收穫是不同的。

而在本文中，採起的方式利用hexo做爲一個快速簡潔的博客框架，用它來搭建博客，但由於部署託管到github page平臺上有時候網絡受限訪問太慢了，因此就託管到併發布部署到本身的服務器上。這樣不只能夠快速搭建訪問博客也能將數據保存在本身手上。

Hexo是一款基於Node.js的靜態博客框架, 能夠快速生成靜態文件，訪問速度快；

方便快捷，能夠搭建一個自由的我的博客，不須要後臺；

數據安全，能夠自行保存本身的筆記數據；

博客內容文章能夠輕鬆快速打包、轉移、發佈到其它平臺。

2、準備

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、搭建

3.1 安裝 Hexo 包

npm install -g hexo

注意：

安裝之後，能夠經過 Hexo 指定的方式執行相應的操做。

若是出現 hexo不存在的狀況，須要將 Hexo 所在的目錄下的 node_modules 添加到環境變量之中便可直接使用 hexo <command>

環境變量下：

3.2 初始化

在指定文件位置新建一個文件夾，若是本文的路徑F:\site, 切換到相應的文件夾目錄後，經過初始化的

方式將代碼存放在這個文件目錄下

hexo init

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

3.3 生成

hexo g

執行生成指令後，文件目錄下就會有public文件夾，對應的生成相關的html文件。這個public文件夾目錄下的文件是能夠進行部署我的服務器發佈或提交到github上面進行部署的。

3.4 啓動

hexo s

啓動服務，這個是能夠進行本地預覽效果的，默認端口4000，打開就能夠看到你即將部署的站點的模樣了。

經過以上步驟，hexo已經爲咱們搭建一個站點的框架和默認的主題樣式。固然了，你也能夠根據本身的喜歡選擇相應的官方主題進行修改。

4、更換主題

本文采用的主題是 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、部署

根據上文自定義的方式配置主題後，根據本身的需求，修改對應的信息以後，發佈部署。

5.1 部署

若是沒有服務器的能夠經過註冊github帳號，經過github pages服務搭建博客。（具體的github發佈hexo能夠網上查閱）

由於恰好有一個服務器可使用，暫用的空間也不大，因此我就直接將發佈後的文件部署到服務器上了。綁定後域名後，就能夠進行訪問。

能夠獲得以下的效果。

5.2 最終效果

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

6、說明

簡寫指令:

`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 = {
     ''': '\'',
     '&': '&',
     '>': '>',
     '&lt;': '<',
     '&quot;': '"'
   };

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

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

   這裏的採用的方式是直接找到對應的源碼修改代碼裏面內容，實現花括號轉換問題。固然了，你也能夠採起別的方式，歡迎指定，提出更好的方案。

   若是你在使用搭建過程當中也遇到其餘問題，能夠評論提出，方便你們一併學習彙總。

7、總結

1. 在後續中咱們能夠經過Markdown編寫博客文章，發佈到各個平臺的同時，也能夠發佈到本身搭建的我的博客站點，方便本身學習記錄，便於查閱。
2. 若是有不對的或不理解的地方，但願你們能夠多多指正，提出問題，一塊兒討論,不斷學習,共同進步。
3. 本文中參考資料： Hexo官方簡介 、hexo-theme-matery主題