【原】每個程序員都該有個自己的博客，分享我的四種博客搭建教程！

小傅哥 2021-12-13

展開全文

作者：小傅哥
博客：https://

沉淀、分享、成長，讓自己和他人都能有所收獲！😄

一、前言

壓測了，小傅哥一天能搭4個博客！

好學(xué)、樂學(xué)、博學(xué)、恒學(xué)、會學(xué)和用學(xué)，學(xué)以致用。一起學(xué)習(xí)成長的很多同好以及我自己，都是同樣喜歡折騰的人。

最早大家都喜歡倒騰自己的QQ空間，裝修的各式各樣，可那炫耀。但終究這個QQ空間里面，還有很多東西不能讓自己隨意擺弄。不知道是不是此類好奇和愛好，讓很多人走上了編程開發(fā)的道路。

就折騰博客而言，在大學(xué)開始就不停的折騰。從一個網(wǎng)頁能被宿舍人訪問、被校友訪問、被家人看到，那個興奮勁還是十足的。哪怕是半夜也是一遍遍的折騰寫著html，雖然丑了吧唧的！

最近有不少粉絲問小傅哥，自己也想搭建個自己的博客系統(tǒng)寫寫文章，但不知道怎么弄。正好小傅哥也確實(shí)折騰過各種博客的搭建，了解一些坑坑洼洼，算是給后面的司機(jī)開開路。

本文主要向大家介紹：

4類靜態(tài)博客，hexo、docsify、jekyll、vuepress，的差異和特點(diǎn)
在 GitPage 上部署自己的博客
獨(dú)立域名+個人服務(wù)器，部署博客
另外小傅哥把這些博客腳手架統(tǒng)一放到Github倉庫，方便大家使用時候可以更方便。關(guān)注公眾號：bugstack蟲洞棧，回復(fù)：博客系統(tǒng)

有了這些參考，大家就可以選擇適合自己的博客系統(tǒng)了，開心的寫博客。

二、你要準(zhǔn)備的東西

簡單記錄：Github賬號或者Gitee賬號，使用兩家的免費(fèi)靜態(tài)網(wǎng)頁托管服務(wù)即可。
綁定域名：如果你想通過自己的域名訪問博客，Github與Gitee都支持配置，但Gitee需要付費(fèi)。不過Gitee對于國內(nèi)的訪問速度要好一些。
訪問速度：當(dāng)你的博客想被更多人訪問并且也在意網(wǎng)頁的打開速度和體驗(yàn)，那么就需要一個獨(dú)立的服務(wù)器和域名了。這個服務(wù)器可以部署靜態(tài)網(wǎng)頁即可

綜上，是每一個人建博客的不同目的和需要的內(nèi)容，按需選擇即可。

另外，GitPage配置參考：https://docsify./#/zh-cn/deploy 在Github的配置中，可以選擇根目錄和docs兩個文件夾，作為靜態(tài)博客的倉庫。所以在選擇下面四類博客中，都是把docs文件夾預(yù)留出來，方便使用。

三、4種博客的搭建

小傅哥把四類比較常用的博客，源碼部分放到這個集中的倉庫，方便大家在使用的時候直接克隆走。
關(guān)于這四類博客的建設(shè)，會在以后陸續(xù)的完善內(nèi)容。如果你感興趣也可以參與到項(xiàng)目中。
下載地址：https://github.com/BlogGuide

1. hexo

介紹：Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內(nèi)，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁。
官網(wǎng)：https://hexo.
案例：http://hexo.blog.
源碼：https://github.com/BlogGuide/hexo.blog.github.io - 克隆到自己的倉庫
命令：

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo generate # 生成
hexo server   # 啟動服務(wù)

特點(diǎn)：
- hexo的主題特別多，選擇性很高
- 需要本地編譯后，把編譯文件推送到Github
其他：
- 因?yàn)樾枰幾g和推送，如果只是想簡單的寫博客，不推薦使用。
- 但如果想把靜態(tài)博客部署到個人的服務(wù)器，那么就非常適合了。

2. docsify

介紹：docsify 可以快速幫你生成文檔網(wǎng)站。不同于 GitBook、Hexo 的地方是它不會生成靜態(tài)的 .html 文件，所有轉(zhuǎn)換工作都是在運(yùn)行時。如果你想要開始使用它，只需要創(chuàng)建一個 index.html 就可以開始編寫文檔并直接部署在 GitHub Pages。
官網(wǎng)：https://docsify./#/zh-cn
案例：http://docsify.blog.
源碼：https://github.com/BlogGuide/docsify.blog.github.io - 克隆到自己的倉庫
命令：

npm i docsify-cli -g # 全局快速安裝
docsify init ./docs  # 初始化項(xiàng)目
docsify serve docs   # 本地預(yù)覽

