前言
建網站本身是一個很大的工程，涉及前端頁面的搭建，網站數據的存儲，還要購置服務器資源，甚至是後期的維護，過程相當繁瑣。
不過如果僅僅是想搭建個人的網站，寫寫博客，想要美觀，又不想操心太多和寫博客無關的事情。那麼，Hexo + Kaze + Gitee Pages 的方式就很適合你。
本文就講下如何藉助這三樣免費的技術或服務，來搭建一個可訪問的靜態博客網站。
Hexo 簡介
Hexo 是什麼？
Hexo 是一個快速，簡單且功能強大的博客框架。如果你用 Markdown 寫博客，Hexo 可以在幾秒內生成帶有精美主題的靜態文件。
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 爲大多數平臺提供了 官方安裝程序。
替代安裝方法：
- Windows：使用 nvs 安裝它。
- Mac：使用 Homebrew 安裝。
- Linux（基於DEB / RPM）：與 NodeSource 一起安裝。
- 其他：通過相應的軟件包管理器進行安裝。請參閱 Node.js 提供的指南。
安裝 Hexo
用 npm 安裝 Hexo。
npm install -g hexo-cli
使用以下指令查看是否安裝成功。
hexo version
如果你想卸載 Hexo，使用以下指令：
npm uninstall -g hexo-cli
運行 hexo
安裝後，你可以通過 hexo <command> 運行 Hexo。比如通過 hexo help 指令來獲取使用幫助。
hexo help
幫助裏提到 hexo init 命令可以創建一個新的 Hexo 文件夾，這個文件夾其實就是利用 Hexo 生成的站點信息了。接下來講下怎麼建站。
Hexo 建站
初始化操作
使用 hexo init <folder> 指令就可以在指定文件夾下建立站點信息，我一般用域名做名稱，如下：
hexo init java4u.cn
站點初始化中：
站點初始化完成，會生成指定的文件夾：
目錄結構
進入該站點，我們看下目錄結構，如下：
這些文件有着各自的職責：
- _config.landscape.yml：自定義的主題配置文件，此處的 landscape 是默認主題。配置其他主題可以參考這種方式。
- _config.yml：站點全局的配置文件。
- node_modules：node 模塊文件夾。包含可執行文件和依賴的資源。
- package-lock.json：node_modules 文件中所有模塊的版本信息，模塊來源。
- package.json：Hexo 框架的基本參數信息以及它所依賴的插件。
- scaffolds：scaffolds 原意是腳手架，這裏可以理解爲模板文件夾。當你創建新的文章時，Hexo 會根據該文件夾下的對應文件進行初始化構建。
- source：資源文件夾。這裏是你放自己資源比如博文和圖片的地方。
_posts文件夾下的 Markdown 和 HTML 文件會被解析並放到public文件夾下。其他文件或文件夾，如果開頭命名不是_(下劃線)，也都會被拷貝過去。 - themes：主題文件夾。Hexo 會根據主題來生成靜態頁面。
基於這樣的結構，Hexo 就具備了生成靜態網站的能力。
本地啓動
我們先本地啓動，看下實際效果。輸入以下命令：
hexo server
Hexo 會啓動服務，將默認生成的網站運行在本機的 4000 端口上，可以直接訪問 http://localhost:4000 就能看到網站首頁，它基於默認主題生成，同時有一篇默認文章。
這個頁面只是官方提供的一個樣例，看到它就意味着你本地環境跑通了。我們可以通過修改配置的方式，對頁面相關元素做調整。
核心配置
以下是我們需要了解或者修改的配置信息。
package.json
這個文件列出了 Hexo 的基本參數信息以及它所依賴的插件。可以看到，EJS，Stylus 和 Markdown 渲染器都是默認安裝的。
{
"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"
}
}
如果後邊要切換主題，記得把最後一個默認的主題依賴刪除掉。
_config.yml
可設置網站、網址、目錄、文章、分類&標籤、日期/時間格式、分頁和擴展等信息。
網站
| 參數 | 描述 |
|---|---|
title |
網站標題 |
subtitle |
網站副標題 |
description |
網站描述，用於 SEO |
keywords |
網站的關鍵詞，支持多個關鍵詞。 |
author |
文章作者。 |
language |
網站使用的語言。對於簡體中文用戶來說，使用不同的主題可能需要設置成不同的值，請參考你的主題的文檔自行設置，常見的有 zh-Hans和 zh-CN。 |
timezone |
網站時區。Hexo 默認使用您電腦的時區。請參考 時區列表 進行設置，如 America/New_York, Japan, 和 UTC 。一般的，對於中國大陸地區可以使用 Asia/Shanghai。 |
URL
| 參數 | 描述 | 默認值 |
|---|---|---|
url |
網址, must starts with http:// or https://
|
http://example.com |
root |
網站根目錄，如果放子目錄，設置 /blog/
|
/ |
permalink |
文章的 永久鏈接 格式 | :year/:month/:day/:title/ |
permalink_defaults |
永久鏈接中各部分的默認值 | |
pretty_urls |
改寫 permalink 的值來美化 URL |
|
pretty_urls.trailing_index |
是否在永久鏈接中保留尾部的 index.html，設置爲 false 時去除 |
true |
pretty_urls.trailing_html |
是否在永久鏈接中保留尾部的 .html, 設置爲 false 時去除 (對尾部的 index.html無效) |
true |
目錄
| 參數 | 描述 | 默認值 |
|---|---|---|
source_dir |
資源文件夾，這個文件夾用來存放內容。 | source |
public_dir |
公共文件夾，這個文件夾用於存放生成的站點文件。 | public |
tag_dir |
標籤文件夾 | tags |
archive_dir |
歸檔文件夾 | archives |
category_dir |
分類文件夾 | categories |
code_dir |
Include code 文件夾，source_dir 下的子目錄 |
downloads/code |
i18n_dir |
國際化（i18n）文件夾 | :lang |
skip_render |
跳過指定文件的渲染。匹配到的文件將會被不做改動地複製到 public 目錄中。 |
文章
| 參數 | 描述 | 默認值 |
|---|---|---|
new_post_name |
新文章的文件名稱 | :title.md |
default_layout |
預設佈局 | post |
auto_spacing |
在中文和英文之間加入空格 | false |
titlecase |
把標題轉換爲 title case | false |
external_link |
在新標籤中打開鏈接 | true |
external_link.enable |
在新標籤中打開鏈接 | true |
external_link.field |
對整個網站（site）生效或僅對文章（post）生效 |
site |
external_link.exclude |
需要排除的域名。主域名和子域名如 www 需分別配置 |
[] |
filename_case |
把文件名稱轉換爲 (1) 小寫或 (2) 大寫 | 0 |
render_drafts |
顯示草稿 | false |
post_asset_folder |
啓動 Asset 文件夾 | false |
relative_link |
把鏈接改爲與根目錄的相對地址，建議使用絕對地址。 | false |
future |
顯示未來的文章 | true |
highlight |
代碼塊的設置, see Highlight.js section for usage guide | |
prismjs |
代碼塊的設置, see PrismJS section for usage guide |
分類 & 標籤
| 參數 | 描述 | 默認值 |
|---|---|---|
default_category |
默認分類 | uncategorized |
category_map |
分類別名 | |
tag_map |
標籤別名 |
日期/時間格式
Hexo 使用 Moment.js 來解析和顯示時間。
| 參數 | 描述 | 默認值 |
|---|---|---|
date_format |
日期格式 | YYYY-MM-DD |
time_format |
時間格式 | HH:mm:ss |
updated_option |
當 Front Matter 中沒有指定 updated 時 updated 的取值，支持 mtime(文件最後修改時間)，date(使用 date 的值)，empty(不指定) |
mtime |
分頁
| 參數 | 描述 | 默認值 |
|---|---|---|
per_page |
每頁顯示的文章量 (0 = 關閉分頁功能) | 10 |
pagination_dir |
分頁目錄 | page |
擴展
【主題】
| 參數 | 描述 | 默認值 |
|---|---|---|
theme |
當前主題名稱。值爲false時禁用主題 |
landscape |
theme_config |
主題的配置文件。在這裏放置的配置會覆蓋主題目錄下的 _config.yml 中的配置 |
無初始配置 |
deploy |
部署部分的設置 | |
meta_generator |
Meta generator 標籤。 值爲 false 時 Hexo 不會在頭部插入該標籤 |
true |
【部署】
配置如下：
deploy:
type: git
repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
branch: [branch]
message: [message]
| 參數 | 描述 | 默認 |
|---|---|---|
repo |
庫（Repository）地址 | |
branch |
分支名稱 |
gh-pages (GitHub) coding-pages (Coding.net) master (others) |
message |
自定義提交信息 |
Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}) |
token |
Optional token value to authenticate with the repo. Prefix with $ to read token from environment variable |
常用指令
創建文章
使用以下指令：
hexo new "test"
或者簡寫：
hexo n "test"
運行服務器
輸入以下命令以啓動服務器，您的網站會在 http://localhost:4000 下啓動。在服務器啓動期間，Hexo 會監視文件變動並自動更新，您無須重啓服務器。
hexo server
或者簡寫：
hexo s
生成靜態文件
hexo generate
或者簡寫
hexo g
監視文件變動立即重新生成。該操作會阻塞命令。
hexo g --watch
生成完畢後自動部署網站。
hexo generate --deploy
部署
Hexo 提供了快速方便的一鍵部署功能，讓你只需一條命令就能將網站部署到服務器上。
hexo deploy
或者簡寫爲：
hexo d
Hexo 主題
爲什麼選擇 Kaze
Hexo 默認主題爲 landscape，但我覺得不夠美觀，這裏推薦 kaze ,它有以下特性：
響應式設計，適配桌面端、平板、手機等各種設備
-
前端性能優化，加載快速，眨眼之間即可加載完成
- 圖片懶加載，應用懶加載技術加快頁面的生成速度
- 資源壓縮，提升本地資源請求速度
- 精簡設計，不包含 Jquery 等額外庫
支持側邊欄小組件，例如最近文章，作者卡片
暗黑模式，享受黑夜的魅力
代碼高亮，支持 prismjs
公式渲染，支持 katex 和 mathjax
評論系統，集成 valine、gitalk 和 livere
訪問量統計和谷歌分析支持
安裝 Kaze
在 your site/themes 下輸入
cd themes
git clone https://github.com/theme-kaze/hexo-theme-Kaze.git
安裝成功後，會生出目錄：hexo-theme-Kaze。
修改站點配置文件 _config.yml 下的主題值爲：hexo-theme-Kaze。
用 hexo server 啓動 Hexo 服務看下效果。
會看到已經生成了默認的主題，只是很多東西都沒有，需要改造一下。
主題配置
可在該主題目錄下的 _config.yml 文件裏配置。
主題顏色
在 color 中進行配置，以下是默認值。
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"
字號與字體
在 font 中進行配置，以下是默認值。
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
站點訪問量統計
訪問量統計目前僅支持不蒜子，默認關閉，可統計站點總訪問量和總訪客數。
footer:
#------------------------
# pv / uv statistics config
#------------------------
statistics:
enable: false
type: busuanzi # now version only supports busuanzi
pv:
enable: true
style: 本站總訪問量{}次 # the style will be shown as $1{pv}$2
uv:
enable: true
style: 本站總訪客數{}次 # the style will be shown as $1{uv}$2
數據分析
analytics:
enable: false
type: google # google
google:
id:
enable 開啓分析支持（默認關閉）
type` 目前僅支持 `google
google.id 有關谷歌分析的具體使用說明和 id 使用可以參考谷歌文檔
首頁
文章頭圖
在文章 Front-matter 中 banner_img 可以設置首頁頭圖
小組件
widgets:
showWidgetsMobiles: "none"
showWidgetsMobiles : 在窄屏幕上是否顯示小組件，none 關閉（默認），flex 開啓
關於
關於頁面需要自行創建，在站點 source 中新建 about 文件夾並在文件夾內創建 index.md，該文件至少需要包含
# at ${yoursite}/about/index.md
---
title: 關於
layout: about
---
社交鏈接
在 about 下的 social_links中進行配置，主題圖標依賴於 iconfont，內置了一部分社交圖標，你可以自定義其他icon文件或者解決方案來添加自定義圖標。
about:
description: description
social_links:
- { icon: icon-github, link: https://xxx}
# - { icon: icon, link: your link }
友鏈
友鏈格式按如下填寫即可生成友鏈頁面
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
文章頁
搜索功能
search:
enable: true
path: search.json
field: posts
searchContent: true
-
enable開啓搜索功能（默認開啓） -
path文件名稱（暫無用處） -
field需要搜索的範圍，支持 posts | pages | all -
searchContent搜索文件是否包含正文內容（不建議開啓，包含所有文章內容這樣會使得搜索文件異常巨大）替代方案是搜索分類標籤或使用algolia等第三方搜索服務（Todo）
目錄
主題目錄通過Hexo原生函數生成，具體可參見 文檔
toc:
showListNumber: false
maxDepth: 6
minDepth: 1
showListNumber 是否生成編號
maxDepth TOC最大深度
minDepth TOC最小深度
代碼高亮
參見代碼 高亮文檔
數學公式
主題支持 mathjax 和 katex 兩種渲染引擎，具體參見 相關文檔
copyright
copyright:
enable: true
writer: # if writer is empty we will use config.author as writer
declare: 本博客所有文章除特別聲明外，均採用<a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">CC BY-NC-SA 4.0 協議</a>。轉載請註明出處！
style: warning
enable 開起版權說明（默認開啓）
writer` 作者id，如果不填則會使用主題配置`author`或站點配置`author
declare 版權聲明具體內容，支持 html 語句
style 聲明內容樣式，與 note 樣式相同
版權內容有三部分：作者、文章鏈接、版權聲明
作者使用 writer 參數，文章鏈接基於站點配置文件中url參數生成，版權聲明使用 declare 參數
Front-matter
banner_img
設置文章與首頁頭圖
banner_img_set
在圖片加載時預先加載的圖片，可以設置爲 loading 圖或縮略圖等
excerpt
爲文章設置在首頁顯示的簡介，還可以通過 `` 來控制顯示
評論
支持 valine，gitalk 和 livere
具體設置可參考主題配置文檔說明和相關評論插件文檔
字數統計
主題集成 hexo-wordcount 插件，在主題配置文件中設置
wordcount:
enable: true
開啓（默認開啓）
圖片畫廊
圖片畫廊功能基於 fslightbox，在主題配置文件中設置
fslightbox:
enable: true
開啓（默認開啓）
標籤插件
主題集成了一些標籤方便書寫
note
在 markdown 文件中如下書寫即可
{% note style %}
...markdown content
{% endnote %}
有五種樣式可以選擇，primary，success，info，warning，danger
備案信息
您可以在主題配置文件內增加您的備案信息。
footer:
#------------------------
# 備案配置
# 請將公安備案的縮略圖置於 ${yoursite}/img/beian.png
RecordInfo: "" # '某ICP備xxx號'
govRecordInfo: "" # '某公網安備xxx號'
govRecordUrl: "" # 公網安備案信息地址
#------------------------
站點託管
爲什麼選擇 Gitee Pages
GitHub 和 Gitee 都提供免費的靜態網頁託管服務。我們可以使用 GitHub Pages 或 Gitee Pages 託管博客、項目官網等靜態網頁，這樣就省去了購買服務器的錢，也不需要耗費太多精力維護。
GitHub Pages 使用很廣泛，我之前也用過，不過訪問不夠穩定，會影響頁面加載速度。Gitee 是國內版的 GitHub，訪問速度優秀，並且國內發展勢頭不錯，因此我選取 Gitee Pages 來託管我的網站。
建立倉庫
申請一個 Gitee 賬號，創建一個新的倉庫，倉庫名儘量和賬號名一致，這樣可以避免一些因爲路徑引發的問題。
然後在倉庫首頁服務一欄開啓 Gitee Pages 服務。
開啓後，你就擁有了專屬的二級域名網址。
注意：倉庫內容有變化，需要手動觸發更新，頁面才能真正生效。
連接倉庫
npm install hexo-deployer-git --save
- 修改配置。
deploy:
type: git
repo: [email protected]:java4u/java4u.git
注意上面的 repo 地址並不是倉庫的地址，而是你下載/克隆項目時彈出的那個地址，type 如果是 git 就選擇 SSH。
- 生成/添加 SSH 公鑰
Gitee 、GitHub 提供了基於 SSH 協議的 Git 服務，在使用 SSH 協議訪問倉庫倉庫之前，需要先配置好賬戶/倉庫的 SSH 公鑰。
先看下自己有沒有配置過用戶名和郵箱：
git config --global user.name
git config --global user.email
如果沒有就做下配置：
# 設置郵箱
git config --global user.email *********@qq.com
# 設置用戶名
git config --global user.name '****'
然後本地生成 SSH 公鑰，郵箱爲剛配置好的賬戶：
ssh-keygen -t rsa -C [email protected]
生成後可查看 SSH 公鑰：
cat ~/.ssh/id_rsa.pub
複製公鑰去 Gitee 粘貼，添加。
測試是否連接成功：
ssh -T [email protected]
上傳倉庫
執行部署命令，即可將本地資源上傳遠程倉庫。
hexo d
手動更新
遠程倉庫雖然可以看到提交記錄，但靜態網站不會感知到實時變更，需要去 Gitee Pages 服務頁面做下更新。
稍等片刻，訪問 https://java4u.gitee.io/ 即可看到 Hexo 結合 kaze 主題搭建的靜態網站。