前言

建網(wǎng)站本身是一個(gè)很大的工程，涉及前端頁(yè)面的搭建，網(wǎng)站數(shù)據(jù)的存儲(chǔ)，還要購(gòu)置服務(wù)器資源，甚至是后期的維護(hù)，過(guò)程相當(dāng)繁瑣。

不過(guò)如果僅僅是想搭建個(gè)人的網(wǎng)站，寫(xiě)寫(xiě)博客，想要美觀，又不想操心太多和寫(xiě)博客無(wú)關(guān)的事情。那么，Hexo + Kaze + Gitee Pages 的方式就很適合你。

本文就講下如何借助這三樣免費(fèi)的技術(shù)或服務(wù)，來(lái)搭建一個(gè)可訪問(wèn)的靜態(tài)博客網(wǎng)站。

Hexo 簡(jiǎn)介

Hexo 是什么？

Hexo 是一個(gè)快速，簡(jiǎn)單且功能強(qiáng)大的博客框架。如果你用 Markdown 寫(xiě)博客，Hexo 可以在幾秒內(nèi)生成帶有精美主題的靜態(tài)文件。

Hexo 安裝

前置要求

• Node.js（版本 10.13 以上，建議使用 12.0 以上版本）
• Git

安裝 Git

• Windows：下載并安裝 git。
• Mac：使用 Homebrew 安裝。
• Linux（Ubuntu，Debian）： sudo apt-get install git-core
• Linux（Fedora，Red Hat，CentOS）： sudo yum install git-core

安裝 Node.js

Node.js 為大多數(shù)平臺(tái)提供了 官方安裝程序。

替代安裝方法：

• Windows：使用 nvs 安裝它。
• Mac：使用 Homebrew 安裝。
• Linux（基于DEB / RPM）：與 NodeSource 一起安裝。
• 其他：通過(guò)相應(yīng)的軟件包管理器進(jìn)行安裝。請(qǐng)參閱 Node.js 提供的指南。

安裝 Hexo

用 npm 安裝 Hexo。

npm install -g hexo-cli

使用以下指令查看是否安裝成功。

hexo version

如果你想卸載 Hexo，使用以下指令：

npm uninstall -g hexo-cli 

運(yùn)行 hexo

安裝后，你可以通過(guò) hexo <command> 運(yùn)行 Hexo。比如通過(guò) hexo help 指令來(lái)獲取使用幫助。

hexo help

幫助里提到 hexo init 命令可以創(chuàng)建一個(gè)新的 Hexo 文件夾，這個(gè)文件夾其實(shí)就是利用 Hexo 生成的站點(diǎn)信息了。接下來(lái)講下怎么建站。

Hexo 建站

初始化操作

使用 hexo init <folder> 指令就可以在指定文件夾下建立站點(diǎn)信息，我一般用域名做名稱，如下：

hexo init java4u.cn

站點(diǎn)初始化中：

站點(diǎn)初始化完成，會(huì)生成指定的文件夾：

目錄結(jié)構(gòu)

進(jìn)入該站點(diǎn)，我們看下目錄結(jié)構(gòu)，如下：

這些文件有著各自的職責(zé)：

• _config.landscape.yml：自定義的主題配置文件，此處的 landscape 是默認(rèn)主題。配置其他主題可以參考這種方式。
• _config.yml：站點(diǎn)全局的配置文件。
• node_modules：node 模塊文件夾。包含可執(zhí)行文件和依賴的資源。
• package-lock.json：node_modules 文件中所有模塊的版本信息，模塊來(lái)源。
• package.json：Hexo 框架的基本參數(shù)信息以及它所依賴的插件。
• scaffolds：scaffolds 原意是腳手架，這里可以理解為模板文件夾。當(dāng)你創(chuàng)建新的文章時(shí)，Hexo 會(huì)根據(jù)該文件夾下的對(duì)應(yīng)文件進(jìn)行初始化構(gòu)建。
• source：資源文件夾。這里是你放自己資源比如博文和圖片的地方。 _posts 文件夾下的 Markdown 和 HTML 文件會(huì)被解析并放到 public 文件夾下。其他文件或文件夾，如果開(kāi)頭命名不是 _ (下劃線)，也都會(huì)被拷貝過(guò)去。
• themes：主題文件夾。Hexo 會(huì)根據(jù)主題來(lái)生成靜態(tài)頁(yè)面。

