從零開始，個(gè)人博客網(wǎng)站制作的全過程記錄與經(jīng)驗(yàn)分享
本文目錄導(dǎo)讀：
在數(shù)字化時(shí)代,個(gè)人博客不僅是記錄生活、分享知識(shí)的平臺(tái)，也是展示個(gè)人品牌的重要窗口，無(wú)論是程序員、設(shè)計(jì)師、作家，還是普通愛好者，擁有一個(gè)屬于自己的博客網(wǎng)站都能帶來(lái)獨(dú)特的價(jià)值，對(duì)于新手來(lái)說，從零開始搭建一個(gè)博客可能會(huì)感到無(wú)從下手，本文將詳細(xì)記錄我從零開始制作個(gè)人博客網(wǎng)站的全過程，并分享其中的經(jīng)驗(yàn)與教訓(xùn)，希望能為同樣有興趣搭建博客的朋友提供參考。
明確需求與規(guī)劃
在動(dòng)手之前,首先要明確博客的定位和目標(biāo)。
1 博客的用途
- 個(gè)人記錄：記錄學(xué)習(xí)、生活、旅行等日常。
- 技術(shù)分享：發(fā)布編程、設(shè)計(jì)、數(shù)據(jù)分析等技術(shù)文章。
- 作品展示：設(shè)計(jì)師、攝影師、作家等展示個(gè)人作品。
- 商業(yè)用途：通過博客推廣產(chǎn)品或服務(wù)。
我的博客主要定位為技術(shù)分享+個(gè)人記錄，因此需要支持Markdown寫作、代碼高亮等功能。
2 選擇技術(shù)棧
搭建博客的方式有很多,常見的有：
- 靜態(tài)網(wǎng)站生成器（SSG）：如Hugo、Jekyll、Hexo（適合程序員）。 管理系統(tǒng)（CMS）**：如WordPress、Ghost（適合非技術(shù)用戶）。
- 純手寫HTML/CSS：靈活性高，但維護(hù)成本大。
我選擇了Hexo + GitHub Pages，因?yàn)镠exo基于Node.js，生成靜態(tài)頁(yè)面速度快，且GitHub Pages提供免費(fèi)托管。
搭建博客的技術(shù)實(shí)現(xiàn)
1 環(huán)境準(zhǔn)備
- 安裝Node.js（Hexo依賴Node.js環(huán)境）：
# 檢查Node.js是否安裝成功 node -v npm -v
- 安裝Hexo：
npm install -g hexo-cli
- 初始化博客項(xiàng)目：
hexo init my-blog cd my-blog npm install
- 本地預(yù)覽：
hexo server
訪問
http://localhost:4000即可看到默認(rèn)的Hexo博客。
2 選擇主題
Hexo有豐富的主題庫(kù)（Themes | Hexo），我選擇了Butterfly，因?yàn)樗С猪憫?yīng)式設(shè)計(jì)、暗黑模式，并且文檔完善。
安裝Butterfly主題：
npm install hexo-theme-butterfly
然后在_config.yml中配置：
theme: butterfly
3 配置博客基本信息
修改_config.yml文件：
description: 一個(gè)程序員的成長(zhǎng)筆記 author: YourName language: zh-CN timezone: Asia/Shanghai
4 部署到GitHub Pages
- 創(chuàng)建GitHub倉(cāng)庫(kù)（命名為
username.github.io，username是你的GitHub用戶名）。 - 安裝hexo-deployer-git：
npm install hexo-deployer-git --save
- 配置部署信息（
_config.yml）：deploy: type: git repo: https://github.com/username/username.github.io.git branch: main
- 生成靜態(tài)文件并部署：
hexo clean && hexo generate && hexo deploy
訪問
https://username.github.io即可看到你的博客！
優(yōu)化與進(jìn)階功能
1 自定義域名
如果想使用自己的域名（如example.com）：
- 在域名服務(wù)商（如阿里云、Cloudflare）添加CNAME記錄指向
username.github.io。 - 在博客根目錄的
source文件夾下創(chuàng)建CNAME文件，寫入域名：example.com - 重新部署博客。
2 添加評(píng)論系統(tǒng)
靜態(tài)博客默認(rèn)不支持動(dòng)態(tài)評(píng)論,可以集成第三方服務(wù)如Valine或Giscus（基于GitHub Discussions）。
以Giscus為例：
- 在GitHub上啟用Discussions功能。
- 訪問Giscus生成配置代碼。
- 在主題配置文件中添加Giscus的腳本。
3 SEO優(yōu)化
- 安裝SEO插件：
npm install hexo-autonofollow hexo-generator-sitemap --save
- 提交到搜索引擎（Google Search Console、Bing Webmaster Tools）。
4 備份與自動(dòng)化
為了避免數(shù)據(jù)丟失,可以將博客源碼備份到GitHub私有倉(cāng)庫(kù)，并使用GitHub Actions實(shí)現(xiàn)自動(dòng)部署。
遇到的坑與解決方案
1 部署后樣式丟失
問題：部署后發(fā)現(xiàn)CSS/JS加載失敗。
原因：_config.yml中的url未正確配置。
解決：
url: https://username.github.io root: /
2 圖片加載問題
問題：本地圖片在部署后無(wú)法顯示。
解決：
- 使用相對(duì)路徑：
 - 安裝
hexo-asset-image插件：npm install hexo-asset-image --save
3 國(guó)內(nèi)訪問GitHub Pages慢
解決方案：
- 使用Vercel或Netlify托管（免費(fèi)且速度更快）。
- 通過CDN加速（如Cloudflare）。
總結(jié)與建議
通過這次博客搭建,我學(xué)到了：
- 技術(shù)選型很重要：Hexo適合技術(shù)用戶，WordPress適合小白。
- 持續(xù)更新是關(guān)鍵：博客的價(jià)值在于內(nèi)容，定期更新才能吸引讀者。
- 備份必不可少：代碼和文章都要定期備份，避免數(shù)據(jù)丟失。
如果你也想搭建個(gè)人博客,不妨從Hexo + GitHub Pages開始，低成本、高自由度，還能學(xué)習(xí)Git和前端知識(shí)。
希望這篇記錄對(duì)你有所幫助,歡迎訪問我的博客交流：[你的博客鏈接]
（全文約1500字）
