基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客？

我型我瘦 · 发表于 2022-4-5 23:01:00

系列文章

基于.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接口文档
基于.NetCore开发博客项目 StarBlog - (27) 使用JWT保护接口
基于.NetCore开发博客项目 StarBlog - (28) 开发友情链接相关接口
基于.NetCore开发博客项目 StarBlog - (29) 开发RSS订阅功能
StarBlog开源博客项目 - 2023年底更新内容一览
基于.NetCore开发博客项目 StarBlog - (30) 实现评论系统
基于.NetCore开发博客项目 StarBlog - (31) 发布和部署
基于.NetCore开发博客项目 StarBlog - (32) 第一期完结
...

博客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