每個程式設計師都該有個自己的部落格,分享我的四種部落格搭建教程!

小傅哥 發表於 2021-01-25

每個程式設計師都該有個自己的部落格,分享我的四種部落格搭建教程!
作者:小傅哥
部落格:https://bugstack.cn

沉澱、分享、成長,讓自己和他人都能有所收穫!😄

一、前言

壓測了,小傅哥一天能搭4個部落格!

好學、樂學、博學、恆學、會學和用學,學以致用。一起學習成長的很多同好以及我自己,都是同樣喜歡折騰的人。

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

就折騰部落格而言,在大學開始就不停的折騰。從一個網頁能被宿舍人訪問、被校友訪問、被家人看到,那個興奮勁還是十足的。哪怕是半夜也是一遍遍的折騰寫著html,雖然醜了吧唧的!


最近有不少粉絲問小傅哥,自己也想搭建個自己的部落格系統寫寫文章,但不知道怎麼弄。正好小傅哥也確實折騰過各種部落格的搭建,瞭解一些坑坑窪窪,算是給後面的司機開開路。

本文主要向大家介紹

  1. 4類靜態部落格,hexo、docsify、jekyll、vuepress,的差異和特點
  2. 在 GitPage 上部署自己的部落格
  3. 獨立域名+個人伺服器,部署部落格
  4. 另外小傅哥把這些部落格腳手架統一放到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

http://hexo.blog.itedus.cn/

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo generate # 生成
hexo server   # 啟動服務
  • 特點
    • hexo的主題特別多,選擇性很高
    • 需要本地編譯後,把編譯檔案推送到Github
  • 其他
    • 因為需要編譯和推送,如果只是想簡單的寫部落格,不推薦使用。
    • 但如果想把靜態部落格部署到個人的伺服器,那麼就非常適合了。

2. docsify

http://docsify.blog.itedus.cn/

npm i docsify-cli -g # 全域性快速安裝
docsify init ./docs  # 初始化專案
docsify serve docs   # 本地預覽
  • 特點:非常簡單、乾淨,直接把工程檔案和md部落格推送到Github即可,不需要本地維護編譯。

3. jekyll

http://jekyll.blog.itedus.cn

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

http://vuepress.blog.itedus.cn

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。

IDEA 配置 FTP

  • Host:你購買的伺服器都會提供FTP功能,在裡面有host地址
  • User name:使用者名稱
  • Password:密碼
  • 配置完成後,在Deployment開啟的選單選項中,會有一個 Browse Remote Host 開啟以後可以在IDEA中看到了。

2. 上傳靜態網頁

上傳靜態網頁

  • 到這就可以直接上傳了你的靜態網頁到伺服器了
  • 其實你還可以基於 Github 的 Webhooks 配置自動推送,但整體配置和實現的內容比較多

五、總結

  • 與CSDN、掘金、思否、開源中國等提供的部落格相比,自己維護的部落格開發還是需要一些時間精力和運營成本的。但如果想給自己的知識一個實踐的機會,就值得折騰。
  • hexo、docsify、jekyll、vuepress,四類部落格各有自己的特點,有的需要編譯上傳,有的直接推送Github即可。但想有自己的域名和整體的體驗,就需要購買伺服器和備案域名。
  • 本篇文章只為送給那些想折騰一下的夥伴提供一些可實現的路徑,但這條路徑上如果你想真的搭出一個稱心如意的部落格,要搞的東西還很多。甚至你會像我一樣折騰到公眾號開發與部落格聯動等等,好!助力你做個喜歡折騰的人!

六、系列推薦