手把手教你快速搭建個人博客 Hexo + Github

平時學習查找資料發現了很多個人博客，搭建的很不錯，一直想抽空自己也動手實踐一下，正好趁着新型冠狀肺炎這段宅在家的空，趕緊搭建一下自己的個人博客

先來預覽一下博主的個人博客：Fly’s Blog

動手能力差的同學可以先跟着B站小匠的視頻快速搭建一下，之後再參考這篇博文進行博客的其他設置：B站搭建博客教程傳送門

一、安裝Git、Node.js以及Hexo

Hexo 官方文檔：https://hexo.io/zh-cn/docs/
這裏不是重點，不贅述，具體參考Hexo的官方文檔

二、搭建博客

1. 初始化一個博客

hexo init 或者 hexo init + 文件夾名稱

2. 安裝博客所需組件

進入到博客所在目錄中，將 package.json 所需要的組件進行安裝（會自動安裝到目錄中生成的node_modules文件夾下）：npm install

3. 修改博客的基礎配置信息

打開目錄下的 _config.yml 文件，修改如下信息

# Site
// 博客的名稱
title: Fly's Blog
// 博客副標題，可以作爲你的個籤
subtitle: 'Only if you asked to see me, our meeting would be meaningful to me'
// 博客的描述（博客的用途）
description: '心情，日記，隨筆，讀後感'
// 博客的關鍵詞。使用 , 分隔多個關鍵詞。
keywords: java, html, css, jQuery
// 博客的作者
author: Hao Liu
// 語言設置，不同主題語言形式不一樣，具體參考使用主題文件夾下的languages文件夾
language: zh-CN
// 時區設置，默認是系統的使用的時區，大陸可以填寫 Asia/Shanghai
timezone: 'Asia/Shanghai'

4. 創建本地服務啓動博客進行預覽

打開博客根目錄下打開 Git Bash，依次輸入以下指令
- 清除緩存文件 (db.json) 和已生成的靜態文件 (public)：hexo clean
  一般再執行 hexo generate 前執行此命令，防止修改內容失效
- 生成靜態文件：hexo generate
- 啓動服務器：hexo server
  默認情況下，訪問網址爲： http://localhost:4000/
打開瀏覽器，訪問 http://localhost:4000/
正常情況下即可查看到你的博客內容如下：

三、部署 / 發佈到github

1. 創建github倉庫:

倉庫名格式：github用戶名 + .github.io
eg：Hins.github.io

2. 安裝 hexo-deployer-git

用於提交本地生成的頁面內容到 github 倉庫
命令： npm install hexo-deployer-git --save

3. 再次修改 `_config.yml` 文件

修改博客地址以及博客的遠程倉庫鏈接

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
// 此處博主使用的是 Github Page 做個人博客的 Websites
url: https://fly-liuhao.github.io/

									......
# Deployment
## Docs: https://hexo.io/docs/deployment.html
// 此處填寫你的 github 倉庫，可以使用 http 或者 SSH(推薦使用)，分支必須爲主分支 master
deploy:
  type: git
  repo: git@github.com:fly-liuhao/fly-liuhao.github.io.git
  branch: master

4. 使用命令部署網站

依次執行如下步驟：
- 清除緩存文件 (db.json) 和已生成的靜態文件 (public)：hexo clean
  （一般再執行 hexo generate 前執行此命令，防止修改內容失效）
- 生成靜態文件：hexo generate
- 部署到Github：hexo deploy
訪問： https://github用戶名.github.io/
- 頁面同在本地部署的一樣

四、將Blog源代碼提交到github

因爲上一步部署只是將生成好的頁面部署到GitHub上，並沒有將源文件存到遠程倉庫中，因此爲了更好的體驗，博客部署好了之後，還要將本地的源文件推送到github，比如說電腦壞了、換了電腦都只需 clone 這個倉庫即可

1. 在根目錄初始化本地倉庫

初始化一個本地倉庫：git init

2. 將原文件添加到本地倉庫

將本地文件放到暫存區：git add .
將暫存區的文件提交到本地倉庫：git commit -m '你的提交描述內容'

3. 將本地倉庫 push 到遠程 gitHub 倉庫中