基于這樣的結(jié)構(gòu)，Hexo 就具備了生成靜態(tài)網(wǎng)站的能力。

本地啟動(dòng)

我們先本地啟動(dòng)，看下實(shí)際效果。輸入以下命令：

hexo server

Hexo 會(huì)啟動(dòng)服務(wù)，將默認(rèn)生成的網(wǎng)站運(yùn)行在本機(jī)的 4000 端口上，可以直接訪問(wèn) http://localhost:4000 就能看到網(wǎng)站首頁(yè)，它基于默認(rèn)主題生成，同時(shí)有一篇默認(rèn)文章。

這個(gè)頁(yè)面只是官方提供的一個(gè)樣例，看到它就意味著你本地環(huán)境跑通了。我們可以通過(guò)修改配置的方式，對(duì)頁(yè)面相關(guān)元素做調(diào)整。

核心配置

以下是我們需要了解或者修改的配置信息。

package.json

這個(gè)文件列出了 Hexo 的基本參數(shù)信息以及它所依賴的插件?？梢钥吹剑?a target="_blank">EJS，Stylus 和 Markdown 渲染器都是默認(rèn)安裝的。

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^5.0.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^3.0.0",
    "hexo-renderer-stylus": "^2.0.0",
    "hexo-server": "^2.0.0",
    "hexo-theme-landscape": "^0.0.3"
  }
}

如果后邊要切換主題，記得把最后一個(gè)默認(rèn)的主題依賴刪除掉。

_config.yml

可設(shè)置網(wǎng)站、網(wǎng)址、目錄、文章、分類&標(biāo)簽、日期/時(shí)間格式、分頁(yè)和擴(kuò)展等信息。

網(wǎng)站

URL

目錄

文章

分類 & 標(biāo)簽

日期/時(shí)間格式

Hexo 使用 Moment.js 來(lái)解析和顯示時(shí)間。

分頁(yè)

擴(kuò)展

【主題】

【部署】

配置如下：

deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch]
  message: [message]

常用指令

創(chuàng)建文章

使用以下指令：

hexo new "test"

或者簡(jiǎn)寫(xiě)：

hexo n "test"

運(yùn)行服務(wù)器

輸入以下命令以啟動(dòng)服務(wù)器，您的網(wǎng)站會(huì)在 http://localhost:4000 下啟動(dòng)。在服務(wù)器啟動(dòng)期間，Hexo 會(huì)監(jiān)視文件變動(dòng)并自動(dòng)更新，您無(wú)須重啟服務(wù)器。

hexo server

或者簡(jiǎn)寫(xiě)：

hexo s

生成靜態(tài)文件

hexo generate

或者簡(jiǎn)寫(xiě)

hexo g

監(jiān)視文件變動(dòng)立即重新生成。該操作會(huì)阻塞命令。

hexo g --watch

生成完畢后自動(dòng)部署網(wǎng)站。

hexo generate --deploy

部署

Hexo 提供了快速方便的一鍵部署功能，讓你只需一條命令就能將網(wǎng)站部署到服務(wù)器上。

hexo deploy

或者簡(jiǎn)寫(xiě)為：

hexo d

Hexo 主題

為什么選擇 Kaze

Hexo 默認(rèn)主題為 landscape，但我覺(jué)得不夠美觀，這里推薦 kaze ,它有以下特性：

• 響應(yīng)式設(shè)計(jì)，適配桌面端、平板、手機(jī)等各種設(shè)備

