系列文章

• 基于.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頁面動態編譯
• 基于.NetCore開發博客項目 StarBlog - (13) 加入友情鏈接功能
• 基于.NetCore開發博客項目 StarBlog - (14) 實現主題切換功能
• 基于.NetCore開發博客項目 StarBlog - (15) 生成隨機尺寸圖片
• 基于.NetCore開發博客項目 StarBlog - (16) 一些新功能 (監控/統計/配置/初始化)
• 基于.NetCore開發博客項目 StarBlog - (17) 自動下載文章里的外部圖片
• 基于.NetCore開發博客項目 StarBlog - (18) 實現本地Typora文章打包上傳
• 基于.NetCore開發博客項目 StarBlog - (19) Markdown渲染方案探索
• 基于.NetCore開發博客項目 StarBlog - (20) 圖片顯示優化
• 基于.NetCore開發博客項目 StarBlog - (21) 開始開發RESTFul接口
• 基于.NetCore開發博客項目 StarBlog - (22) 開發博客文章相關接口
• 基于.NetCore開發博客項目 StarBlog - (23) 文章列表接口分頁、過濾、搜索、排序
• 基于.NetCore開發博客項目 StarBlog - (24) 統一接口數據返回格式
• 基于.NetCore開發博客項目 StarBlog - (25) 圖片接口與文件上傳
• 基于.NetCore開發博客項目 StarBlog - (26) 集成Swagger接口文檔
• ...

博客DEMO地址: http://blog.deali.cn

前言

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

博客截圖

放幾個截圖咯

博客主頁

文章列表

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

管理后臺主頁

后臺文章列表

文章編輯界面

后臺圖片列表

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

博客已經部署上線了，demo鏈接: http://blog.deali.cn