設置遠程倉庫地址：git remote add origin [email protected]:fly-liuhao/fly-liuhao.github.io.git
注意：HTTPS 和 SSH兩種方式任選其一即可，如果需要改變與遠程倉庫的鏈接方式，需先斷開與遠程倉庫的連接：git remote rm origin
創建源文件分支：git branch source，並切換到該分支：git checkout source
推送到遠程倉庫：git push --set-upstream origin source

五、更換Blog主題

1. 在你的博客根目錄裏下載主題

Hexo 主題參考鏈接：https://hexo.io/themes/
選擇你喜歡的一個主題進行下載，博主這裏選擇的是 Butterfly 主題：git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
下載完成即可在 themes 文件夾下看到下載的主題文件夾：

2. 應用主題

修改站點配置文件_config.yml，把主題改爲Butterfly：theme: Butterfly

3. 安裝 pug 以及 stylus 的渲染器

如果你沒有 pug 以及 stylus 的渲染器，請下載安裝：npm install hexo-renderer-pug hexo-renderer-stylus --save or yarn add hexo-renderer-pug hexo-renderer-stylus

4. 安裝cheerio

hexo 4.2.0版本之後，會出現報錯 “Error: Cannot find module ‘cheerio’” 因此需要安裝 cheerio：npm install cheerio --save

六、主題的基礎配置

注意：不同主題配置是不一樣的，這裏博主以選擇的 Butterfly 主題進行配置，如有小夥伴選擇的是其他主題，請參考主題的官方文檔進行配置（主題 github 中的 README 中一般有給具體配置的參考文檔）

博主使用的 Butterfly 主題配置參考文檔：https://jerryc.me/posts/21cfbf15/
（注意：如果鏈接進不去，選擇高級，繼續訪問即可）

這裏其實你完全可以跟着文檔配置自己的博客，下面是博主自己配置的，僅供參考（如有細節不到位的請參考文檔）

1. 更改主題語言爲`簡體中文`

打開主題中的[languages]文件夾，查看主題中支持的語言：default、en、zh-CN、zh-TW
修改博客的配置文件_config.yml：language: zh-CN

2. 主題配置文件平滑升級

爲了主題的平滑升級, Butterfly 使用了 data files 特性。
推薦把主題默認的配置文件 _config.yml 復製到 Hexo 工作目錄下的source/_data/butterfly.yml，如果source/_data的目錄不存在那就創建一個。

注意，如果你創建了butterfly.yml, 它將會替換主題默認配置文件_config.yml裏的配置項 (不是合併而是替換), 之後你就只需要通過git pull的方式就可以平滑地升級 theme-butterfly了。

3. 將主題的配置文件`butterfly.yml`中的繁體字轉化爲簡體中文

因爲作者好像是臺灣人，配置中的註釋全是繁體，如有介意可以使用下面簡繁轉化的網站進行轉換：Ctrl + A、Ctrl + C、Ctrl + V …
在線繁體-簡體轉換網站：https://www.aies.cn/

4. 配置文章發佈模板

Page（頁面）

 ---
 title: {{ title }}
 date: {{ date }}
 type: （tags，link，categories 這三個頁面需要配置）
 comments: (是否需要顯示評論，默認true)
 description:（頁面描述）
 top_img: (設置頂部圖，鏈接形式)
 mathjax:（用於一些數學表達式顯示配置）
 katex:（用於一些數學表達式顯示配置）
 ---

Post（文章）

---
title: {{ title }}
date: {{ date }}
tags:（文章的標籤）
categories:（文章所屬分類）
keywords:（關鍵字s）
description:（描述）
top_img: （除非特定需要，可以不寫）
comments  （是否顯示評論，默認開啓，除非設置false,可以不寫）
cover: （縮略圖鏈接）
toc: （是否顯示文章目錄，除非特定文章設置，可以不寫）
toc_number: （是否顯示目錄的數字序號，除非特定文章設置，可以不寫）
copyright: （是否顯示版權，默認開啓，除非特定文章設置，可以不寫）
mathjax: （用於一些數學表達式顯示配置）
katex:（用於一些數學表達式顯示配置）
hide: （是否想要隱藏文章）
---

5. 添加基本的頁面