• 前端性能優(yōu)化，加載快速，眨眼之間即可加載完成

  • 圖片懶加載，應(yīng)用懶加載技術(shù)加快頁(yè)面的生成速度
  • 資源壓縮，提升本地資源請(qǐng)求速度
  • 精簡(jiǎn)設(shè)計(jì)，不包含 Jquery 等額外庫(kù)

• 支持側(cè)邊欄小組件，例如最近文章，作者卡片

• 暗黑模式，享受黑夜的魅力

• 代碼高亮，支持 prismjs

• 公式渲染，支持 katex 和 mathjax

• 評(píng)論系統(tǒng)，集成 valine、gitalk 和 livere

• 訪問(wèn)量統(tǒng)計(jì)和谷歌分析支持

安裝 Kaze

在 your site/themes 下輸入

cd themes
git clone https://github.com/theme-kaze/hexo-theme-Kaze.git

安裝成功后，會(huì)生出目錄：hexo-theme-Kaze。

修改站點(diǎn)配置文件 _config.yml 下的主題值為：hexo-theme-Kaze。

用 hexo server 啟動(dòng) Hexo 服務(wù)看下效果。

會(huì)看到已經(jīng)生成了默認(rèn)的主題，只是很多東西都沒(méi)有，需要改造一下。

主題配置

可在該主題目錄下的 _config.yml 文件里配置。

主題顏色

在 color 中進(jìn)行配置，以下是默認(rèn)值。

color:
  text-color: "#3c4858"
  text-strong-color: "#2f3d4e"
  text-light-color: "#909faf"
  divider-color: "#e6e8ee"
  title-color: "#475b6d"
  link-color: "#3273dc"
  link-hover-color: "#6596e5"
  info-text-color: "#909faf"
  widget-background-color: "#fff"
  body-background-color: "#f2f5f8"
  border-color: "#e1e4e9"
  pre-color: "#2d2d2d"
  code-color: "#50687c"
  code-background-color: "#e9eaf0"

字號(hào)與字體

在 font 中進(jìn)行配置，以下是默認(rèn)值。

font:
  font-size: 16px # global font-size
  font-family: '-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif' # global font-family

站點(diǎn)訪問(wèn)量統(tǒng)計(jì)

訪問(wèn)量統(tǒng)計(jì)目前僅支持不蒜子，默認(rèn)關(guān)閉，可統(tǒng)計(jì)站點(diǎn)總訪問(wèn)量和總訪客數(shù)。

footer:
  #------------------------
  # pv / uv statistics config
  #------------------------
  statistics:
    enable: false
    type: busuanzi # now version only supports busuanzi
    pv:
      enable: true
      style: 本站總訪問(wèn)量{}次 # the style will be shown as $1{pv}$2
    uv:
      enable: true
      style: 本站總訪客數(shù){}次 # the style will be shown as $1{uv}$2

數(shù)據(jù)分析

analytics:
  enable: false
  type: google # google
  google:
    id:

enable 開(kāi)啟分析支持（默認(rèn)關(guān)閉）

type` 目前僅支持 `google

google.id 有關(guān)谷歌分析的具體使用說(shuō)明和 id 使用可以參考谷歌文檔

首頁(yè)

文章頭圖

在文章 Front-matter 中 banner_img 可以設(shè)置首頁(yè)頭圖

小組件

widgets:
  showWidgetsMobiles: "none"

showWidgetsMobiles : 在窄屏幕上是否顯示小組件，none 關(guān)閉（默認(rèn)），flex 開(kāi)啟

關(guān)于

關(guān)于頁(yè)面需要自行創(chuàng)建，在站點(diǎn) source 中新建 about 文件夾并在文件夾內(nèi)創(chuàng)建 index.md，該文件至少需要包含

# at ${yoursite}/about/index.md
---
title: 關(guān)于
layout: about
---

社交鏈接

在 about 下的 social_links中進(jìn)行配置，主題圖標(biāo)依賴于 iconfont，內(nèi)置了一部分社交圖標(biāo)，你可以自定義其他icon文件或者解決方案來(lái)添加自定義圖標(biāo)。

