或許說這是本站從無到有搭建的記錄更為準(zhǔn)確。
本站？什么本站？總不能是CSDN吧？這里指的是我的個(gè)人博客網(wǎng)站 Karubon.moe ，這篇博客基于搭建這個(gè)網(wǎng)站時(shí)得到的經(jīng)驗(yàn)教訓(xùn)編寫。喜歡這篇博客的話不妨去我的網(wǎng)站看看呀。
前言
在寒假的中期，百般聊賴之下，終于是打算擁有一個(gè)自己的博客網(wǎng)站。恰好在校中簡(jiǎn)略學(xué)習(xí)了網(wǎng)站制作的知識(shí)，使我得到了足夠的勇氣去面對(duì)挑戰(zhàn)，于是便有了你眼前的這個(gè)網(wǎng)站與這篇文章。當(dāng)然，本文力求使非信息技術(shù)相關(guān)專業(yè)的讀者也能輕易上手，因此不需要抱有過多的恐懼。只要你強(qiáng)烈地希望擁有一個(gè)自己的博客網(wǎng)站，并且愿意付諸行動(dòng)，那么我相信這篇文章一定能幫助到你。
本文所有操作均在Windows 11系統(tǒng)下進(jìn)行。
安裝Hexo
Hexo是一個(gè)快速、簡(jiǎn)潔且高效的博客框架。Hexo 使用 Markdown（或其他標(biāo)記語言）解析文章，在幾秒內(nèi)，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁。
Hexo的特點(diǎn)在于：
- 支持Markdown：Hexo兼容GitHub Flavored Markdown的各項(xiàng)功能，并可與大部分Octopress插件相容。
- 一鍵部署：使用簡(jiǎn)單的指令即可將博客部署至GitHub Pages、Heroku或其他平臺(tái)。
- 插件與可擴(kuò)展性：其強(qiáng)大的API使得用戶可以靈活擴(kuò)展功能，同時(shí)輕松集成多種模板引擎（如EJS，Pug，Nunjucks）和工具（例如Babel，PostCSS，Less/Sass）。
安裝前提
在安裝Hexo之前，我們必須要安裝下面兩個(gè)軟件。
Node.js是能夠在服務(wù)器端運(yùn)行 JavaScript 的開放源代碼、跨平臺(tái)執(zhí)行環(huán)境。Node.js版本需不低于10.13，建議使用Node.js 12.0及以上版本
，但我不認(rèn)為大部分用戶會(huì)去下載這些低版本的軟件。
Git是一個(gè)自由開源的分布式版本控制系統(tǒng)，設(shè)計(jì)用于快速高效地處理從小型到超大型的所有項(xiàng)目。
編輯器 VS Code（可選）
Visual Studio Code（簡(jiǎn)稱 VS Code）是一款由微軟開發(fā)且跨平臺(tái)的免費(fèi)源代碼編輯器。該軟件以擴(kuò)展的方式支持語法高亮、代碼自動(dòng)補(bǔ)全（又稱 IntelliSense）、代碼重構(gòu)功能，并且內(nèi)置了命令行工具和 Git 版本控制系統(tǒng)。用戶可以更改主題和鍵盤快捷方式實(shí)現(xiàn)個(gè)性化設(shè)置，也可以通過內(nèi)置的擴(kuò)展程序商店安裝其他擴(kuò)展以拓展軟件功能。
這個(gè)軟件不是必需的，它只是便于你編輯代碼、使用Markdown語法，同時(shí)簡(jiǎn)化一些Git相關(guān)的操作。但你也可以有自己的想法。
博客框架 Hexo
在上述兩個(gè)必要軟件安裝完成之后，通過在桌面（或者其他文件夾）右鍵菜單中選擇git bash here，輸入并執(zhí)行下面命令來安裝Hexo（不要輸入美元符號(hào)）：
$ npm install -g hexo-cli
完成這個(gè)操作之后，我們的設(shè)備上已經(jīng)安裝了Hexo。
本地構(gòu)建
現(xiàn)在我們已經(jīng)擁有了Hexo，是時(shí)候構(gòu)建網(wǎng)站了。在將網(wǎng)站真正上網(wǎng)之前，我們通常先在自己的電腦上確定顯示效果，避免頻繁上傳的麻煩，也保證網(wǎng)站的穩(wěn)定。
初始化
在自己的本地磁盤上創(chuàng)建一個(gè)文件夾，你可以命名為blog，或者任意名字。這個(gè)文件夾用于儲(chǔ)存構(gòu)建博客網(wǎng)站的所有文件。
在此文件夾內(nèi)打開右鍵菜單，選擇git bash here，輸入并執(zhí)行下面命令以初始化該文件夾：
$ hexo init
執(zhí)行該命令后，Hexo會(huì)從GitHub克隆一份基本的網(wǎng)站文件與一份主題，同時(shí)使用包管理器下載依賴。完成后，你應(yīng)該收到一條告知完成的消息：
INFO Start blogging with Hexo!
此時(shí)在你文件夾中至少有以下文件與文件夾：
.
├── _config.yml 網(wǎng)站的配置信息?？梢栽诖伺渲么蟛糠值膮?shù)。
├── .gitignore 用于Git版本控制時(shí)忽略指定文件或目錄。
├── package.json 應(yīng)用程序的信息。EJS,Stylus和Markdown渲染引擎已默認(rèn)安裝。
├── .github GitHub特定的配置文件夾。
├── node_modules Node.js依賴模塊存放目錄。你通常不用關(guān)心這個(gè)。
├── scaffolds 模版文件夾。新建文章時(shí)Hexo會(huì)根據(jù)scaffold來創(chuàng)建文件。
├── source 資源文件夾是存放用戶資源的地方。除_posts之外，開頭命名為_(下劃線)的文件/文件夾和隱藏的文件均會(huì)被忽略。
| └── _posts 存放博客文章的文件夾。
└── themes 主題文件夾。Hexo會(huì)根據(jù)主題來生成靜態(tài)頁面。
生成與預(yù)覽
通過下面命令生成靜態(tài)文件：
$ hexo generate
或者簡(jiǎn)寫為：
$ hexo g
此時(shí)根目錄下生成public文件夾，里面存放著生成的站點(diǎn)文件。
現(xiàn)在通過下面命令啟動(dòng)本地服務(wù)器：
$ hexo server
或者簡(jiǎn)寫為：
$ hexo s
這個(gè)命令默認(rèn)會(huì)在 http://localhost:4000/ 啟動(dòng)你的網(wǎng)站。通過在終端中按住ctrl并用左鍵點(diǎn)擊鏈接可以快速在瀏覽器中打開。你應(yīng)該會(huì)看到下面的頁面：
至此你已經(jīng)在本地上構(gòu)建了第一個(gè)你的網(wǎng)站并完成預(yù)覽，在終端中同時(shí)按住ctrl+C終止服務(wù)器。下面有一些優(yōu)化體驗(yàn)的可選操作。
安裝第三方主題（可選）
注意
許多插件和主題都是由社區(qū)貢獻(xiàn)的。本站不保證其可用性和安全性。
我想初始化時(shí)自動(dòng)安裝的主題大概率不合你的口味，Hexo可以通過安裝主題來快速改變網(wǎng)站風(fēng)格。如果你暫時(shí)沒有心儀的主題，不妨在Hexo官網(wǎng)的主題頁看看，說不定就能找到你喜歡的主題。
一般來說主題的README文檔會(huì)指導(dǎo)你如何安裝與配置主題。但如果沒有，換一個(gè)試著按下面步驟安裝：
- 獲取主題文件：如果你不熟悉git操作，那就在GitHub的Code菜單（綠色按鍵）中選擇Download Zip，把主題文件下載到本地并解壓。
- 移動(dòng)到文件夾：確定解壓所得文件夾打開后就能看到_config.yml，將這個(gè)文件夾移動(dòng)到博客根目錄中的source文件夾。
- 修改配置信息：在博客根目錄下的_config.yml文件中找到theme參數(shù)，將其值改為你的主題文件夾名，例如：
theme: YourThemeName
現(xiàn)在在終端中逐行輸入并執(zhí)行下列指令：
$ hexo clean
$ hexo generate
$ hexo server
clean指令將清除緩存文件(db.json)和已生成的靜態(tài)文件(public)。在某些情況（尤其是更換主題后），如果發(fā)現(xiàn)你對(duì)站點(diǎn)的更改無論如何也不生效，那么可能需要運(yùn)行該命令。后兩個(gè)指令上文已經(jīng)介紹。
打開網(wǎng)頁，你應(yīng)該能看到你安裝的主題已經(jīng)應(yīng)用。不同主題都提供一定程度上的配置項(xiàng)，供你調(diào)整細(xì)節(jié)。如果你對(duì)網(wǎng)頁制作具有基本的了解，或者能熟練使用chatGPT，那么你也可以嘗試直接修改相關(guān)的代碼，實(shí)現(xiàn)完全的自定義。
寫下第一篇博客（可選）
或許你早就想把你的想法放進(jìn)網(wǎng)站，看看它是什么樣子了。我們現(xiàn)在就來寫下一篇博客。
Hexo有如下指令：
$ hexo new [layout] <title>
new指令將新建一篇文章。如果沒有設(shè)置layout的話，默認(rèn)使用_config.yml中的default_layout參數(shù)代替。如果標(biāo)題包含空格的話，需要使用引號(hào)括起來。像下面這樣：
$ hexo new "post title with whitespace"
這個(gè)操作將會(huì)在根目錄的source/_post文件夾下生成一個(gè)<title>.md文件。我們用任意的文本編輯器打開它，能看見類似下面的內(nèi)容：
---
title: {{ title }}
date: {{ date }}
---
我們將Hexo中文件最上方以—分隔的區(qū)域叫做Front-matter，它用于指定個(gè)別文件的變量。具體的用法參見官方文檔，這里不展開說明。
在Front-matter下方是正文部分，Hexo支持以任何格式書寫文章，只要安裝了相應(yīng)的渲染插件。默認(rèn)的.md格式要以Makdown語法書寫，Markdown 是一種輕量級(jí)標(biāo)記語言，它允許人們使用易讀易寫的純文本格式編寫文檔。如果你不熟悉Markdown語法，可以參考這個(gè)網(wǎng)站的內(nèi)容。
在編寫博客時(shí)，只要你通過hexo s啟動(dòng)了服務(wù)器，你就可以通過刷新網(wǎng)頁的方式實(shí)時(shí)查看編輯效果，因?yàn)?em>Hexo能夠監(jiān)視文件變動(dòng)并立即重新生成靜態(tài)文件。此外，顯示效果還可能受到主題影響。
部署網(wǎng)站
你已經(jīng)在本地上看到你的網(wǎng)站的效果了。我們現(xiàn)在將它上傳到互聯(lián)網(wǎng)，使你的博客能被所有人訪問。
部署GitHub Pages
我們假定你已經(jīng)有一個(gè)GitHub賬號(hào)而且已經(jīng)配置好git了，不知道應(yīng)該怎么做的話可以參考這篇博客。
現(xiàn)在新建一個(gè)倉庫（Create a new repository），Repository name填寫為<你的GitHub用戶名>.github.io，例如“ChaoiteC.github.io”，同時(shí)倉庫可見性必須為Public（對(duì)所有人可見）。
如果操作正確，你會(huì)在倉庫設(shè)置中找到Page選項(xiàng)。
現(xiàn)在打開博客根目錄下的_config.yml，找到Deployment相關(guān)配置項(xiàng)，如下填寫：
deploy:
type: git
repo: git@github.com:<你的GitHub用戶名>/<你的GitHub用戶名>.github.io.git
branch: main
你可能注意到官方文檔與一些其他教程中repo項(xiàng)填寫的是http鏈接，這也是可以的，但在使用GitHub Actions部署時(shí)可能會(huì)遭遇拒絕訪問的問題。
安裝 hexo-deployer-git:
$ npm install hexo-deployer-git --save
執(zhí)行下面命令：
$ hexo clean
$ hexo g
$ hexo deploy 或者簡(jiǎn)寫為： $ hexo d
或者簡(jiǎn)寫為：
$ hexo d -g
deploy命令會(huì)將public目錄中的文件和目錄推送至_config.yml中指定的遠(yuǎn)端倉庫和分支中，并且完全覆蓋該分支下的已有內(nèi)容。
如果一切工作正常，現(xiàn)在你可以在<你的GitHub用戶名>.github.io中看到網(wǎng)站內(nèi)容。
GitHub Actions自動(dòng)部署（可選）
我們很快注意到，一旦你離開現(xiàn)在使用的設(shè)備，你就無法修改網(wǎng)站內(nèi)容。當(dāng)你更換設(shè)備時(shí)，你不得不將上述步驟全部重復(fù)。一旦設(shè)備出現(xiàn)故障更是會(huì)損失慘重。這些矛盾呼吁我們采取方法，要求我們能自動(dòng)地儲(chǔ)存與部署博客文件，而不受手上設(shè)備的限制。
GitHub Actions為我們?cè)谛枰臅r(shí)候創(chuàng)建一個(gè)容器，我們?cè)谌萜髦邪惭b軟件并處理我們的博客文件，最后部署到Pages倉庫中。現(xiàn)在我們來實(shí)現(xiàn)它。
前提
首先在Github上新建一個(gè)倉庫用來儲(chǔ)存我們的博客文件，通常我們將其設(shè)為私有的。
如果你安裝了VS Code，這時(shí)候你可以在博客根目錄右鍵菜單中選擇“在終端中打開”來啟動(dòng)Windows Powershell，然后輸入并執(zhí)行：
code .
此命令將會(huì)啟動(dòng)VS Code并在其中打開這個(gè)文件夾。然后你可以在側(cè)邊欄中打開源代碼管理頁面，從GitHub添加遠(yuǎn)程庫。只需要按照提示操作，你最終能將整個(gè)目錄下的文件上傳到倉庫中（被.gitignore指定的文件/文件夾不會(huì)上傳）。
我們將上面內(nèi)容視為準(zhǔn)備操作，如果你不知道如何操作，可以尋求搜索引擎的幫助。
部署密鑰
現(xiàn)在在“git bash here”中執(zhí)行下面命令：
$ ssh-keygen -f github-deploy-key
這個(gè)命令將生成部署密鑰，你只需要一直按空格，根目錄下就會(huì)出現(xiàn)兩個(gè)文件：github-deploy-key和github-deploy-key.pub。
注意
正如其名字，除非你確定自己在做什么，否則你不應(yīng)該將密鑰直接上傳到倉庫（尤其是公共倉庫）。
在博客源文件倉庫中依序打開Settings->Secrets and variables->Actions->New repository secret。
在Name中填寫“HEXO_DEPLOY_PRI”，在Value中填寫github-deploy-key文件中的全部?jī)?nèi)容（包括頭尾的文字）。然后Add secret。
在Page倉庫中依序打開Settings->Deploy keys->Add deploy key。
在Title中填寫“HEXO_DEPLOY_PUB”，在Key中填寫github-deploy-key.pub文件中的全部?jī)?nèi)容，勾選Allow write access，然后Add key。
配置GitHub Actions
在博客根目錄下創(chuàng)建.github/workflows/deploy.yml文件，目錄結(jié)構(gòu)如下。
.
└── .github
└── workflows
└── deploy.yml
在deploy.yml文件中粘貼下面內(nèi)容并在對(duì)應(yīng)地方作改動(dòng)。
# Action's Name
name: AutoDeploy
on:
# Triggering Condition 1 Main Branch Performs The Task After Receiving Push
push:
branches:
- main
# Triggering Condition 2 Manual Button
workflow_dispatch:
# Putting Environment Variables Here You Need To Replace It With Your Own
env:
# After Hexo Compiles Use This Git User To Deploy To The Github Warehouse
GIT_USER: <你的GitHub用戶名>
# After Hexo Compiles Use This Git Mailbox To Deploy To The Github Warehouse
GIT_EMAIL: <你的GitHub用戶郵箱>
# The Git Hub Warehouse To Be Deployed After Hexo Compiles
GIT_DEPLOY_REPO: <你的GitHub用戶名>/<你的GitHub用戶名>.github.io
# Hexo Compiles The Branch To Deploy After Compilation
GIT_DEPLOY_BRANCH: main
jobs:
build:
name: Build on node ${{ matrix.node_version }} and ${{ matrix.os }}
runs-on: ubuntu-latest
if: github.event.repository.owner.id == github.event.sender.id
strategy:
matrix:
os: [ubuntu-latest]
node_version: [16.x]
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Checkout deploy repo
uses: actions/checkout@v4
with:
repository: ${{ env.GIT_DEPLOY_REPO }}
ref: ${{ env.GIT_DEPLOY_BRANCH }}
path: .deploy_git
- name: Use Node.js ${{ matrix.node_version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node_version }}
- name: Configuration environment
env:
HEXO_DEPLOY_PRI: ${{secrets.HEXO_DEPLOY_PRI}}
run: |
sudo timedatectl set-timezone "Asia/Shanghai"
mkdir -p ~/.ssh/
echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
ssh-keyscan -t rsa github.com >> ~/.ssh/known_hosts
git config --global user.name $GIT_USER
git config --global user.email $GIT_EMAIL
- name: Install dependencies
run: |
npm install hexo-cli -g
# Install According To The Components You Installed
npm install - gulp gulp-uglify hexo hexo-deployer-git hexo-generator-archive hexo-generator-category hexo-generator-feed hexo-generator-index hexo-generator-search hexo-generator-searchdb hexo-generator-sitemap hexo-generator-tag hexo-renderer-ejs hexo-renderer-marked hexo-renderer-pug hexo-renderer-stylus hexo-server hexo-tag-cloud hexo-word-counter readable-stream uglify-es --save
- name: Deploy hexo
run: |
npm run deploy
現(xiàn)在你可以嘗試在博客源文件倉庫中作一點(diǎn)改動(dòng)并推送到遠(yuǎn)程庫，接著在倉庫的Actions頁面中觀察工作是否正常（不被打紅叉）。如果正常，大約在1-2分鐘內(nèi)會(huì)完成自動(dòng)部署任務(wù)，你能在Pages上確認(rèn)到更改。
配置自定義域名（可選）
無論如何，<你的GitHub用戶名>.github.io總歸是不夠有個(gè)性的，而且三級(jí)域名會(huì)給人一種寄人籬下的感覺（雖然事實(shí)也是如此）?，F(xiàn)在，我們打算購買一個(gè)域名，并使他人能通過這個(gè)域名訪問我們的網(wǎng)站。
聲明
本章所述內(nèi)容僅基于個(gè)人經(jīng)驗(yàn)，并無意宣傳或推廣任何特定公司或服務(wù)。筆者在撰寫本文時(shí)未收取任何公司的任何形式的費(fèi)用或報(bào)酬。無論你選擇任何域名注冊(cè)商購買域名，操作都大致相同。你所采取的一切行動(dòng)應(yīng)自行審慎決定，并非本文的責(zé)任范圍。
注意
本文內(nèi)容不涉及選購服務(wù)器，但如果你意欲購買，請(qǐng)注意域名注冊(cè)商和服務(wù)器提供商主體應(yīng)該同在境內(nèi)或境外，若一方在境內(nèi)一方在境外，備案時(shí)可能會(huì)產(chǎn)生問題。
選擇一個(gè)合適的域名注冊(cè)商是很重要的，至少是關(guān)乎錢包（）。我比較欣賞的是Cloudflare，他們也提供Pages服務(wù)和自動(dòng)部署功能，而且配置其實(shí)比GitHub簡(jiǎn)單得多，在他們那里購買域名的話配置應(yīng)該也是很簡(jiǎn)單的。但我最后選擇的是Godaddy，為什么呢？因?yàn)镃loudflare注冊(cè)不了.moe域名，讓我感到非常遺憾。
另外在Godaddy購買的時(shí)候可以選擇買一個(gè)￥9/月的企業(yè)郵箱服務(wù)，讓你可以快速擁有一個(gè)（一堆）以自己的域名為主機(jī)名的郵箱！例如我的郵箱：karubonwaito@karubon.moe。
所以本文會(huì)以Godaddy為例，介紹如何購買和配置域名。
購買域名
訪問Godaddy官網(wǎng)。先注冊(cè)一個(gè)賬號(hào)，然后搜索你想要的域名（例如本站的域名karubon.moe），如果這個(gè)域名沒有被占用，你就會(huì)看到標(biāo)價(jià)和加入購物車的按鍵。
就像在網(wǎng)上購買一件商品一樣一路繼續(xù)，填寫個(gè)人信息和支付方式，看清楚訂單里的商品再付款，千萬不要花錢購買自己不想要的東西。
配置DNS
下單之后最好不要著急，先坐和放寬大概30-60分鐘，打打游戲看看書，然后再進(jìn)行下面的操作，否則你可能會(huì)遇到各種奇怪的bug。
在Godaddy的頁面中依序點(diǎn)擊頭像->我的產(chǎn)品->域名->管理全部，進(jìn)入域名總覽頁面。
進(jìn)入域名總覽頁面后，你應(yīng)該能看到你剛剛買的域名，旁邊還有到期日期。沒有到期日期的話就再等等，不要急著操作（）。
點(diǎn)擊你剛買的域名，進(jìn)入到對(duì)應(yīng)的管理頁面，點(diǎn)擊DNS，進(jìn)入DNS記錄欄，你應(yīng)該能看到里面有幾條預(yù)設(shè)的記錄。把里面唯一的一條類型為A、數(shù)據(jù)/值為“停放”的記錄刪除，然后錄入下面記錄：
Type Name Valve TTL
A @ 185.199.108.153 默認(rèn)
A @ 185.199.109.153 默認(rèn)
A @ 185.199.110.153 默認(rèn)
A @ 185.199.111.153 默認(rèn)
AAAA @ 2606:50c0:8000::153 默認(rèn)
AAAA @ 2606:50c0:8001::153 默認(rèn)
AAAA @ 2606:50c0:8002::153 默認(rèn)
AAAA @ 2606:50c0:8003::153 默認(rèn)
配置好后，我們?nèi)ヅ渲肎itHub Page。
配置GitHub Page
在博客文件根目錄的source文件夾中創(chuàng)建一個(gè)名為“CNAME”的文件，注意這個(gè)文件沒有后綴名。在文件中填入且僅填入你的域名，不加https，例如：
這能避免在下一次部署博客時(shí)CNAME文件被意外刪除導(dǎo)致你無法通過域名訪問網(wǎng)站。
在GitHub網(wǎng)頁上打開Page倉庫的Page設(shè)置，在Custom domain選項(xiàng)中填入你的域名，同樣不加https，然后保存，輸入框的下方應(yīng)該會(huì)出現(xiàn)DNS測(cè)試的提示，沒有就刷新頁面。例如：
如果一切正常，會(huì)出現(xiàn)綠鉤和DNS check successful?，F(xiàn)在你可以通過這個(gè)域名訪問你的網(wǎng)站。
但是你可能很快注意到，在你訪問網(wǎng)站時(shí)，瀏覽器會(huì)提示不安全。這是因?yàn)榫W(wǎng)站沒有配置SSL證書。這個(gè)時(shí)候不要著急，先坐和放寬大概30-60分鐘（），然后回到Page倉庫的Page設(shè)置頁勾選Enforce HTTPS選項(xiàng)，GitHub Page會(huì)自動(dòng)為你配置證書。如果你來得太早，你可能會(huì)遇到這個(gè)選項(xiàng)勾不上的問題。
參考資料
Hexo官方中文文檔(https://hexo.io/zh-cn/docs/)
快速搭建個(gè)人博客——保姆級(jí)教程(https://pdpeng.github.io/2022/01/19/setup-personal-blog)
利用Github Actions自動(dòng)部署Hexo博客(https://sanonz.github.io/2020/deploy-a-hexo-blog-from-github-actions/)文章來源：http://www.zghlxwxcb.cn/news/detail-835882.html
GitHub官方文檔(https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site)文章來源地址http://www.zghlxwxcb.cn/news/detail-835882.html
到了這里，關(guān)于基于Hexo在GitHub Pages上搭建博客的方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