標籤頁：
- 輸入命令：hexo new page tags
- 修改source/tags/index.md文件如下：
```
---
title: 標籤
date: 2020-03-21 00:00:00
type: "tags"
---
```
分類頁：
- 輸入命令：hexo new page categories
- 修改source/categories/index.md文件如下：
```
---
title: 分類
date: 2020-03-21 00:00:00
type: "categories"
---
```

友情鏈接：

輸入命令： hexo new page link

修改source/link/index.md文件如下：

---
title: 友情鏈接
date: 2020-03-21 00:00:00
type: "link"
---

在Hexo博客目錄中的source/_data，創建一個文件link.yml

class:
  class_name: 友情鏈接
  link_list:
    1:
      name: xxx
      link: https://blog.xxx.com
      avatar: https://cdn.xxxxx.top/avatar.png
      descr: xxxxxxx
    2:
      name: xxxxxx
      link: https://www.xxxxxxcn/
      avatar: https://xxxxx/avatar.png
      descr: xxxxxxx  

class2:
  class_name: 無效鏈接
  link_list:
    1:
     name: 夢xxx
     link: https://blog.xxx.com
     avatar: https://xxxx/avatar.png
     descr: xxxx
   2:
     name: xx
     link: https://www.axxxx.cn/
     avatar: https://x
     descr: xx

友情鏈接界面設置（在友情鏈接上寫上自己的個人資料，方便其他人添加），在Butterfly.yml配置：

Flink:
  headline: 友情鏈接
  info_headline: 我的Blog資料
  name: Blog 名字： JerryC
  address: Blog 地址： https://jerryc.me/
  avatar: Blog 頭像： https://jerryc.me/img/avatar.png
  info: Blog 簡介： 今日事,今日畢
  comment: 如果需要交換友鏈,請留言

關於頁面
- 輸入命令：hexo new page about
- 修改source/about/index.md文件
  這裏自我發揮，博主這裏放的是本人的個人簡歷（可以幫助找工作哦），你也可以寫一些你的自我介紹，具體參考其他人的個人博客設計
  PS：這裏如果你的github個人使用比較多的化有自己的，可以使用 hacknical 製作你的簡歷
  - 官網：https://hacknical.com/
  - 說明文檔：https://github.com/ecmadao/hacknical/blob/master/doc/ABOUT-zh.md

6. 音樂頁面

參考hexo-tag-aplayer鏈接：https://github.com/MoePlayer/hexo-tag-aplayer

使用教程鏈接1：https://blog.csdn.net/hushhw/article/details/88092728

使用教程鏈接2：https://www.jianshu.com/p/f1005ae09e5a

安裝插件：npm install --save hexo-tag-aplayer
修改配置，在配置文件 _config.yml中添加：
```
# 音樂播放插件
aplayer:
  meting: true
```
創建music目錄：hexo new page music
網易雲鏈接：https://music.163.com/

修改source/music/index.md文件如下：

---
title: 那些年，聽過的音樂
type: "music"
comments: true
top_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/music.jpg
date: 2020-02-19 11:59:50
description: 輕撫受傷的心靈
mathjax:
katex:
---
   	 
# My Love
// 注意：第一串數字是你網易雲歌曲的ID，瀏覽器地址欄獲取（此行爲註釋，文件中請刪掉此行）
{% meting "551340498" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}
---
# 聆聽這個世界
// 注意：第一串數字是你網易雲歌單的ID，瀏覽器地址欄獲取（此行爲註釋，文件中請刪掉此行）
{% meting "3175659640" "netease" "playlist" "theme:#555" "volume:0.5" "mutex:true" "listmaxheight:340px" "preload:auto" %}

7. 書籍、電影頁面

參考鏈接：https://github.com/mythsman/hexo-douban
這裏調用的是你豆瓣的接口，只需要提供你的ID，同樣也是瀏覽器地址欄獲取（需登錄豆瓣）

安裝插件：npm install hexo-douban --save

在配置文件 _config.yml 中添加：

