5 分鐘搭建一個簡潔優(yōu)雅的靜態(tài)博客

你可能會問，現(xiàn)在寫作平臺都這么多了，還有必要自己折騰博客么？

一開始我遇到這個問題，總覺得自己弄個博客，太麻煩了，也不一定堅持寫下去，直接在平臺上寫得了。于是 CSDN、簡書、知乎上開始寫。

寫著寫著，我就發(fā)現(xiàn)他們有一些缺點。

為什么需要博客

CSDN 上的廣告太多，簡書雖然廣告比較少，但是一旦出現(xiàn)公眾號或一些涉及到 ID 推廣的，直接就限制只有自己可見了，知乎更嚴格，最開始有幾篇文章放了公眾號的二維碼，未及時修改，直接永久禁言了?？磥磉@些內(nèi)容平臺都很害怕公眾號，生怕公眾號引流，凡涉及公眾號引流的，都會被提示違規(guī)，公眾號平臺目前是我非常滿意的，但是沒有評論功能，一天只能發(fā)一篇，而且修改文章內(nèi)容受到限制，只能改 20 個字。

在平臺上寫文章，就好像在別人家的地盤上耕種，總有一種受各種約束的感覺，于是我還是決定自己搞個博客。需求就是簡潔、優(yōu)雅、能評論、能檢索、有標簽。

一開始我找到了用 django 開發(fā)博客系統(tǒng)的開源項目，就在本地部署用了下，還不錯，但是如果要真正用起來，還需要購買服務器，維護起來有一定的成本，于是就放棄了動態(tài)博客，轉(zhuǎn)而嘗試著靜態(tài)博客，先試了下 hexo，雖然也還行，但是我就是覺得不太美觀，然后嘗試了 VuePress，最終對 VuePress 的簡約風格特別滿意，目前我的博客「somenzz.github.io」使用的就是基于 VuePress 一款主題：vuepress-theme-reco。可以先瞄一下：

很多樣式是可以自定義的，比如說這個博客：

如果你心動了，想建一個屬于自己的靜態(tài)博客，那么請跟著我繼續(xù)向下看吧，非常簡單易上手。

前提條件

1、你需要會使用 Git 和 GitHub 的基本功能，比如拉取，提交，推送，創(chuàng)建分支，如果不會，請去這個網(wǎng)站^[1]學習。

2、你的電腦已經(jīng)安裝 Node.js，還沒有安裝的，請去官網(wǎng)^[2]安裝。

直接使用

主題 vuepress-theme-reco 也提供了快速生成博客的模版，但是沒有配置評論、閱讀量、SEO 等設置，我這里直接全部配置好，你直接從我的倉庫 fork，然后 clone 代碼到本地，替換一些配置文件的文本內(nèi)容，還有自己的一些圖片，就可以快速生成屬于自己的靜態(tài)博客。

基于這個倉庫進行?https://github.com/somenzz/blog-template.git^[3]。

以下是操作步驟，非常簡單。

1. 克隆倉庫到本地。

git?clone?https://github.com/somenzz/blog-template.git

2. 運行看效果，修改成自己滿意的配置。

cd?blog-template
npm?install?&&?npm?run?dev

配置文件位于為?docs/.vuepress，請逐行檢查，把博客名稱，描述，圖片位置，顏色配置等，改成自己滿意的的即可。

評論取的 appId、appKey 見?docs/.vuepress/config/theme/index.js?文件，請先去?valine^[4]，申請自己的 appId 及 appKey。

3. 寫博客。

cd?blog-template
vi?docs/blog/2021/blog.md
npm?run?build?#生成靜態(tài)文件，一般在?public?目錄下，該目錄可以部署到服務器，使用?nginx?驅(qū)動

4. 提交到自己的 xxx.github.io 倉庫。

先在 github 上創(chuàng)建一個 xxx.github.io 倉庫

cd?blog-template/public
git?init
git?add?.
git?commit?-m?"add?article"
git?push?--force?https://github.com/xxx/xxx.github.io.git?master?#可以強制提交，這個倉庫僅保留靜態(tài)文件

push 之后去 xxx.github.io 倉庫的設置頁面，設置 githup pages 指定 master 分支的 root 路徑即可。

看到一些人會使用同一個倉庫設置兩個分支，比如說 master 用于寫博客，gh-pages 用于保存靜態(tài)資源。

我反對這種做法，因為這違背了 github 分支的用途，一般 master 分支不夠用的時候，我們創(chuàng)建 develop 分支，用于開發(fā)時，修改任何代碼不會影響 master 分支，開發(fā)、測試完成，形成穩(wěn)定版本，再將 develop 分支合并到 master 分支，其實 master 和 develop 就是同一個倉庫的兩個指針，指向不同的時間點，所謂的合并就是將 master 的指針指向 develop 的位置。

而本應用中 master 存放些博客的腳手架，如 md 文件，VuePress 等配置信息，gh-pages 只存放靜態(tài)文件，兩個倉庫的文件沒有任何共同之處，應該使用兩個倉庫，而不是兩個分支。而且就算用，這兩個分支也永遠沒有合并的可能，何況這樣做相當麻煩，每次提交到 gh-pages 你都需要先切換到 gh-pages 分支，然后將 master 分支下的?.git文件夾先移走，提交完在移動回來。

博客生成的 public 目錄，也可以再部署到 gitee pages，或自己的服務器，也可以同時部署。

5. 訪問自己的博客，比如 https://somenzz.github.io

6. 如果需要提交 GitHub 后自動部署，請參考我的文章?GitHub Actions入門教程：自動化部署靜態(tài)博客

最后

靜態(tài)博客部署是 0 成本，高效率，無需擔心網(wǎng)絡安全等問題，值得每一個寫作者嘗試，省下的精力可以專心寫作，此外，你也可以申請一個個性的域名直接指向 xxx.github.io 這個網(wǎng)站，比如我的 https://somenzz.cn 。

如果覺得本文不錯，歡迎關(guān)注我的公眾號「Python七號」，有任何問題，都可以公眾號聊天界面直接咨詢哦，我會第一時間回復。

參考資料