天天看點

基于.NetCore開發部落格項目 StarBlog - (1) 為什麼需要自己寫一個部落格?

系列文章

  • 基于.NetCore開發部落格項目 StarBlog - (1) 為什麼需要自己寫一個部落格?
  • 基于.NetCore開發部落格項目 StarBlog - (2) 環境準備和建立項目
  • 基于.NetCore開發部落格項目 StarBlog - (3) 模型設計
  • 基于.NetCore開發部落格項目 StarBlog - (4) markdown部落格批量導入
  • 基于.NetCore開發部落格項目 StarBlog - (5) 開始搭建Web項目
  • 基于.NetCore開發部落格項目 StarBlog - (6) 頁面開發之部落格文章清單
  • 基于.NetCore開發部落格項目 StarBlog - (7) 頁面開發之文章詳情頁面
  • 基于.NetCore開發部落格項目 StarBlog - (8) 分類層級結構展示
  • 基于.NetCore開發部落格項目 StarBlog - (9) 圖檔批量導入
  • 基于.NetCore開發部落格項目 StarBlog - (10) 圖檔瀑布流
  • 基于.NetCore開發部落格項目 StarBlog - (11) 實作通路統計
  • 基于.NetCore開發部落格項目 StarBlog - (12) Razor頁面動态編譯
  • ...

前言

OK,我也來造輪子了

部落格系統從一開始用WordPress,再到後來用hexo、hugo之類的靜态部落格生成放github托管,一直在折騰

折騰是為了更好解決問題,最終還是打算自己花時間搞一個好了

本系列文章将記錄部落格的開發過程~ 将會持續更新,歡迎關注~

後端基于最新的

.Net6

Asp.Net Core

架構,遵循RESTFul接口規範,前端基于

Vue

+

ElementUI

開發,可作為 .Net Core 入門項目學習~

部落格項目的開發已經基本完成,項目代碼完全開源,有興趣的朋友可以點個star~

  • 部落格後端+前台項目位址:https://github.com/Deali-Axy/StarBlog
  • 管理背景前端項目位址:https://github.com/Deali-Axy/StarBlog-Admin

為啥要自己開發部落格

  • 找不到一個讓我滿意的線上部落格
  • 線上寫部落格體驗不如在本地用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

部落格截圖

放幾個截圖咯

部落格首頁

基于.NetCore開發部落格項目 StarBlog - (1) 為什麼需要自己寫一個部落格?

文章清單

基于.NetCore開發部落格項目 StarBlog - (1) 為什麼需要自己寫一個部落格?

攝影頁面(雖然現在還沒把拍的照片放上去就是了)

基于.NetCore開發部落格項目 StarBlog - (1) 為什麼需要自己寫一個部落格?

管理背景首頁

基于.NetCore開發部落格項目 StarBlog - (1) 為什麼需要自己寫一個部落格?

背景文章清單

基于.NetCore開發部落格項目 StarBlog - (1) 為什麼需要自己寫一個部落格?

文章編輯界面

基于.NetCore開發部落格項目 StarBlog - (1) 為什麼需要自己寫一個部落格?

背景圖檔清單

基于.NetCore開發部落格項目 StarBlog - (1) 為什麼需要自己寫一個部落格?

篇幅關系就放這些圖檔了~

部落格馬上就部署上線了,到時直接上demo連結!

微信公衆号:「程式設計實驗室」

專注于網際網路熱門新技術探索與團隊靈活開發實踐,包括架構設計、機器學習與資料分析算法、移動端開發、Linux、Web前後端開發等,歡迎一起探讨技術,分享學習實踐經驗。

繼續閱讀