特點(diǎn)：非常簡單、干凈，直接把工程文件和md博客推送到Github即可，不需要本地維護(hù)編譯。

3. jekyll

介紹：一個簡單的，基于引導(dǎo)的主題。特別是對于那些喜歡在網(wǎng)站上展示自己的項(xiàng)目并喜歡做筆記的開發(fā)人員。還有一些神奇的特征需要發(fā)現(xiàn)。
官網(wǎng)：https://github.com/DONGChuan/Yummy-Jekyll
案例：http://jekyll.blog.
源碼：https://github.com/BlogGuide/jekyll.blog.github.io - 克隆到自己的倉庫
命令：

Fork code and clone
Run bower install to install all dependencies in bower.json
Run bundle install to install all dependencies in Gemfile
Update _config.yml with your own settings.
Add posts in /_posts
Commit to your own Username.github.io repository.
Then come back to star this theme!

特點(diǎn)：這個博客的主題其實(shí)有點(diǎn)重，在寫博客的時候需要人工維護(hù)的內(nèi)容較多。但同樣這個主題有一個好處就是如果使用Github，那么就直接把項(xiàng)目和博客傳到Github即可，不需要本地編譯。

4. vuepress

介紹：VuePress 由兩部分組成：第一部分是一個極簡靜態(tài)網(wǎng)站生成器 (opens new window)，它包含由 Vue 驅(qū)動的主題系統(tǒng)和插件 API，另一個部分是為書寫技術(shù)文檔而優(yōu)化的默認(rèn)主題，它的誕生初衷是為了支持 Vue 及其子項(xiàng)目的文檔需求。
官網(wǎng)：https://vuepress.vue/zh
案例：http://vuepress.blog.
源碼：https://github.com/BlogGuide/vuepress.blog.github.io - 克隆到自己的倉庫
命令：

npm install -g vuepress # 安裝
vuepress build docs     # 構(gòu)建，生成html，可以用于部署
vuepress dev docs       # 啟動，http://localhost:8080/

特點(diǎn)：基于vue實(shí)現(xiàn)的博客，功能很多適合擴(kuò)展。很適合部署到個人獨(dú)立的服務(wù)器，如果是部署到Github，可以參考源碼，在一個工程中提供docs用于存放生成的網(wǎng)頁，這樣在Github就不需要再維護(hù)額外的分支。

四、部署到自己的服務(wù)器

博客：vuepress
軟件：Idea、ftp[可選]
環(huán)境：域名、備案、SSL證書、服務(wù)器

vuepress的博客項(xiàng)目放IDEA中打開和日常維護(hù)就可以了，而且IDEA只提供了FTP的功能，也可以方便上傳服務(wù)到遠(yuǎn)程服務(wù)器。

關(guān)于域名和服務(wù)器等需要購買，另外還需要備案才能正常使用。如果你想域名有一個小鎖頭的安全提示，則需要ssl證書，一般可以免費(fèi)獲取。

其實(shí)小傅哥已經(jīng)有一個博客，本次是又申請了一個新的域名想著再搭建一個玩玩，折騰！

1. IDEA 配置 FTP

在IDEA的菜單欄上，Tools 中有一個 Deployment 的選項(xiàng)，可以配置FTP以及其他SFTP。

IDEA 配置 FTP

Host：你購買的服務(wù)器都會提供FTP功能，在里面有host地址
User name：用戶名
Password：密碼
配置完成后，在Deployment打開的菜單選項(xiàng)中，會有一個 Browse Remote Host 打開以后可以在IDEA中看到了。

2. 上傳靜態(tài)網(wǎng)頁

上傳靜態(tài)網(wǎng)頁

到這就可以直接上傳了你的靜態(tài)網(wǎng)頁到服務(wù)器了
其實(shí)你還可以基于 Github 的 Webhooks 配置自動推送，但整體配置和實(shí)現(xiàn)的內(nèi)容比較多

五、總結(jié)

與CSDN、掘金、思否、開源中國等提供的博客相比，自己維護(hù)的博客開發(fā)還是需要一些時間精力和運(yùn)營成本的。但如果想給自己的知識一個實(shí)踐的機(jī)會，就值得折騰。
hexo、docsify、jekyll、vuepress，四類博客各有自己的特點(diǎn)，有的需要編譯上傳，有的直接推送Github即可。但想有自己的域名和整體的體驗(yàn)，就需要購買服務(wù)器和備案域名。
本篇文章只為送給那些想折騰一下的伙伴提供一些可實(shí)現(xiàn)的路徑，但這條路徑上如果你想真的搭出一個稱心如意的博客，要搞的東西還很多。甚至你會像我一樣折騰到公眾號開發(fā)與博客聯(lián)動等等，好！助力你做個喜歡折騰的人！