about:
  description: description
  social_links:
    - { icon: icon-github, link:  https://xxx}
    # - { icon: icon, link: your link }

友鏈

友鏈格式按如下填寫(xiě)即可生成友鏈頁(yè)面

links:
  example-name-1: 
    url: https://example.com
    avatar: https://example.com/avatar.jpg
  example-name-2: 
    url: https://example.com
    avatar: https://example.com/avatar.jpg

文章頁(yè)

搜索功能

search:
  enable: true
  path: search.json
  field: posts
  searchContent: true

• enable 開(kāi)啟搜索功能（默認(rèn)開(kāi)啟）
• path 文件名稱（暫無(wú)用處）
• field 需要搜索的范圍，支持 posts | pages | all
• searchContent 搜索文件是否包含正文內(nèi)容（不建議開(kāi)啟，包含所有文章內(nèi)容這樣會(huì)使得搜索文件異常巨大）替代方案是搜索分類標(biāo)簽或使用algolia等第三方搜索服務(wù)（Todo）

目錄

主題目錄通過(guò)Hexo原生函數(shù)生成，具體可參見(jiàn) 文檔

toc:
  showListNumber: false
  maxDepth: 6
  minDepth: 1

showListNumber 是否生成編號(hào)

maxDepth TOC最大深度

minDepth TOC最小深度

代碼高亮

參見(jiàn)代碼 高亮文檔

數(shù)學(xué)公式

主題支持 mathjax 和 katex 兩種渲染引擎，具體參見(jiàn) 相關(guān)文檔

copyright

copyright:
  enable: true
  writer: # if writer is empty we will use config.author as writer
  declare: 本博客所有文章除特別聲明外，均采用<a target="_blank" rel="noopener" >CC BY-NC-SA 4.0 協(xié)議</a>。轉(zhuǎn)載請(qǐng)注明出處！
  style: warning

enable 開(kāi)起版權(quán)說(shuō)明（默認(rèn)開(kāi)啟）

writer` 作者id，如果不填則會(huì)使用主題配置`author`或站點(diǎn)配置`author

declare 版權(quán)聲明具體內(nèi)容，支持 html 語(yǔ)句

style 聲明內(nèi)容樣式，與 note 樣式相同

版權(quán)內(nèi)容有三部分：作者、文章鏈接、版權(quán)聲明

作者使用 writer 參數(shù)，文章鏈接基于站點(diǎn)配置文件中url參數(shù)生成，版權(quán)聲明使用 declare 參數(shù)

Front-matter

banner_img

設(shè)置文章與首頁(yè)頭圖

banner_img_set

在圖片加載時(shí)預(yù)先加載的圖片，可以設(shè)置為 loading 圖或縮略圖等

excerpt

為文章設(shè)置在首頁(yè)顯示的簡(jiǎn)介，還可以通過(guò) `` 來(lái)控制顯示

評(píng)論

支持 valine，gitalk 和 livere

具體設(shè)置可參考主題配置文檔說(shuō)明和相關(guān)評(píng)論插件文檔

字?jǐn)?shù)統(tǒng)計(jì)

主題集成 hexo-wordcount 插件，在主題配置文件中設(shè)置

wordcount:
  enable: true

開(kāi)啟（默認(rèn)開(kāi)啟）

圖片畫(huà)廊

圖片畫(huà)廊功能基于 fslightbox，在主題配置文件中設(shè)置

fslightbox:
  enable: true

開(kāi)啟（默認(rèn)開(kāi)啟）

標(biāo)簽插件

主題集成了一些標(biāo)簽方便書(shū)寫(xiě)

note

在 markdown 文件中如下書(shū)寫(xiě)即可

{% note style %}
...markdown content
{% endnote %}

有五種樣式可以選擇，primary，success，info，warning，danger

備案信息

您可以在主題配置文件內(nèi)增加您的備案信息。

footer:
  #------------------------
  # 備案配置
  # 請(qǐng)將公安備案的縮略圖置于 ${yoursite}/img/beian.png
  RecordInfo: "" # '某ICP備xxx號(hào)'
  govRecordInfo: "" # '某公網(wǎng)安備xxx號(hào)'
  govRecordUrl: "" # 公網(wǎng)安備案信息地址
  #------------------------

