個人網站搭建思路設計（建站工具及相關技術）

前 言

建網站本身是一個很大的工程，涉及前端頁面的搭建，網站數據的存儲，還要購置服務器資源，甚至是后期的維護，過程相當繁瑣。

不過如果僅僅是想搭建個人的網站，寫寫博客，想要美觀，又不想操心太多和寫博客無關的事情。那么，Hexo + Kaze + Gitee Pages 的方式就很適合你。

本文就講下如何借助這三樣免費的技術或服務，來搭建一個可訪問的靜態博客網站。

Hexo 簡介

Hexo 是什么？

Hexo[1]是一個快速，簡單且功能強大的博客框架。如果你用 Markdown 寫博客，Hexo 可以在幾秒內生成帶有精美主題的靜態文件。

Hexo 安裝

前置要求

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

安裝 Git

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

安裝 Node.js

Node.js 為大多數平臺提供了 官方安裝程序[4]。

替代安裝方法：

Windows：使用 nvs[5]安裝它。 Mac：使用 Homebrew[6]安裝。 Linux（基于 DEB / RPM）：與 NodeSource[7]一起安裝。 其他：通過相應的軟件包管理器進行安裝。請參閱 Node.js 提供的指南[8]。

安裝 Hexo

用 npm 安裝 Hexo。

npminstall -g hexo-cli

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

hexoversion

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

npmuninstall -g hexo-cli

運行 hexo

安裝后，你可以通過 hexo <command>運行 Hexo。比如通過 hexo help指令來獲取使用幫助。

hexo help

幫助里提到 hexo init命令可以創建一個新的 Hexo 文件夾，這個文件夾其實就是利用 Hexo 生成的站點信息了。接下來講下怎么建站。

Hexo 建站

初始化操作

使用 hexo init <folder>指令就可以在指定文件夾下建立站點信息：

hexoinitjava4u.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 就具備了生成靜態網站的能力。

本地啟動

我們先本地啟動，看下實際效果。輸入以下命令：

hexoserver

Hexo 會啟動服務，將默認生成的網站運行在本機的 4000 端口上，可以直接訪問 http://localhost:4000就能看到網站首頁，它基于默認主題生成，同時有一篇默認文章。

這個頁面只是官方提供的一個樣例，看到它就意味著你本地環境跑通了。我們可以通過修改配置的方式，對頁面相關元素做調整。

核心配置

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

package.json

這個文件列出了 Hexo 的基本參數信息以及它所依賴的插件?？梢钥吹?，EJS[9]，Stylus[10]和 Markdown[11]渲染器都是默認安裝的。

