不過如果僅僅是想搭建個人的網(wǎng)站，寫寫博客，想要" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 建站神器：Hexo+Kaze+Gitee Pages 搭建靜態(tài)博客網(wǎng)站

建站神器：Hexo+Kaze+Gitee Pages 搭建靜態(tài)博客網(wǎng)站

時間：2023-07-08 20:42:01 | 來源：網(wǎng)站運營

時間：2023-07-08 20:42:01 來源：網(wǎng)站運營

建站神器：Hexo+Kaze+Gitee Pages 搭建靜態(tài)博客網(wǎng)站：

前言

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

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

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

Hexo 簡介

Hexo 是什么？

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

Hexo 安裝

前置要求

安裝 Git

安裝 Node.js

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

替代安裝方法：

安裝 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 命令可以創(chuàng)建一個新的 Hexo 文件夾，這個文件夾其實就是利用 Hexo 生成的站點信息了。接下來講下怎么建站。

Hexo 建站

初始化操作

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

hexo init java4u.cn站點初始化中：

站點初始化完成，會生出指定的文件夾：

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

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

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

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

本地啟動

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

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

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

核心配置

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

package.json

這個文件列出了 Hexo 的基本參數(shù)信息以及它所依賴的插件。它幫助我們對 Hexo 整體有個基本的了解，無需修改?？梢钥吹剑?b>EJS[9]，Stylus[10] 和 Markdown[11] 渲染器都是默認(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" }}
如果后邊要切換主題，記得把最后一個默認(rèn)的主題依賴刪除掉。

_config.yml

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

網(wǎng)址

參數(shù)描述

URL

參數(shù)描述默認(rèn)值

目錄

參數(shù)描述默認(rèn)值

文章

參數(shù)描述默認(rèn)值

分類 & 標(biāo)簽

參數(shù)描述默認(rèn)值

日期/時間格式

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

參數(shù)描述默認(rèn)值

分頁

參數(shù)描述默認(rèn)值

擴展

【主題】

參數(shù)描述默認(rèn)值
【部署】

配置如下：

deploy: type: git repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io branch: [branch] message: [message]
參數(shù)描述默認(rèn)

常用指令

創(chuàng)建文章

使用以下指令：

hexo new "test"或者簡寫：

hexo n "test"

運行服務(wù)器

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

hexo server或者簡寫：

hexo s

生成靜態(tài)文件

hexo generate或者簡寫

hexo g監(jiān)視文件變動立即重新生成。該操作會阻塞命令。

hexo g --watch生成完畢后自動部署網(wǎng)站。

hexo generate --deploy

部署

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

hexo deploy或者簡寫為：

hexo d

Hexo 主題

為什么選擇 Kaze

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

安裝 Kaze

在 your site/themes 下輸入

cd themesgit clone https://github.com/theme-kaze/hexo-theme-Kaze.git安裝成功后，會生出目錄：hexo-theme-Kaze。

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

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

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

主題配置

可在該主題目錄下的 _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"

字號與字體

在 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

站點訪問量統(tǒng)計

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

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: 本站總訪客數(shù){}次 # the style will be shown as $1{uv}$2

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

analytics: enable: false type: google # google google: id:enable 開啟分析支持（默認(rèn)關(guān)閉）

type` 目前僅支持 `googlegoogle.id 有關(guān)谷歌分析的具體使用說明和 id 使用可以參考谷歌文檔[22]

首頁

文章頭圖

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

小組件

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

關(guān)于

關(guān)于頁面需要自行創(chuàng)建，在站點 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[23]，內(nèi)置了一部分社交圖標(biāo)，你可以自定義其他icon文件或者解決方案來添加自定義圖標(biāo)。

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

目錄

主題目錄通過Hexo原生函數(shù)生成，具體可參見 文檔[24]

toc: showListNumber: false maxDepth: 6 minDepth: 1showListNumber 是否生成編號

maxDepth TOC最大深度

minDepth TOC最小深度

代碼高亮

參見代碼 高亮文檔[25]

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

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

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 協(xié)議</a>。轉(zhuǎn)載請注明出處！ style: warningenable 開起版權(quán)說明（默認(rèn)開啟）

writer` 作者id，如果不填則會使用主題配置`author`或站點配置`authordeclare 版權(quán)聲明具體內(nèi)容，支持 html 語句

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

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

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

Front-matter

banner_img

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

banner_img_set

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

excerpt

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

評論

支持 valine，gitalk 和 livere

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

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

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

wordcount: enable: true開啟（默認(rèn)開啟）

圖片畫廊

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

fslightbox: enable: true開啟（默認(rèn)開啟）

標(biāo)簽插件

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

note

在 markdown 文件中如下書寫即可

{% note style %}...markdown content{% endnote %}有五種樣式可以選擇，primary，success，info，warning，danger

備案信息

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

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

站點托管

為什么選擇 Gitee Pages

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

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

建立倉庫

申請一個 Gitee 賬號，創(chuàng)建一個新的倉庫，倉庫名盡量和賬號名一致，這樣可以避免一些因為路徑引發(fā)的問題。

然后在倉庫首頁服務(wù)一欄開啟 Gitee Pages 服務(wù)。

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

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

連接倉庫

  1. 安裝 hexo-deployer-git[29]。
npm install hexo-deployer-git --save
  1. 修改配置。
deploy: type: git repo: git@gitee.com:java4u/java4u.git注意上面的 repo 地址并不是倉庫的地址，而是你下載/克隆項目時彈出的那個地址，type 如果是 git 就選擇 SSH。

  1. 生成/添加 SSH 公鑰
Gitee 、GitHub 提供了基于 SSH 協(xié)議的 Git 服務(wù)，在使用 SSH 協(xié)議訪問倉庫倉庫之前，需要先配置好賬戶/倉庫的 SSH 公鑰。

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

git config --global user.name git config --global user.email如果沒有就做下配置：

# 設(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 粘貼，添加。

測試是否連接成功：

ssh -T git@gitee.com

上傳倉庫

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

hexo d

手動更新

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

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

參考資料

[1]

Hexo: https://hexo.io/docs/

[2]

git: https://git-scm.com/download/win

[3]

Homebrew: https://brew.sh/

[4]

官方安裝程序: https://nodejs.org/en/download/

[5]

nvs: https://github.com/jasongin/nvs/

[6]

Homebrew: https://brew.sh/

[7]

NodeSource: https://github.com/nodesource/distributions

[8]

指南: https://nodejs.org/en/download/package-manager/

[9]

EJS: https://ejs.co/

[10]

Stylus: http://learnboost.github.io/stylus/

[11]

Markdown: http://daringfireball.net/projects/markdown/

[12]

時區(qū)列表: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

[13]

永久鏈接: https://hexo.io/zh-cn/docs/permalinks

[14]

permalink: https://hexo.io/zh-cn/docs/variables

[15]

Asset 文件夾: https://hexo.io/zh-cn/docs/asset-folders

[16]

Highlight.js: https://hexo.io/docs/syntax-highlight#Highlight-js

[17]

PrismJS: https://hexo.io/docs/syntax-highlight#PrismJS

[18]

Moment.js: http://momentjs.com/

[19]

updated: https://hexo.io/zh-cn/docs/variables#頁面變量

[20]

Meta generator: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta#屬性

[21]

kaze: https://demo.theme-kaze.top/

[22]

谷歌文檔: https://analytics.google.com/

[23]

iconfont: https://www.iconfont.cn/

[24]

文檔: https://hexo.io/docs/helpers#toc

[25]

高亮文檔: https://demo.theme-kaze.top/highlight/

[26]

相關(guān)文檔: https://demo.theme-kaze.top/latex/

[27]

hexo-wordcount: https://github.com/willin/hexo-wordcount

[28]

fslightbox: https://fslightbox.com/

[29]

hexo-deployer-git: https://github.com/hexojs/hexo-deployer-git

關(guān)鍵詞：靜態(tài)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