站點(diǎn)托管

為什么選擇 Gitee Pages

GitHub 和 Gitee 都提供免費(fèi)的靜態(tài)網(wǎng)頁(yè)托管服務(wù)。我們可以使用 GitHub Pages 或 Gitee Pages 托管博客、項(xiàng)目官網(wǎng)等靜態(tài)網(wǎng)頁(yè)，這樣就省去了購(gòu)買服務(wù)器的錢(qián)，也不需要耗費(fèi)太多精力維護(hù)。

GitHub Pages 使用很廣泛，我之前也用過(guò)，不過(guò)訪問(wèn)不夠穩(wěn)定，會(huì)影響頁(yè)面加載速度。Gitee 是國(guó)內(nèi)版的 GitHub，訪問(wèn)速度優(yōu)秀，并且國(guó)內(nèi)發(fā)展勢(shì)頭不錯(cuò)，因此我選取 Gitee Pages 來(lái)托管我的網(wǎng)站。

建立倉(cāng)庫(kù)

申請(qǐng)一個(gè) Gitee 賬號(hào)，創(chuàng)建一個(gè)新的倉(cāng)庫(kù)，倉(cāng)庫(kù)名盡量和賬號(hào)名一致，這樣可以避免一些因?yàn)槁窂揭l(fā)的問(wèn)題。

然后在倉(cāng)庫(kù)首頁(yè)服務(wù)一欄開(kāi)啟 Gitee Pages 服務(wù)。

開(kāi)啟后，你就擁有了專屬的二級(jí)域名網(wǎng)址。

注意：倉(cāng)庫(kù)內(nèi)容有變化，需要手動(dòng)觸發(fā)更新，頁(yè)面才能真正生效。

連接倉(cāng)庫(kù)

1. 安裝 hexo-deployer-git。

npm install hexo-deployer-git --save

1. 修改配置。

deploy:
  type: git
  repo: git@gitee.com:java4u/java4u.git

注意上面的 repo 地址并不是倉(cāng)庫(kù)的地址，而是你下載/克隆項(xiàng)目時(shí)彈出的那個(gè)地址，type 如果是 git 就選擇 SSH。

1. 生成/添加 SSH 公鑰

Gitee 、GitHub 提供了基于 SSH 協(xié)議的 Git 服務(wù)，在使用 SSH 協(xié)議訪問(wèn)倉(cāng)庫(kù)倉(cāng)庫(kù)之前，需要先配置好賬戶/倉(cāng)庫(kù)的 SSH 公鑰。

先看下自己有沒(méi)有配置過(guò)用戶名和郵箱：

git config --global user.name 
git config --global user.email

如果沒(méi)有就做下配置：

# 設(shè)置郵箱
git config --global user.email *********@qq.com 

# 設(shè)置用戶名
git config --global user.name '****'

然后本地生成 SSH 公鑰，郵箱為剛配置好的賬戶：

ssh-keygen -t rsa -C yong__1994@163.com

生成后可查看 SSH 公鑰：

cat ~/.ssh/id_rsa.pub

復(fù)制公鑰去 Gitee 粘貼，添加。

測(cè)試是否連接成功：

ssh -T git@gitee.com

上傳倉(cāng)庫(kù)

執(zhí)行部署命令，即可將本地資源上傳遠(yuǎn)程倉(cāng)庫(kù)。

hexo d

手動(dòng)更新

遠(yuǎn)程倉(cāng)庫(kù)雖然可以看到提交記錄，但靜態(tài)網(wǎng)站不會(huì)感知到實(shí)時(shí)變更，需要去 Gitee Pages 服務(wù)頁(yè)面做下更新。

稍等片刻，訪問(wèn) https://java4u.gitee.io/ 即可看到 Hexo 結(jié)合 kaze 主題搭建的靜態(tài)網(wǎng)站。