寫給一個想要擁有自己的博客，卻沒有資金的小白和小學時的自己
前言#
雖然，獨立博客的時代已經過去，越來越多的人們開始在大平台上發布自己的文章
雖然，這些平台的流量能夠為這些博主們創造收益
但是，擁有一個自己的博客，意味著它不僅屬於自己，而且需要自己一步步為它添磚加瓦
比如文章的語言、界面的佈局、功能多少、搜索引擎收錄，都需要自己一點點完善
最後，看到自己的网站一步步走到現在，內心也會有一種自豪與欣慰的感覺
希望看到這篇文章的所有人，不管是學生還是其它人，都能擁有一個完全屬於自己的博客，並且用心去建設其中的內容
類似於此處的引用一般會是一些注意事項，在閱讀前記得多注意一些
會提到的一些東西#
- Hexo
- 靜態博客
- Serverless（無伺服器）
- GitHub Pages
- Hexo 主題
步驟#
安裝 Node.js#
啥是 Node.js ？
Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境，使用了一個事件驅動、非阻塞式 I/O 模型，讓 JavaScript 運行在伺服器端的開發平台，它讓 JavaScript 成為與 PHP、Python、Perl、Ruby 等伺服器端語言平起平坐的腳本語言
—— 百度百科
上邊的這一個引用你可以忽略，看正文部分即可
首先，前往 Node.js 官網 下載安裝包
選擇長期維護版下載。如果你選擇最新嘗鮮版也無傷大雅，只是你有可能會遇到一些 Bug
如果你是 Windows 系統，下載下來的安裝包後綴應為 .msi
macOS 下載
.pkg後綴Linux 標籤頁右方小叉
打開下載下來的安裝程序，一路回車（開始的時候需要同意協議）
等待安裝程序安裝完成後，打開命令行或者終端，輸入 node
如果返回的內容與你安裝的版本一致那麼就代表安裝成功了
後續操作都會在終端進行輸入
Node.js 安裝成功以後默認會隨附
npm包管理器，會在之後用到它的全稱是
Node Package Manager，你可以理解成手機上的應用商店
國內使用 npm 會很慢，你可以考慮切換為 taobao 鏡像源
npm config set registry https://registry.npmmirror.com
你可以在安裝完 Node.js 後安裝 yarn 。Facebook 出品，比 npm 更快速的包管理器
npm install -g yarn
Git 和 GitHub#
安裝 Git#
Visual Studio Code ，簡稱 VS Code
目前最強大、最易用的編輯器，輕量、快速（
宇宙第一編輯器）但它不是 VS ， VS 指的是 Visual Studio ，是集成開發環境（ IDE ）（
小白易讀：開發軟件用的）這玩意兒體積要比 VS Code 大一個量級
（微軟大法好）
先安裝 VS Code，這樣可以在安裝 Git 時設置 VS Code 為默認編輯器
Windows 10 / 11 用戶可在微軟商店（新版）下載
Git 是一個開源的分佈式版本控制系統，由 Linus Torvalds（同時也是 Linux 的作者）為了管理 Linux 開發而開發。
簡而言之，是一個版本管理工具。譬如設計師設計好了第三版的海報，客戶卻說還是要第一版吧，這時便可以通過 Git 快速回退到最初的版本。
你只需要把每次更改的狀態（Git 會自動進行檢測，你只要掌握基礎的幾條命令就可以了）告訴 Git，而不需要每個版本都保存一份壓縮包，既方便也能大大節約空間。
下載 Git 並安裝，速度太慢的話可以試試國內的軟件分發網站（注意要找大廠如騰訊，千萬不要選高速下載之類的東西）
註冊 GitHub#
這部分你可以等到在自己電腦上測試完成後，打算部署到線上的時候再翻回來看
從字面看，GitHub 便與 Git 有著密不可分的關係。
Git在必應翻譯中是蠢貨的意思，而Hub則為樞紐所以 GitHub 便是
“蠢貨樞紐” 的意思（大霧（劃掉））GitHub 是全球最大的開源項目與代碼托管網站，也是眾多開發者交流的平台，同時也是全球最大的
同性交友網站而其代碼托管本身的實現正是基於上邊的 Git
註冊 GitHub 賬號（雖然全英文無翻譯，但是並不難理解，只需記住最常用的選項即可，而且官方文檔有中文翻譯）
註冊時的英文 ID 將會成為你可以使用的免費域名前綴（比如我的 GitHub ID 是 Big-Cake-jpg ，那麼我可以使用的免費域名就是 big-cake-jpg.github.io ）
為啥是這個沒中文還天天打不開的東西？
對於平民來說，第一次搭建網站時也許手頭並沒有錢去買伺服器和域名
而 GitHub 則提供了 GitHub Pages 這一免費服務
用戶們可以利用這一服務部署靜態站點
點右上角的 + => New repository 或者左側邊欄裡的綠色按鈕新建一個倉庫
創建倉庫的頁面。我這裡因為有同名倉庫所以無法創建
倉庫名稱務必像上圖中 用戶名.github.io 一樣，用戶名為英文，大小寫可以不區分
為啥子必須要用這個倉庫名啊……
如果你沒有自備的域名，這樣做可以讓 GitHub Pages 將其作為你的專屬域名。當然，如果你有自己的域名，可以綁定上去
點擊 Create repository
安裝 Hexo#
- GitHub：https://github.com/hexojs/hexo
- 官方文檔 有較高的理解能力（
語文 90 分以上）也可以看官方文檔（反正我看不懂)
Hexo 是一個快速、簡潔、強大的博客框架，基於 Node.js，同樣托管與 GitHub 上，擁有良好的生態。你可以用它快速生成靜態頁面，可以使用他人的主題與插件，也可自己定制
其它常用的博客框架還有 WordPress、Typecho等，但它們往往需要購置自己的伺服器，而無法靜態化地部署到 GitHub Pages。當然，功能和靈活性也會大大提升。
靜態化站點還有一個優勢是訪問速度往往更快。
靜態網站生成器還有 VuePress 等，但這些多為寫文檔而量身定制，關於博客的主題與解決辦法等會少得多
先在你喜歡的地方創建一個文件夾，起一個喜歡的名字，然後右鍵這個文件夾選擇 Git Bash Here
在打開的終端裡輸入如下命令：
npm install hexo-cli -g
install：安裝
hexo-cli：hexo的終端工具，用於生成後面會用到的模版文件
-g：全局安裝，即在電腦任何地方都可使用
然後輸入：
hexo init 你的 GitHub 用戶名.github.io
hexo是因為之前安裝了hexo-cli這個包，所以我們能夠使用hexo這一命令
init初始化博客模版，後面的參數是將會新建的文件夾的名字，建議與倉庫名保持一致
cd 你的 GitHub 用戶名.github.io
npm install
# or
yarn install
hexo server
server 意思是告訴 Hexo 開啟本地測試伺服器。這樣的話，你就可以通過瀏覽器訪問 localhost:4000 看到效果了
按 Ctrl + C終止本地伺服器運行
至此，站點的基本框架已經搭建完成了
使用第三方 Hexo 主題#
Hexo 默認提供的主題是 hexo-theme-landscape
樣式簡單，功能少，所以大多數人並不會用默認主題
本處使用雲遊君的主題 hexo-theme-yun
本站的主題即為 hexo-theme-yun
當然，你也可以到 Themes｜Hexo 尋找其它主題使用，比如 hexo-theme-next
下載主題#
進入終端，確保路徑在你之前初始化的博客文件夾下（下面簡稱 Hexo 目錄），然後執行如下命令
「你知道嗎」可以在 VS Code 裡直接打開終端
yarn add hexo-theme-yun # npm install -g hexo-theme-yun
注意：hexo-theme-yun 從 v1.8 開始使用 npm 包分發，你需要按照文檔的步驟進行配置遷移
編輯 Hexo 配置#
右鍵 Hexo 文件夾，選擇 “使用 VS Code 打開”。此後操作都默認你處在該工作目錄中
在此前初始化操作建立的 Hexo 文件目錄下，會存在一個 _config.yml 文件
它是 Hexo 的配置文件，你可以在 配置｜Hexo 處查看各配置選項的意義
在這個文件中找到 theme 字段，將後邊的 landscape 修改為 yun
後邊的
yun根據你選擇的主題來設置，比如你使用hexo-theme-next，那麼將後面的字段設置為next一般來說，主題都會在使用文檔中聲明使用了什麼渲染器
如
hexo-theme-yun使用 pug 和 stylus 渲染器，而 Hexo 自帶的一般是 ejs 與 stylus，所以可能需要輸入下方命令安裝缺失的渲染器
npm install hexo-renderer-pug hexo-renderer-stylus
# 如果出了問題，可以試試 yarn 安裝
完成上述步驟以後，再次使用 hexo server 啟動測試伺服器，即可看到一個全新的頁面
自定義主題配置#
第一次啟動使用的是主題的默認配置，不一定符合你的心意
所以你可以根據自己的需求，對主題進行一些自定義
主題的默認配置文件放在了 source/主題/_config.yml
但是直接修改這個文件將導致以後主題更新升級麻煩得很
一般來說，主題的使用文檔將會給出這種情況的解決方案
如 hexo-theme-yun 會讓用戶在博客根目錄新建 _config.yun.yml
更多配置選項請參考主題文檔
生成站點的靜態文件並部署#
生成靜態文件#
直到現在為止，你之前的工作都是本地進行，你也許已經迫不及待想讓博客上線了
這時，便輪到 GitHub Pages 登場了
# 生成靜態文件
hexo generate
# 縮寫為 hexo g
當執行完成後，Hexo 目錄下會出現一個 public 文件夾，裡邊存放的是剛才生成的靜態文件
與遠程倉庫進行關聯#
然後執行如下命令初始化 Git 倉庫
git init #只需執行一次即可
部署之前，最好建立一個備份 Hexo 工作目錄的分支
git checkout -b hexo
完成後，所有的工作就都将在 hexo 分支進行
安裝 hexo-deployer-git 插件
npm install hexo-deployer-git
在 Hexo 配置文件 _config.yml （不是主題的）中配置
deploy:
type: git
repo: 你此前新建的倉庫的鏈接 # 比如：https://github.com/Big-Cake-jpg/big-cake-jpg.github.io
branch: master # 默認使用 master 分支
message: Update Hexo Static Content # 你可以自定義此次部署更新的說明
保存並部署
第一次部署可能需要 GitHub 賬號密碼，密碼輸入時不會出現星號，但是密碼已經輸入進去了
hexp deploy
#縮寫為 hexo d
等待 Git 推送完成後，在 GitHub 上依次打開 倉庫 => Settings => Pages
選擇分支（一般都是 master），點擊 save
等待幾秒鐘，打開 https://你的 GitHub 用戶名.github.io 就可以看到線上效果了
備份 Hexo 工作區以及自動部署#
備份 Hexo 工作區#
上邊的做法只是將生成的靜態文件部署到了雲端而已
為了方便在不同設備上寫作以及以防萬一，你的 Hexo 工作目錄也應該推送到 GitHub 倉庫備份
# 只需執行一次，這會與遠程倉庫建立一個連接
git remote add origin https://github.com/你的用戶名/你的用戶名.github.io.git
VS Code 中有比較方便的操作，它會在右側欄中的 “源代碼管理” 中顯示所有你修改過的文件
你可以在頂部的輸入框中輸入這次改了工作區的什麼文件之類的，然後按跟前的對勾即可提交到本地 Git 倉庫
然後再點擊最下方的藍色大條條中的一個帶俩箭頭的 “同步更改” 按鈕將 Hexo 工作區推送到 GitHub
自動部署#
時間長了，你會發現這樣還是不方便，在別的設備上你得再拉取一遍倉庫，如果碰巧你用的是手機 / 平板那更是只能干瞪眼
所以現在我們需要一個持續集成服務
本文中使用 GitHub Actions，自身便擁有倉庫的 Token ，不需要額外的配置，可直接使用
secrets.GITHUB_TOKEN
你可以參考 Hexo 官方文檔，也可以直接照抄我的 gh-pages.yml
記得把
branch的值改成自己存放 Hexo 工作區的分支名，刪掉algolia字段
當然，你還可以使用 Netlify、Vercel 等第三方服務
完成後，你的個人博客便基本搭建完成。你可以再對主題進行自定義，或者開始寫作
開始寫作#
文章#
輸入以下命令即可新建 xxx.md 文件
hexo net post xxx
為文章添加標籤 / 分類#
你可能需要先了解 Hexo 的 Front-matter
---
title: 手把手教你如何搭建屬於自己的 Hexo 博客
date: 2021-12-04 16:45:10
tags:
- GitHub
- Hexo
- 博客
categories:
- 大蛋糕的安利
---
你的文章內容
頁面#
自定義頁面在 Hexo 中是可以使用的，譬如直接在 source 下新建 HTML 進行編寫
也可以通過執行下邊的命令新建頁面（還是 Markdown，不過你可以直接在 Markdown 裡寫 HTML 的，同樣會渲染）
hexo new page xxx
FAQ#
有打算發視頻嗎？#
沒有打算，電腦被家人收了，不讓我動 QWQ
二是視頻製作比較麻煩，文章相對來說更加簡單
我想綁定我自己的域名（#
首先你得有個域名
將域名用 CNAME 解析到 你的名字.github.io（當然 A 記錄直接填 GitHub Pages 的 IP 也可以）
在 source 文件夾下新建 CNAME 文件（沒有後綴）並填入你的域名
然後部署一次即可
如果你後邊把這東西刪掉的話，隨後不包含它的部署將會把遠程倉庫裡的 CNAME 覆蓋掉
备案#
要用國內服務如 CDN，不备案是真的難於上青天
這裡的备案指的是 ICP 备案（就是每個國內網站頁腳掛的 “京 ICP 备 xxxxxxxxxx 号” 之類的
但國內备案都要求你有一台人家的國內伺服器，且購買時長至少 3 個月以上
需要注意的是：
確定域名可以备案（
moe之類的域名無法备案）關閉評論區
備註說明不得包含
交流字樣首頁不能含有其他網站直達鏈接
遵紀守法（那肯定）
你也可以直接下線網站，等备案成功以後再上線（以後偶爾會復查，相對寬鬆很多）
按照服務商的备案步驟一步步來即可
拿到 ICP 备案號以後頁腳必須清晰展示备案號，且指向 https://beian.miit.gov.cn
寫在最後#
個人博客可以用作許多用途，比如筆記本、回憶、創作、開發經驗、生活等等
多年後，再打開它看自己寫下的內容，回憶紛紛湧上心頭，多麼美好
希望大家的博客成功上線以後，能夠承載著自己的許多回憶、承載自己的人生，走得更遠