選擇該方式搭建的理由和要做的準備
每個項目在開始之前，都需要先清楚項目的目的、主要的需求和核心點在哪。我在選擇搭建的方式之前，根據個人狀況確認了博客的搭建需要滿足以下需求：
- 無需自備服務器，靜態網站也沒關係
- 不錯的分類歸檔
- 方便文章追溯
- 簡潔的排版
- 不用瞭解或使用太多前端知識(排版是我的痛)
根據自行百度瞭解，在github/gitee上搭建的Pages博客最起碼是滿足第1點要求的，選用哪種方式在github上搭建便打算先簡單使用下搭建的技術瞭解後再做確認。下圖為gitee支持搭建靜態網站的技術：
第一個選用的是hexo(慶幸不用選第二個了)，理由是文章多，有足夠的參考，官方網站也提供中文文檔。在開始之前需要做以下的準備：
- nodejs安裝(百度官網下載安裝即可)
- github/gitee賬號
- git安裝
雖然gitee/github都可以部署，但還是要提下兩者之間的細微區別：
- gitee是國內站點，網絡穩定高速，github訪問有時不穩定
- 站點項目更新部署到github/gitee後，github會自動重新部署更新，失敗後還會給你發郵件，gitee則需要到respository裡手動更新(除非你升級會員)
在部署到gitee/github之前可以先在本地調試樣式添加文章，調好了後再部署到github上。
搭建hexo本地環境
- 確認nodejs已安裝：node -v
- 安裝hexo:npm install -g hexo
- 環境初始化：hexo init 目錄名(目錄不存在則自動創建),出現Start blogging with Hexo!則完成
- 進入初始化的項目目錄後運行：hexo server [-p 端口號],默認端口為4000,訪問localhost:port出現下圖則本地基礎環境搭建完成
個人瞭解到的hexo與next主題配置
項目目錄下的核心目錄/文件如下：
- scaffolds:模板、腳架目錄
- source：源文件夾(內容核心)，所有的文章和分類、標籤等都是通過該文件夾下的內容進行發佈的
- source/_post：所有發佈的文章都在該文件夾中
- source/xxx：菜單xxx頁面，如分類source/categories用於存放分類頁，但分類頁md文件是無需內容的，hexo會自動索引
- themes：當前hexo項目的各類主題存放文件夾，把所需的主題目錄添加到該文件夾中並更改項目_config.yml相應配置即可更換主題
- themes/{themeName}/_config.yml：主題配置文件，主題的各種樣式、配置都可在該文件中更改
- _config.yml：項目配置文件，設置項目的通用配置(主題外的配置，如標題、分頁、搜索、作者、發佈地址等) 由於landscape的排版與樣式不太符合自己的style，所以選擇了next，足夠簡潔，一目瞭然(作為最多人選擇的主題不是沒有原因的)。使用next主題只需將該主題目錄下載存放到項目的themes下並更改/_config.yml的theme配置值為相應主題名。
下載next主題(如果慢的話可以同步到gitee再從gitee下載)：git clone https://github.com/theme-next/hexo-theme-next.git
以next為例，hexo的頁面都是通過_config.yml與/themes/next/_config.yml配置的，明顯的配置如下圖(c:為_config.yml中的配置,tc:themes/next/_config.yml中的配置)：
菜單欄menu配置
hexo菜單欄可以在項目目錄下通過hexo new page {menuName}指令創建，也可直接創建/source/{menuName}/index.md文件,並在themes\\next_config.yml添加menu:{menuName}配置，如一個自定義菜單的局部配置(next/_config.yml)：
<code>menu:
# || 後面是圖標名，可在https://fontawesome.com/icons中查詢所需圖片
home: /index || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
temp: /temp/ || calendar
archives: /archives/ || archive
/<code>
文件與效果圖(菜單的命名都是目錄名，目錄下須有index.md文件)：
需要注意的是在fontawesome中搜到的圖標不一定都有，還需要根據圖標名查詢themes/next/source/lib/font-awesome/css/font-awesome.css下有沒有該圖標樣式，如stack-overflow則在css文件下先搜索下有沒有該樣式，有的話才會顯示fontawesome中對應的圖標，沒有的話會顯示一個矩形。有些圖標fontawesome有但css中沒有的原因是版本不同，目前我在網上搜的最新fontawesome最新的css是4.7.0的，但fontawesome上的一些圖標版本是新的版本才有(如blog)的，所以個人猜測是版本原因導致網站上搜到的一些圖標不可用。仔細點觀察其實可以發現css中的樣式content是與fontawesome上的圖標Unicode是一樣的：
文章創建、添加標籤、分類
文章創建可通過在/source/_posts下創建"文章.md"文件就可，也可通過命令行hexo new {article}來創建。 hexo裡的文章都可通過添加文章頭進行文章歸檔，以下為一篇個人文章頭：
<code>---
title: 聊聊MQ與如何基於Spring Boot RocketMQ搭建一個消息中心
date: 2020-03-09 16:54:18
tags: [RocketMQ, Spring Boot]
categories: [RocketMQ, Spring Boot]
---
/<code>
在文章頭中添加了tags和categories後即可完成標籤與分類，無需額外的操作，前提是source目錄下已存在categories與tags。
個人_config.yml主要更改的配置
比較細的細節覺得前面都講了，請容我偷下懶吧，以下為個人的配置文件主要更改：
<code># Site 站點配置
title: Wilson Blog
subtitle: '一名普通的搬磚工'
description: '一名普通的搬磚工'
keywords:
author: Wilson He
language: zh-CN
timezone: 'Asia/Shanghai'
index_generator:
path: ''
# 每頁只顯示一篇文章
per_page: 1
# 根據創建時間排序，如果文章有設置top值，則先按top由高到低排，目前個人是在索引文章上加了top值設為首頁文章的
order_by: -date
theme: next
# 添加搜索功能，需先安裝搜索插件：npm install hexo-generator-searchdb並將themes的_config.yml中local_search:enable設為true
search:
path: search.xml
field: post
format: html
limit: 10000
# 部署的項目地址，為私有倉庫
deploy:
type: git
repo: https://github.com/Wilson-He/wilson-he.github.io
# repo: https://gitee.com/Wilson-He/Wilson-He/<code>
搜索服務需要安裝插件：npm install hexo-generator-searchdb
個人themes/next/_config.yml主要更改的配置
<code>favicon:
small: /images/favicon-16x16-next.png
# 這裡的/images路徑是themes/next/source下的images
medium: /images/piano-icon.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
footer:
# 不顯示next原有的powered和version footer
powered:
enable: false
version: false
# 首頁信息與菜單顯示樣式，Pisces為網站信息顯示在左側，Mist在頂部，更多的自行嘗試
scheme: Pisces
menu:
home: /index || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
temp: /temp/ || calendar
archives: /archives/ || archive
sidebar:
# 邊欄位置設置
position: left
# 頭像設置
avatar:
url: https://xxx.aliyuncs.com/atavar/xxx.jpg
# 頭像下顯示的社交圖標與鏈接
social:
gitee: https://gitee.com/Wilson-He || gg
github: https://github.com/Wilson-He || github
csdn: https://blog.csdn.net/z28126308 || creative-commons
Email: mailto:[email protected] || envelope
# 獎賞設置，true則每篇文章末尾會新增捐贈按鈕，點擊會顯示收款圖片(如果是直接顯示我肯定會直接enable false的[doge])
reward_settings:
# If true, reward will be displayed in every article by default.
enable: true
animation: false
#comment: Donate comment here.
reward:
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
// 頭部顯示github banner
github_banner:favicon:
small: /images/favicon-16x16-next.png
# 這裡的/images路徑是themes/next/source下的images
medium: /images/piano-icon.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
footer:
# 不顯示next原有的powered和version footer
powered:
enable: false
version: false
# 首頁信息與菜單顯示樣式，Pisces為網站信息顯示在左側，Mist在頂部，更多的自行嘗試
scheme: Pisces
menu:
home: /index || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
temp: /temp/ || calendar
archives: /archives/ || archive
sidebar:
# 邊欄位置設置
position: left
# 頭像設置
avatar:
url: https://xxx.aliyuncs.com/atavar/xxx.jpg
# 頭像下顯示的社交圖標與鏈接
social:
gitee: https://gitee.com/Wilson-He || gg
github: https://github.com/Wilson-He || github
csdn: https://blog.csdn.net/z28126308 || creative-commons
Email: mailto:[email protected] || envelope
# 獎賞設置，true則每篇文章末尾會新增捐贈按鈕，點擊會顯示收款圖片(如果是直接顯示我肯定會直接enable false的[doge])
reward_settings:
# If true, reward will be displayed in every article by default.
enable: true
animation: false
#comment: Donate comment here.
reward:
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
// 頭部顯示github banner
github_banner:
enable: true
permalink: https://github.com/Wilson-He
// 啟用本地搜索
local_search:
enable: true
enable: true
permalink: https://github.com/Wilson-He
// 啟用本地搜索
local_search:
enable: true/<code>
配置完後去看下文章，閱讀體驗已經比預想的好很多。
部署到github/gitee
部署流程十分簡單，安裝hexo git插件後在github/gitee建立倉庫，再在項目目錄命令行部署即可。
安裝hexo git插件：npm install hexo-deployer-git --save
github部署:
- 創建命名為username.github.io的頁面倉庫(小知識：個人開源的項目命名規則都是io.github.projectName，這裡純粹是順序調轉了)
- 在項目目錄命令行執行hexo deploy deploy指令即可部署到頁面倉庫(如果沒配置好git則需要輸入github賬號密碼) 每次有部署時github都會為我們重新部署運行靜態博客，失敗會發送郵件，這一點很方便。博客頁面倉庫配置成功時查看倉庫Settings下的Github Pages會顯示以下圖片內容，訪問該地址即可顯示你的博客頁面(沒事不用來閒逛，目前沒啥內容可給大家看)：
gitee:
- 創建博客發佈倉庫(命名無要求)
- 執行hexo deploy
- 點擊倉庫“服務”->"Gitee Pages"，配置成功後會顯示網站地址， 非會員版gitee部署後要重新更新，有時還會有樣式顯示問題，唯一的優點就是比github快
搭建過程使用到的文檔
hexo官方文檔：https://hexo.io/zh-cn/docs/
next主題官方文檔(很詳細)：https://theme-next.org/docs/getting-started/ ，next主題的所有配置、第三方服務安裝(評論、搜索、統計等)、插件配置等都有詳細的文檔
fontawesome圖標網站：https://fontawesome.com/?from=io
想了解更多功能和配置的可以去看以上官方文檔，畢竟所有的功能都是官方提供的，肯定會有詳細的使用方法，不想慢慢看想直接達到像動圖啊、特定排版啊、什麼之類的可以去百度下，文章還挺多的，不過就next的主題而言看文檔比看文章可能要好不少。附next主題文檔圖：
閱讀更多 Wilson1995 的文章
