作者：小傅哥
部落格：https://bugstack.cn
沉澱、分享、成長，讓自己和他人都能有所收穫！?
一、前言
壓測了，小傅哥一天能搭4個部落格！
好學、樂學、博學、恆學、會學和用學，學以致用。一起學習成長的很多同好以及我自己，都是同樣喜歡折騰的人。
最早大家都喜歡倒騰自己的QQ空間，裝修的各式各樣，可那炫耀。但終究這個QQ空間裡面，還有很多東西不能讓自己隨意擺弄。不知道是不是此類好奇和愛好，讓很多人走上了程式設計開發的道路。
就折騰部落格而言，在大學開始就不停的折騰。從一個網頁能被宿舍人訪問、被校友訪問、被家人看到，那個興奮勁還是十足的。哪怕是半夜也是一遍遍的折騰寫著html，雖然醜了吧唧的！
最近有不少粉絲問小傅哥，自己也想搭建個自己的部落格系統寫寫文章，但不知道怎麼弄。正好小傅哥也確實折騰過各種部落格的搭建，瞭解一些坑坑窪窪，算是給後面的司機開開路。
本文主要向大家介紹：
- 4類靜態部落格，hexo、docsify、jekyll、vuepress，的差異和特點
- 在 GitPage 上部署自己的部落格
- 獨立域名+個人伺服器，部署部落格
- 另外小傅哥把這些部落格腳手架統一放到Github倉庫，方便大家使用時候可以更方便。關注公眾號：bugstack蟲洞棧，回覆：部落格系統
有了這些參考，大家就可以選擇適合自己的部落格系統了，開心的寫部落格。
二、你要準備的東西
- 簡單記錄：Github賬號或者Gitee賬號，使用兩家的免費靜態網頁託管服務即可。
- 繫結域名：如果你想通過自己的域名訪問部落格，Github與Gitee都支援配置，但Gitee需要付費。不過Gitee對於國內的訪問速度要好一些。
- 訪問速度：當你的部落格想被更多人訪問並且也在意網頁的開啟速度和體驗，那麼就需要一個獨立的伺服器和域名了。這個伺服器可以部署靜態網頁即可
綜上，是每一個人建部落格的不同目的和需要的內容，按需選擇即可。
另外，GitPage配置參考：https://docsify.js.org/#/zh-cn/deploy 在Github的配置中，可以選擇根目錄和docs兩個資料夾，作為靜態部落格的倉庫。所以在選擇下面四類部落格中，都是把docs資料夾預留出來，方便使用。
三、4種部落格的搭建
- 小傅哥把四類比較常用的部落格，原始碼部分放到這個集中的倉庫，方便大家在使用的時候直接克隆走。
- 關於這四類部落格的建設，會在以後陸續的完善內容。如果你感興趣也可以參與到專案中。
- 下載地址：https://github.com/BlogGuide
1. hexo
- 介紹：Hexo 是一個快速、簡潔且高效的部落格框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。
- 官網：https://hexo.bootcss.com
- 案例：http://hexo.blog.itedus.cn
- 原始碼：https://github.com/BlogGuide/hexo.blog.github.io - 克隆到自己的倉庫
- 命令：
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo generate # 生成
hexo server # 啟動服務
- 特點：
- hexo的主題特別多，選擇性很高
- 需要本地編譯後，把編譯檔案推送到Github
- 其他：
- 因為需要編譯和推送，如果只是想簡單的寫部落格，不推薦使用。
- 但如果想把靜態部落格部署到個人的伺服器，那麼就非常適合了。
2. docsify
- 介紹：docsify 可以快速幫你生成文件網站。不同於 GitBook、Hexo 的地方是它不會生成靜態的
.html檔案，所有轉換工作都是在執行時。如果你想要開始使用它，只需要建立一個index.html就可以開始編寫文件並直接部署在 GitHub Pages。 - 官網：https://docsify.js.org/#/zh-cn
- 案例：http://docsify.blog.itedus.cn
- 原始碼：https://github.com/BlogGuide/docsify.blog.github.io - 克隆到自己的倉庫
- 命令：
npm i docsify-cli -g # 全域性快速安裝
docsify init ./docs # 初始化專案
docsify serve docs # 本地預覽
- 特點：非常簡單、乾淨，直接把工程檔案和md部落格推送到Github即可，不需要本地維護編譯。
3. jekyll
- 介紹：一個簡單的，基於引導的主題。特別是對於那些喜歡在網站上展示自己的專案並喜歡做筆記的開發人員。還有一些神奇的特徵需要發現。
- 官網：https://github.com/DONGChuan/Yummy-Jekyll
- 案例：http://jekyll.blog.itedus.cn
- 原始碼：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!
- 特點：這個部落格的主題其實有點重，在寫部落格的時候需要人工維護的內容較多。但同樣這個主題有一個好處就是如果使用Github，那麼就直接把專案和部落格傳到Github即可，不需要本地編譯。
4. vuepress
- 介紹：VuePress 由兩部分組成：第一部分是一個極簡靜態網站生成器 (opens new window)，它包含由 Vue 驅動的主題系統和外掛 API，另一個部分是為書寫技術文件而優化的預設主題，它的誕生初衷是為了支援 Vue 及其子專案的文件需求。
- 官網：https://vuepress.vuejs.org/zh
- 案例：http://vuepress.blog.itedus.cn
- 原始碼：https://github.com/BlogGuide/vuepress.blog.github.io - 克隆到自己的倉庫
- 命令：
npm install -g vuepress # 安裝
vuepress build docs # 構建，生成html，可以用於部署
vuepress dev docs # 啟動，http://localhost:8080/
- 特點：基於vue實現的部落格，功能很多適合擴充套件。很適合部署到個人獨立的伺服器，如果是部署到Github，可以參考原始碼，在一個工程中提供docs用於存放生成的網頁，這樣在Github就不需要再維護額外的分支。
四、部署到自己的伺服器
- 部落格：vuepress
- 軟體：Idea、ftp[可選]
- 環境：域名、備案、SSL證照、伺服器
vuepress的部落格專案放IDEA中開啟和日常維護就可以了，而且IDEA只提供了FTP的功能，也可以方便上傳服務到遠端伺服器。
關於域名和伺服器等需要購買，另外還需要備案才能正常使用。如果你想域名有一個小鎖頭的安全提示，則需要ssl證照，一般可以免費獲取。
其實小傅哥已經有一個 bugstack.cn 部落格，本次是又申請了一個新的域名 itedus.cn 想著再搭建一個玩玩，折騰！
1. IDEA 配置 FTP
在IDEA的選單欄上，Tools 中有一個 Deployment 的選項，可以配置FTP以及其他SFTP。
- Host：你購買的伺服器都會提供FTP功能，在裡面有host地址
- User name：使用者名稱
- Password：密碼
- 配置完成後，在Deployment開啟的選單選項中，會有一個
Browse Remote Host開啟以後可以在IDEA中看到了。
2. 上傳靜態網頁
- 到這就可以直接上傳了你的靜態網頁到伺服器了
- 其實你還可以基於 Github 的 Webhooks 配置自動推送，但整體配置和實現的內容比較多
五、總結
- 與CSDN、掘金、思否、開源中國等提供的部落格相比，自己維護的部落格開發還是需要一些時間精力和運營成本的。但如果想給自己的知識一個實踐的機會，就值得折騰。
- hexo、docsify、jekyll、vuepress，四類部落格各有自己的特點，有的需要編譯上傳，有的直接推送Github即可。但想有自己的域名和整體的體驗，就需要購買伺服器和備案域名。
- 本篇文章只為送給那些想折騰一下的夥伴提供一些可實現的路徑，但這條路徑上如果你想真的搭出一個稱心如意的部落格，要搞的東西還很多。甚至你會像我一樣折騰到公眾號開發與部落格聯動等等，好！助力你做個喜歡折騰的人！