{ "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網站描述，用于 seokeywords網站的關鍵詞，支持多個關鍵詞。author文章作者。language網站使用的語言。對于簡體中文用戶來說，使用不同的主題可能需要設置成不同的值，請參考你的主題的文檔自行設置，常見的有 zh-Hans和 zh-CN。timezone網站時區。Hexo 默認使用你電腦的時區。請參考 時區列表[12]進行設置，如 America/New_York, Japan, 和 UTC 。一般的，對于中國大陸地區可以使用 Asia/Shanghai。

URL

參數描述默認值url網址, must starts with http:// or https://http://example.comroot網站根目錄，如果放子目錄，設置 /blog//permalink文章的 永久鏈接[13]格式:year/:month/:day/:title/permalink_defaults永久鏈接中各部分的默認值

pretty_urls改寫 `permalink`[14]的值來美化 URL

pretty_urls.trailing_index是否在永久鏈接中保留尾部的 index.html，設置為 false 時去除truepretty_urls.trailing_html是否在永久鏈接中保留尾部的 .html, 設置為 false 時去除 (對尾部的 index.html無效)true

目錄

參數描述默認值source_dir資源文件夾，這個文件夾用來存放內容。sourcepublic_dir公共文件夾，這個文件夾用于存放生成的站點文件。publictag_dir標簽文件夾tagsarchive_dir歸檔文件夾archivescategory_dir分類文件夾categoriescode_dirInclude code 文件夾，source_dir 下的子目錄downloads/codei18n_dir國際化（i18n）文件夾:langskip_render跳過指定文件的渲染。匹配到的文件將會被不做改動地復制到 public 目錄中。

文章

參數描述默認值new_post_name新文章的文件名稱:title.mddefault_layout預設布局postauto_spacing在中文和英文之間加入空格falsetitlecase把標題轉換為 title casefalseexternal_link在新標簽中打開鏈接trueexternal_link.enable在新標簽中打開鏈接trueexternal_link.field對整個網站（site）生效或僅對文章（post）生效siteexternal_link.exclude需要排除的域名。主域名和子域名如 www 需分別配置[]filename_case把文件名稱轉換為 (1) 小寫或 (2) 大寫0render_drafts顯示草稿falsepost_asset_folder啟動 Asset 文件夾[15]falserelative_link把鏈接改為與根目錄的相對地址，建議使用絕對地址。falsefuture顯示未來的文章truehighlight代碼塊的設置, see Highlight.js[16]section for usage guide

prismjs代碼塊的設置, see PrismJS[17]section for usage guide

分類 & 標簽

參數描述默認值default_category默認分類uncategorizedcategory_map分類別名

tag_map標簽別名

日期/時間格式

Hexo 使用 Moment.js[18]來解析和顯示時間。

參數描述默認值date_format日期格式YYYY-MM-DDtime_format時間格式HH:mm:ssupdated_option當 Front Matter 中沒有指定 `updated`[19]時 updated 的取值，支持 mtime(文件最后修改時間)，date(使用 date 的值)，empty(不指定)mtime

分頁

參數描述默認值per_page每頁顯示的文章量 (0 = 關閉分頁功能)10pagination_dir分頁目錄page

擴展

【主題】

參數描述默認值theme當前主題名稱。值為false時禁用主題landscapetheme_config主題的配置文件。在這里放置的配置會覆蓋主題目錄下的 _config.yml 中的配置無初始配置deploy部署部分的設置

meta_generatorMeta generator[20]標簽。值為 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') }})tokenOptional token value to authenticate with the repo. Prefix with $ to read token from environment variable

常用指令

創建文章

使用以下指令：

hexo new"test"

或者簡寫：

hexon "test"

運行服務器

輸入以下命令以啟動服務器，你的網站會在 http://localhost:4000下啟動。在服務器啟動期間，Hexo 會監視文件變動并自動更新，你無須重啟服務器。

hexoserver

或者簡寫：

hexos

生成靜態文件

hexogenerate

或者簡寫

hexog

監視文件變動立即重新生成。該操作會阻塞命令。

hexo g --watch

生成完畢后自動部署網站。

hexo generate --deploy

部署

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

hexodeploy

或者簡寫為：

hexod

Hexo 主題

為什么選擇 Kaze

Hexo 默認主題為 landscape，但我覺得不夠美觀，這里推薦 kaze[21],它有以下特性：

響應式設計，適配桌面端、平板、手機等各種設備 前端性能優化，加載快速，眨眼之間即可加載完成 圖片懶加載，應用懶加載技術加快頁面的生成速度 資源壓縮，提升本地資源請求速度 精簡設計，不包含 Jquery 等額外庫 支持側邊欄小組件，例如最近文章，作者卡片 暗黑模式，享受黑夜的魅力 代碼高亮，支持 prismjs 公式渲染，支持 katex和 mathjax 評論系統，集成 valine、gitalk和 livere 訪問量統計和谷歌分析支持

安裝 Kaze

在 your site/themes下輸入

cdthemesgit clonehttps://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: falsetype: busuanzi # now version only supports busuanzi pv: enable: truestyle: 本站總訪問量{}次 # the style will be shown as$1{pv}$2uv: enable: truestyle: 本站總訪客數{}次 # the style will be shown as$1{uv}$2

數據分析

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

enable開啟分析支持（默認關閉）

type目前僅支持 google

google.id有關谷歌分析的具體使用說明和 id使用可以參考谷歌文檔[22]

首頁

文章頭圖

在文章 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[23]，Hexo 內置了一部分社交圖標，你可以自定義其他 icon 文件或者解決方案來添加自定義圖標。

about: description: descriptionsocial_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: 6minDepth: 1

showListNumber是否生成編號

maxDepthTOC 最大深度

minDepthTOC 最小深度

代碼高亮

代碼太多了，這里就不貼了，需要的同學轉發本文+關注+私信【1227】即可查看（請務必先關注一下，因為非好友的消息是收不到的）

數學公式

主題支持 mathjax和 katex兩種渲染引擎，具體參見我之前的一些代碼

copyright

copyright: enable: truewriter: # if writer is empty we will use config.author as writer declare: 本博客所有文章除特別聲明外，均采用<a target="_blank" rel="noopener" >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

為文章設置在首頁顯示的簡介，還可以通過 <!--more-->來控制顯示

評論

支持 valine，gitalk和 livere

具體設置可參考主題配置文檔說明和相關評論插件文檔

字數統計

主題集成 hexo-wordcount[27]插件，在主題配置文件中設置

wordcount: enable:true

開啟（默認開啟）

圖片畫廊

圖片畫廊功能基于 fslightbox，在主題配置文件中設置

fslightbox: enable:true

開啟（默認開啟）

標簽插件

主題集成了一些標簽方便書寫

note

在 markdown文件中如下書寫即可

{% note style%}...markdowncontent{% 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 服務。

開啟后，你就擁有了專屬的二級域名網址。

注意：倉庫內容有變化，需要手動觸發更新，頁面才能真正生效。

連接倉庫

一、安裝 hexo-deployer-git[29]。

npm installhexo-deployer-git --save

二、修改配置。

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

注意上面的 repo 地址并不是倉庫的地址，而是你下載/克隆項目時彈出的那個地址，type 如果是 git 就選擇 SSH。

三、生成/添加 SSH 公鑰

Gitee 、GitHub 提供了基于 SSH 協議的 Git 服務，在使用 SSH 協議訪問倉庫倉庫之前，需要先配置好賬戶/倉庫的 SSH 公鑰。

先看下自己有沒有配置過用戶名和郵箱：

git config --globaluser.namegit config --globaluser.email

如果沒有就做下配置：

# 設置郵箱gitconfig--globaluser.email*********@qq.com# 設置用戶名git config --global user.name '****'

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

ssh-keygen-trsa-Cyong__1994@163.com

生成后可查看 SSH 公鑰：

cat ~/.ssh/id_rsa.pub

復制公鑰去 Gitee 粘貼，添加。

測試是否連接成功：

ssh-T git@gitee.com

上傳倉庫

執行部署命令，即可將本地資源上傳遠程倉庫。

hexod

手動更新

遠程倉庫雖然可以看到提交記錄，但靜態網站不會感知到實時變更，需要去 Gitee Pages 服務頁面做下更新。

稍等片刻，訪問鏈接即可看到 Hexo 結合 kaze 主題搭建的靜態網站。