分享一下本身經過hexo+gitee/github搭建我的博客的流程

選擇該方式搭建的理由和要作的準備

每一個項目在開始以前，都須要先清楚項目的目的、主要的需求和核心點在哪。我在選擇搭建的方式以前，根據我的情況確認了博客的搭建須要知足如下需求：

1. 無需自備服務器，靜態網站也不要緊
2. 不錯的分類歸檔
3. 方便文章追溯
4. 簡潔的排版
5. 不用瞭解或使用太多前端知識(排版是個人痛)

根據自行百度瞭解，在github/gitee上搭建的Pages博客最起碼是知足第1點要求的，選用哪一種方式在github上搭建便打算先簡單使用下搭建的技術瞭解後再作確認。下圖爲gitee支持搭建靜態網站的技術：

第一個選用的是hexo(慶幸不用選第二個了)，理由是文章多，有足夠的參考，官方網站也提供中文文檔。在開始以前須要作如下的準備：

• nodejs安裝(百度官網下載安裝便可)
• github/gitee帳號
• git安裝

雖然gitee/github均可以部署，但仍是要提下二者之間的細微區別：

• gitee是國內站點，網絡穩定高速，github訪問有時不穩定
• 站點項目更新部署到github/gitee後，github會自動從新部署更新，失敗後還會給你發郵件，gitee則須要到respository裏手動更新(除非你升級會員)

  

在部署到gitee/github以前能夠先在本地調試樣式添加文章，調好了後再部署到github上。

搭建hexo本地環境

1. 確認nodejs已安裝：node -v
2. 安裝hexo:npm install -g hexo
3. 環境初始化：hexo init 目錄名(目錄不存在則自動建立),出現Start blogging with Hexo!則完成
4. 進入初始化的項目目錄後運行：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 github.com/theme-next/…

以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)：

menu:
  # || 後面是圖標名，可在https://fontawesome.com/icons中查詢所需圖片
  home: /index || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  temp: /temp/ || calendar
  archives: /archives/ || archive
複製代碼

文件與效果圖：

須要注意的是在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裏的文章均可經過添加文章頭進行文章歸檔，如下爲一篇我的文章頭：

---
title: 聊聊MQ與如何基於Spring Boot RocketMQ搭建一個消息中心
date: 2020-03-09 16:54:18
tags: [RocketMQ, Spring Boot]
categories: [RocketMQ, Spring Boot]
---
複製代碼

在文章頭中添加了tags和categories後便可完成標籤與分類，無需額外的操做，前提是source目錄下已存在categories與tags。

我的_config.yml主要更改的配置

比較細的細節以爲前面都講了，請容我偷下懶吧，如下爲我的的配置文件主要更改：

# 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
複製代碼

我的themes/next/_config.yml主要更改的配置

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
# 頭像下顯示的社交圖標與連接，||後爲fontawesome上的圖標名
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:845023508@qq.com || 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
複製代碼

配置完後去看下文章，這閱讀體驗已經比預想的好不少。

部署到github/gitee

部署流程十分簡單，安裝hexo git插件後在github/gitee創建倉庫，再在項目目錄命令行部署便可。

安裝hexo git插件：npm install hexo-deployer-git --save github:

1. 建立命名爲username.github.io的頁面倉庫(小知識：我的開源的項目命名規則都是io.github.projectName，這裏純粹是順序調轉了)
2. 在項目目錄命令行執行hexo deploy deploy指令便可部署到頁面倉庫(若是沒配置好git則須要輸入github帳號密碼) 每次有部署時github都會爲咱們從新部署運行靜態博客，失敗會發送郵件，這一點很方便。博客頁面倉庫配置成功時查看倉庫Settings下的Github Pages會顯示如下圖片內容，訪問該地址便可顯示你的博客頁面(沒事不用來閒逛，目前沒啥內容可給你們看)：

   

gitee:

1. 建立博客發佈倉庫(命名無要求)
2. 執行hexo deploy
3. 點擊倉庫「服務」->"Gitee Pages"，配置成功後會顯示網站地址， 非會員版gitee部署後要從新更新，有時還會有樣式顯示問題，惟一的優勢就是比github快

搭建過程使用到的文檔

1. hexo官方文檔：hexo.io/zh-cn/docs/
2. next主題官方文檔(很詳細)：theme-next.org/docs/gettin… ，next主題的全部設置、第三方服務(評論、搜索、統計等)、插件都有詳細的文檔
3. fontawesome圖標網站：fontawesome.com/?from=io