一、前言
最近因為忙于專案，所以都沒時間更新文章了，正好也在帶幾個實習小妹，所以也建議他們要善于思考，學會總結，多寫寫筆記，便于記憶與查閱，
授人以魚不如授人以漁，
當然了，在你寫寫筆記的同時，也可以以博客的形式發表個人的筆記，現在網路上又很多博客平臺，我們都可以直接在上面發表，但是在這些平臺存在比較不自由，會受到各種限制等等，所以，你就可以考慮搭建一個屬于自己的平臺，一個在網路世界中屬于自己的家，
好記性不如爛筆頭，將網路筆記當做自己的網路中的家，可以隨時隨地的查看，不受限制，
如果你有足夠的成本和時間，完全可以自己寫一個博客程式，通過購買服務器并部署自己撰寫的博客程式，定期的維護，通過這種方式搭建屬于自己的家，當然了，這種方式可行但卻太耗精力和成本，所以有的人建議，在github page平臺上托管我們的博客，這樣就可以安心的來寫作，又不需要定期維護，而且hexo作為一個快速簡潔的博客框架，用它來搭建博客真的非常容易，
各抒己見，每個人都可以通過自己的方式搭建一個家，
我來說說寫博客的好處吧：
當你把經驗的總結寫成博客的時候思路會很清晰，會有新的啟發，尤其是自己實踐過后的思考總結；
當遇到問題，并解決的時候，可以給自己的技術和解決思路做存檔，加深記憶，這樣即使過一段時間忘了或者以后需要又或者遇到相同問題的時候，你就可以打開自己的博客看到自己的記錄了；
可以記錄自己的成長，記錄自己的作業與生活；
當然了，博客給你帶來的另一些價值利益好處就不言而喻了，
總的來說，你寫了博客和不寫，肯定識訓是不一樣的，
而在本文中，采取的方式利用hexo作為一個快速簡潔的博客框架，用它來搭建博客，但因為部署托管到github page平臺上有時候網路受限訪問太慢了，所以就托管到并發布部署到自己的服務器上，這樣不僅可以快速搭建訪問博客也能將資料保存在自己手上，
Hexo是一款基于Node.js的靜態博客框架, 可以快速生成靜態檔案，訪問速度快；
方便快捷，可以搭建一個自由的個人博客，不需要后臺；
資料安全，可以自行保存自己的筆記資料；
博客內容文章可以輕松快速打包、轉移、發布到其它平臺，
二、準備
-
安裝git客戶端 （為了展示效果，我是用的window環境下安裝git客戶端）
-
安裝node.js （這個可以看之前的文章）
-
有一個個人github賬號（沒有的可以注冊一個）（如果有服務器的話，可以直接使用服務器）
（本文不對git部署方式進行說明，可自行網上查閱，）
-
熟悉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
初始化后生成的以下目錄結構如下：
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版本號
錯誤
-
網頁將代碼中片的 {} 決議為
{的錯誤錯誤這個問題，無法轉換
{ },直接找到路徑node_modules/hexo_prism_plugin/src/index.js下的檔案,代碼如下：const map = { ''': '\'', '&': '&', '>': '>', '<': '<', '"': '"' };解決方法就是多加
{和}對花括號的轉義const map = { ''': '\'', '&': '&', '>': '>', '<': '<', '"': '"', '{': '{', '}': '}' };這里的采用的方式是直接找到對應的原始碼修改代碼里面內容，實作花括號轉換問題，當然了，你也可以采取別的方式，歡迎指定，提出更好的方案，
如果你在使用搭建程序中也遇到其他問題，可以評論提出，方便大家一并學習匯總，
七、總結
- 在后續中我們可以通過Markdown撰寫博客文章，發布到各個平臺的同時，也可以發布到自己搭建的個人博客站點，方便自己學習記錄，便于查閱，
- 如果有不對的或不理解的地方，希望大家可以多多指正，提出問題，一起討論,不斷學習,共同進步，
- 本文中參考資料： Hexo官方簡介 、hexo-theme-matery主題
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/84207.html
標籤：Html/Css
上一篇：移動端適配的最佳實踐