# 書籍、電影插件
douban:
  user: 175423653 # 你的豆瓣ID
  builtin: false # 是否將生成頁面的功能嵌入hexo s和hexo g中
  book:
    title: '那些年,我看過的書籍'
    quote: '世界上任何的書籍都不能帶給你好運，但是它們能讓你悄悄的成爲你自己'
  movie:
    title: '那些年,我看過的電影'
    quote: '過去、現在、未來'
  timeout: 10000

豆瓣鏈接：https://www.douban.com/
生成指定頁面：hexo douban -bm
- 需要注意的是，通常大家都喜歡用hexo d來作爲hexo deploy命令的簡化，但是當安裝了hexo douban之後，就不能用hexo d了，因爲hexo douban跟hexo deploy的前綴都是hexo d
- 果 builtin 屬性設置爲：true，則每次不需要執行該命令，直接使用hexo g生成頁面即可

七、主題的高級配置

1. 開啓評論功能

推薦使用 Valine ，Laibili加載過於慢，評論是還需跳轉登錄，可直接使用 Valine 實現評論功能

使用 Laibili（來必力）

註冊賬戶並登錄：http://livere.com/

點擊管理頁面，然後根據提示獲取用戶ID（代碼管理中的data-uid後面）

<!-- 來必力City版安裝代碼 -->
<div id="lv-container" data-id="city" data-uid="MTAyMC80ODxxxxxyNTIzNQ==">
							.........

修改主題配置

laibili:
enable: true
uid: MTAyMC80ODxxxxxyNTIzNQ==

使用 Valine（推薦使用）

參考教程1：https://www.jianshu.com/p/728a9594bb6c
參考教程2：https://bluelzy.com/articles/use_valine_for_your_blog.html

註冊LeanCloud（需完成郵箱認證）
創建一個開發版應用
獲取 appId 以及 appKey

修改主題配置 butterfly.yml 如下：

# valine comment system. https://valine.js.org
valine:
  enable: true # if you want use valine,please set this value is true
  appId: xxxxxxxxxxxxxxx # 填寫你獲取的 app id
  appKey: xxxxxxxxxxxxxxx # 填寫你獲取的 app key
  notify: true # valine mail notify (true/false) https://github.com/xCss/Valine/wiki
  verify: false # valine verify code (true/false)
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: zh-cn # i18n: zh-cn/en
  placeholder: 說點什麼吧... # valine comment input placeholder(like: Please leave your footprints )
  guest_info: nick,mail,link #valine comment header info
  bg: /img/comment_bg.png # valine background
  count: false # top_img顯示評論數

2.使用PWA實現Web應用

關於PWA應用

直觀認識：https://www.ithome.com/0/414/429.htm
使用PWA漸進式框架的網站
- 實例博客1：https://diygod.me/
- 實例博客2：https://wangyaxing.cn/
- 微博：https://m.weibo.cn/
- 推特：http://mobile.twitter.com/
- IT之家：https://m.ithome.com/
使用文檔
- hexo-theme-melody 主題：https://molunerfinn.com/hexo-theme-melody-doc/zh-Hans/additional-package-support.html#pwa
- hexo-theme-butterfly 主題：https://jerryc.me/posts/21cfbf15/#PWA
- 配置注意事項：
  - manifest.json創建的位置是主題中的source文件夾
  - 因爲manifest.json中使用到各尺寸Logo圖片，根據路徑在主題中的source中建立相應的文件夾，放入指定尺寸大小以及名稱的Logo圖片
  - 圖片尺寸一定要符合要求必須是長寬像素值大小相等，要不應用的Logo圖片無法加載顯示
使用到的工具
- Png改變大小：https://www.iloveimg.com/zh-cn/resize-image
- Png-svg：http://www.bejson.com/convert/image_to_svg/

3. 添加本地搜索

官方github鏈接：https://github.com/wzpan/hexo-generator-search

使用教程

安裝：npm install hexo-generator-search --save

修改主題配置文件 butterfly.yml 如下：

# Local search
# Please see doc for more details: https://jerryc.me/posts/21cfbf15/#本地搜索
# ---------------
local_search:
  enable: true 
  labels:
    input_placeholder: 搜索文章
    hits_empty: "對不起，沒有找到你想要的文章: ${query}" # if there are no result

4. 添加文章字數統計功能

使用：

安裝：npm install hexo-wordcount --save