前言

???首先我并不是學前端的，也不曉得什么網頁設計，單純只是有點一時興起，但是在程序里也是有自己的感悟，踩了很多坑，發現網上雖然教程博客很多，但是真的要自己配起來還是有點麻煩的，總是莫名其妙的報bug，

???在此我也重新在另一臺電腦上重復了搭建程序，更加有了點心得，希望能留下一點啟發，畢竟 傳播知識(才不是如何偷懶 )才是大事!
? 這里是我的博客網址，大家可以看一下：

https://junno_code_blog.gitee.io/junno_code_blog.gitee.io/

? ???謝謝捧場吖~




正文開始~

CSDN (゜-゜)つロ 干杯

環境搭建：NodeJs+Git+Hexo （Win10+64位）

NodeJs安裝

1. 下載安裝 node.js

????我們可以驗證node的版本號和它所附帶的npm包管理器版本號：

# 使用以下命令檢查版本，如果正確輸出則表示安裝成功
# CMD輸入：
node -v
npm v

?

???切換國內源，使用cnpm（馬云爸爸的連接更快喔~

# CMD輸入：
npm install -g cnpm --registry=https://registry.npm.taobao.org

?

???查看cnpm的版本

CMD輸入:cnpm -v

# 列印的資訊：
cnpm@6.1.1 
npm@6.14.11 
node@14.15.4 
npminstall@3.28.0 
win32 x64 10.0.18363
registry=https://r.npm.taobao.org

2. 安裝 Git

???也是屬于傻瓜式安裝，安裝完你會發現目錄和滑鼠右鍵下多了Git Bash和Git GUI的選項，即是安裝成功，

???安裝完打開bash是下面這個小東西：

Hexo安裝

???使用以下命令安裝hexo包，-g表示全域安裝

cnpm install hexo -g

???在你想要的地方新建一個專門來放置hexo博客內容的檔案夾，這里我命名為hexo，這里我是G:\hexo

???cmd到這個檔案夾根目錄：

base：G:
base: cd hexo/

???然后運行hexo init命令來在這個檔案夾初始化一些hexo的基本檔案

???輸出資訊如下：

(base) G:\hexo>hexo init

INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
[32mINFO [39m Install dependencies
added 188 packages from 443 contributors and audited 194 packages in 34.032s
15 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
INFO  Start blogging with Hexo!

???檔案夾下的對應生成檔案：

???接下來看看hexo的一些常用基本命令：

hexo init <folder>  # 執行init命令初始化hexo到你指定的目錄
hexo n "我的博客" == hexo new "我的博客" # 新建文章
hexo generate       # 根據當前目錄下檔案,生成靜態網頁 簡寫：hexo g
hexo server         # 運行本地服務 簡寫：hexo s
hexo clean          # 清理
hexo deploy         # 部署 簡寫：hexo d
hexo server         # Hexo會監視檔案變動并自動更新，無須重啟服務器
hexo server -s      # 靜態模式
hexo server -p 5000 # 更改埠
hexo server -i 192.168.1.1 # 自定義 IP

???比較常用的是：

hexo clean # 清理
hexo g # 生成新的
hexo d # 部署到遠端倉庫
hexo s # 本地服務

???查看hexo的初始化博客頁面：
???在cmd輸入 hexo s -g 即先生成靜態網頁然后啟動本地服務(也可以分開

(base) G:\hexo>hexo s -g
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

???然后在瀏覽器(推薦Chrome)打開http://localhost:4000 (4000是默認port)

???上面是hexo的內置博客主題樣式，我們接下來可以安裝其他主題

主題配置

???這里推薦 hexo-theme-jekyll 和 hexo-theme-yilia

???但是對于新手來說配置一些個性化功能還是有點捉急，我又找到了一個集成個性化功能較高的版本— — hexo-yilia-plus

???有一些比較好用的功能：

添加字數統計功能添加字數統計功能集成不蒜子訪問量統計功能
網易云音樂插件
頁面點擊小紅心效果
添加 GitHub Ribbons(Fork me)
添加著作權宣告
添加百度站長平臺主動推送
集成碼云評論 https://gitee.com/zhousiwei/yilia-plus-demo
添加字數統計功能
添加看板娘動態模型插件
自定義文章著作權宣告文本

???我們來安裝一下介個主題：cmd輸入(還是在hexo的根目錄,這里也體現到了git的作用)

cd ./themes/
git clone --depth=1 https://github.com/JoeyBling/hexo-theme-yilia-plus.git ./yilia-plus

???但是由于Github在國內的niao性，我們可以選擇zip包直接download

???下載好后，我們將它解壓到themes檔案夾下并重命名為yilia-plus

???我們可以先來看下yilia-plus的主題效果，后面再去修改相關的配置

???打開根目錄下的 _config.yml (注意每個主題包里也有一個同名的檔案，但是分管的內容不同，相當于一個總的組態檔)

???找到theme，然后將landscape改為yilia-plus

theme: yilia-plus

???然后就去cmd端去執行一鍵三連

hexo clean
hexo g
hexo s

???然后按F5重繪剛才打開的本地服務網頁：

???可以看到樣式已經發生改變，字數統計、閱讀訪問統計和Github Fork功能已生效，

Gitee倉庫創建和部署

???接下來，我們去 Gitee注冊賬號(如果有了就跳過)，然后新建一個來存放靜態網頁檔案的倉庫，然后就可以利用Gitee的Gitee Pages功能來部署靜態網頁，我們就可以遠程訪問啦(這是免去購買域名和服務器的偷懶做法，當然有能力的大牛自然都是自己購買和搭建服務器了，哭唧唧)

???這里小刀已經有賬號，就直接新建一個repo，名稱和介紹大家按需填寫

???我們需要把本地hexo生成的靜態網頁等檔案上傳到這個Gitee倉庫，首先我們來添加公鑰，這個是保證傳輸的基礎，之后也就不需要每次更新博客都輸入用戶名和密碼啦~

???首先在git bash里輸入：然后一路回車

ssh-keygen -t rsa -C "注冊gitee時使用的郵箱"

???接下來用下面的命令輸出ssh key，就可以看到一長串的密碼啦

cat ~/.ssh/id_rsa.pub

???然后我們到剛才新建的Gitee Repo去：到管理選項里的添加公鑰一欄

???然后輸入剛才復制的公鑰密碼，點擊添加，然后就Ok啦(如果添加失敗報格式錯誤看看是不是復制粘貼的時候多了一些換行符或者空格)

???然后在git bash輸入 ssh -T git@gitee.com，系統會提示你輸入yes/no，輸入yes，如果出現：You’ve successfully authenticated, but GitHub does not provide shell access. 就表示成功了，

???接下來是將hexo部署到Gitee倉庫 :
??到 </>代碼選項復制自己的倉庫url地址

???大家看到下面還有一個全域的Git賬戶初始化指導，可以執行，也可以不執行

???比如現在我的倉庫地址是：https://gitee.com/Junno_code_blog/blog_demo.git

???然后打開根檔案夾下的_config.yml檔案進行配置修改：
找到：

???改為(url和root根據你們自己的倉庫鏈接來改)：

???修改depoly選項，注意type、repository、branch冒號后面都是一個英文空格，格式問題，沒有會出錯

???hexo去deploy到Git要用到一個插件hexo-deployer-git

???我們去cmd里用命令安裝：

cnpm install hexo-deployer-git --save

???然后我們就可以一鍵三連了：

hexo clean
hexo g
hexo d

???中間沒有報錯就可以一路暢通啦，然后去Gitee網站檢查一下有沒有更新：

???然后我們找到Gitee Page功能：

???啟動靜態網站服務：

???然后點擊生成的靜態博客網址

???搓小手手：

???怎么是這樣的！！

???別慌，我們將網頁拉到最下面，會發現有錯誤提示：

???根據它的說明，我們應該是少了一個json檔案生成插件和一些配置選項：

???cmd輸入：

cnpm i hexo-generator-json-content --save

然后再在根目錄_config.yml檔案里加入提示的內容，注意縮進格式：

???然后我們再來一鍵三連：

hexo clean
hexo g
hexo d

！！！！！！！！！！！！！！！！

???接下來是每次更改配置或者更新博客后在Gitee部署的很重要的兩步：

1. 重新啟動Gitee Pages服務，重新部署靜態網頁，否則不會更新配置
2. 打開網址后記得按下F5鍵重繪快取，這是Chrome的網頁快取機制，不然就還是之前的錯誤網(太糟心了，天知道我怎么踩完得這個坑5555)

！！！！！！！！！！！！！！！！

???接下來就是見證奇跡的時刻啦：

???誒嘿 ~ 可以正常顯示了，文章標簽搜索也是正常的~

個性化配置

??接下來大家要做的就是個性化配置了，比如頭像、頭像背景、看板娘、網易云小插件以及各種小功能都可以在yilia-plua檔案夾下的_config.yml里去修改

1. header部分大家看著改

2. subNav部分：

   QQ和微信的名片二維碼大家將自己的圖片保存到\hexo\themes\yilia-plus\source\img 檔案夾下，然后再config里面修改就行

3. avatar 可以換茬自己的頭像圖片，保存路徑與上面一致

4. 看板娘模型預覽，簡單來說就是在博客里放一個小人或者小動物

5. friends 和 aboutme 部分大家看著改
   
   

寫博客四件套：Typora + PicGo + Mathjax + Gitment

??寫博客要有寫博客的工具和相應的分享評論功能，hexo是支持markdown檔案的，這里推薦大家用Typora來寫md檔案，而我們寫博客筆記的時候勢必會用到一些圖片和數學公式，

??在本地預覽由于圖片是在本地所以加載是沒有問題的，但是到了遠程服務端就沒有對應的圖片檔案了，我們需要使用圖床來對圖片生成url訪問地址，這樣在部署后可以通過加載鏈接顯示圖片，

??而最最方便的一點是Typora支持呼叫PicGo進行插入圖片時自動上傳

PicGo安裝

??我們先去下載 PicGo，這里我選的是穩定的2.2.2版本，還有很多beta版大家可以后面去嘗試，下載exe檔案

??安裝完后在插件設定里搜索smms用戶登錄插件：

??安裝完成后重啟軟體

SMMS服務

??SMMS是一個圖床服務，單個檔案最大支持5M，一次最多10張，每個人免費有5G的存盤空間(超級良心~)

??然后我們去 smms 開通圖床服務：先注冊，然后在User下拉選項里到Dashboard

??然后在API Access里面生成Token密鑰：

PicGO關聯SMMS

??在重啟后的PicGo里找到圖床設定這一選項，然后到最后一個SM.MS.用戶登錄設定，將剛才生成的SMMS Token輸入：

Typora關聯 PicGO

??打開Typora的偏好設定，到影像一欄：

??注意這里的PicGo路徑大家根據自己的安裝情況填寫，定位到exe檔案的路徑

??然后點擊驗證圖片上傳選項，出現以下結果便是配置成功：

??還可以去SMMS網站查看到最新的上傳：

??這樣大家在寫博客的時候就可以自動上傳圖片啦，Typora會自動置換成可以訪問的url鏈接代替原來的本地路徑

Hexo數學公式渲染-Katex

??Hexo原本的渲染插件是不支持數學公式的，我們需要安裝別的渲染插件：

??cmd依次運行以下命令(hexo根目錄下執行)：

cnpm uninstall hexo-renderer-marked --save

cnpm install hexo-renderer-markdown-it-plus --save

cnpm install markdown-it-katex --save

??然后在根目錄_config.yml檔案中加入配置選項(注意縮進格式：

markdown_it_plus:
  highlight: true
  html: true
  xhtmlOut: true
  breaks: true
  langPrefix:
  linkify: true
  typographer:
  quotes: “”‘’
  plugins:
    - plugin:
        name: markdown-it-katex
        enable: true
    - plugin:
        name: markdown-it-mark
        enable: false

??在打開themes/next/layout/_partial/head.ejs檔案，在末尾加入一句代碼：

<link href="https://cdn.bootcss.com/KaTeX/0.7.1/katex.min.css" rel="stylesheet">

??然后我們新生成一個md檔案，并寫入一些數學公式：

??cmd輸入：

hexo n "math_test"

??hexo就會在\hexo\source_posts\下生成初始化的md檔案

??開頭是一個yml格式的檔案資訊宣告，其中tags可以加入標簽，就可以在網頁里面顯示并且可以根據這些標簽搜索，

??還有像打賞或者渲染等options資訊也是在這里宣告，常用的有：

title: 從零搭建博客 教程 Hexo GitHub    #文章標題
subtitle:                            #子標題
#categories: 文章                     #文章分類目錄 可以省略    
toc: true                            #目錄 需要安裝插件或者主題自帶
reward: true                         #打賞 需要安裝插件或者主題自帶
declare: true                        #著作權 需要安裝插件或者主題自帶
date:                                #文章日期 2019/7/1
header-img:                          #頂部背景圖片
tags:                                #標簽
	- 自學
	- Blog
	- Original

??注意除了tags其他options的冒號后面都帶有空格

??數學公式測驗的md檔案我們在開頭宣告：

layout: post
title: math_test
date: 2021-01-22 16:30:51
comments: true
mathjax: true
tags:
	- 測驗用

??然后將yilia-plua檔案夾下的_config.yml中mathjjax設定成true

??然后又是一鍵三連：

hexo clean
hexo g
hexo s

??就可以看到數學公式渲染成功啦：

??Ps: 建議加入公式開頭結尾分別加入以下格式宣告，使多行公式對齊并且有標號，否則可能會渲染失敗

 \begin{align}
	你的內容
 \end{align}

Gitment 評論系統

??yilia-plus的作者推薦使用Giteement，也就是以Gitee為基礎的評論系統，但是我嘗試之后并未成功，可能是由于用到的服務node已經失效，

??于是嘗試使用Github端的集成評論系統——Gitment(本身Giteement就是根據Gitment修改而來

??首先我們先去Github新建一個repo來存盤評論資訊

??然后去申請一個 OAuth Application

??Application name 應用名稱(根據實際來填寫)

??Homepage URL 主頁網址(應用程式主頁的完整URL)

??Application description 應用說明(應用描述)

??Authorization callback URL 授權回呼URL(一般是博客的域名)

??然后點擊生成新的Client secrets，并更新配置

??復制Client ID 和 Client secrets 到theme檔案夾下config檔案里的對應位置，別忘了Github端更新配置：

??根據config檔案里的提示修改配置：

??然后一鍵三連測驗走一波(記得Gitee Pages重新部署操作+F5頁面多載喔)

??看看一些基本修改后的主頁：

??我們可以看到評論區有熟悉的小黑貓了，然后點擊login

??點擊初始化評論，然后來一個小評論測驗一下：

??同時查看Github對應Repo的issue欄，可以看見該評論已經通過issue發布了：

??至此寫博客四件套：Typora + PicGo + Mathjax + Gitment 已經全部集齊，可以開心的寫推文或者博客啦~

文末【本文鏈接】錯誤debug

??在著作權宣告這一快，有一個本文鏈接的轉載資訊，但是它的url其實是有錯的，點它必出404

??而正確的鏈接應該是 (https://junno_code_blog.gitee.io/blog_demo/2021/01/22/math-test/)

??通過搜索MIT關鍵字，我找到了它的原始碼：

??很顯然是這個 yilia_plus_full_url 函式不正確，但是這里我并不知道post.path 和 post.title 的值是啥，于是我稍作修改并利用Chrome的F12查看網頁原始碼：

??然后發現：

Post.title = math_test # 檔案名
post.path = 2021/01/22/math-test # 檔案相對路徑

??那我們可以手動加入正確的前綴，因為正確的url其實是包含post.path的.

??在theme的config檔案中加入以下一句代碼：

url: https://junno_code_blog.gitee.io/blog_demo/

??并稍作修改，其實就是簡單的變數替換（我也沒學過js）：

??最后再一鍵三連測驗一波啦：

點擊一下鏈接，成功跳轉，大功告成~

結語

??幫大家踩了點坑，還有一些個性化配置就靠大家去奇思妙想啦，加入自己喜歡的頭像、背景圖或者小組件，
??也算了了當初的一個Flag，終于有了自己的個人博客網頁，挺捉急的就是了，

Reference

1. 基礎的環境配置和依賴庫安裝

2. 一些問題的更新和個性化設定

3. hexo-yilia-plus theme

4. Gitment 配置

5. hexo 數學公式渲染

6. hexo 推送機制

7. hexo 搭建教程