前言
OK,我也來造輪子了
部落格系統從一開始用WordPress,再到後來用hexo、hugo之類的靜態部落格生成放github託管,一直在折騰
折騰是為了更好解決問題,最終還是打算自己花時間搞一個好了
本系列文章將記錄部落格的開發過程~ 將會持續更新,歡迎關注~
後端基於最新的.Net6
和Asp.Net Core
框架,遵循RESTFul介面規範,前端基於Vue
+ElementUI
開發,可作為 .Net Core 入門專案學習~
為啥要自己開發部落格
- 找不到一個讓我滿意的線上部落格
- 線上寫部落格體驗不如在本地用typora寫
- 寫公眾號推文的話注意力會分散一部分到如何寫得吸引讀者而不是文章本身
- 自己的網站才有完整的控制權,不會被垃圾平臺新增不良資訊汙染
整體設計
雖然部落格沒啥技術含量,但還是要說一下我的想法
前面說到自己開發部落格的原因有一點是我喜歡在本地用typora寫部落格,但markdown作為一種純文字檔案,有一個短板就是圖片資源,無論是使用圖床還是連結到本地,在釋出的時候都有一定的麻煩。
圖床可能失效,我還是習慣把資源放在本地可以自己掌握,但放在本地的話,要釋出到部落格園、公眾號這類平臺就免不了要一張張上傳圖片,很麻煩。
靜態部落格生成器可以把markdown轉換成HTML然後放在github或者gitee託管,但前者國內幾乎沒法訪問,後者自定義域名需要付費,加上現在管控嚴格,已經沒法開啟gitee pages了…
結合上述,我開發的部落格最核心的一點就是要支援本地的markdown以及本地圖片,要原封不動的利用我現有的幾百個markdown文件來構建一個部落格。
我不想做一個靜態部落格生成器,限制太大了,而且很多功能例如評論互動、更新推送等沒辦直接支援。
所以思路已經很明確了,這個部落格需要讀取本地的markdown文件,在不修改原有文件的基礎上,將文件內容匯入資料庫中,同時收集文件裡的資原始檔(圖片)。
然後部落格前臺為了更好的SEO效果,而且也很簡單,使用後端渲染技術,不需要前後端分離;
部落格資料都儲存在資料庫裡,當然需要一個管理後臺,這個後臺就做成前後端分離的單頁應用好了。
PS: 本來只考慮本地寫完上傳,後面又加了線上編輯功能,可以滿足基本的文章編輯功能,體驗還行
功能要求
所以總結下來,本專案開發的部落格需要具備以下功能:
- 本地markdown文章批量上傳匯入,根據目錄結構解析文章分類(支援多級分類巢狀),解析markdown中的圖片並匯入到網站目錄中
- 本地攝影作品批量上傳,讀取圖片EXIF資訊並匯入
- 可以配置的部落格主頁(展示置頂和置頂的文章、圖片、分類)
- 程式碼片段編輯與分享功能
- 後臺需要完整的文章、分類、圖片、程式碼片段編輯功能
- 部落格前臺需要有將文章快捷發表到微信公眾號、知乎專欄、部落格園、掘金等平臺的功能
OK,大概就這些了~ 更多功能可能後面想到了就加上~
技術選型
後端本來Django是最佳選擇,自帶管理後臺,開發這類CMS系統最合適不過了。
然而我最近C#寫得很順手,也一直在學習AspNetCore這個高效能的web框架,覺得挺好用的,造輪子不能用太簡單的工具來造,不然就失去挑戰性也學不到太多新東西了… 於是就確定是AspNetCore了
前端選擇之前用過的vue,前端技術棧除了不久前學了一點React之外就沒怎麼更新,所以先湊合一下快速實現,後面再考慮用blazor或者flutter之類好玩的新技術來重構~
所以很明確了
- 後端:C# + AspNetCore
- ORM:FreeSQL
- 部落格前臺:Bootstrap + Vue + editor.md + bootswatch
- 管理端:Vue + Vuex + VueRouter
- 管理端UI:SCSS + ElementUI
部落格截圖
放幾個截圖咯
部落格主頁
文章列表
攝影頁面(雖然現在還沒把拍的照片放上去就是了)
管理後臺主頁
後臺文章列表
文章編輯介面
後臺圖片列表
篇幅關係就放這些圖片了~
部落格馬上就部署上線了,到時直接上demo連結!