基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客？
<h2 id="系列文章">系列文章</h2><ul>
<li>基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客？</li>
<li>基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目</li>
<li>基于.NetCore开发博客项目 StarBlog - (3) 模型设计</li>
<li>基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入</li>
<li>基于.NetCore开发博客项目 StarBlog - (5) 开始搭建Web项目</li>
<li>基于.NetCore开发博客项目 StarBlog - (6) 页面开发之博客文章列表</li>
<li>基于.NetCore开发博客项目 StarBlog - (7) 页面开发之文章详情页面</li>
<li>基于.NetCore开发博客项目 StarBlog - (8) 分类层级结构展示</li>
<li>基于.NetCore开发博客项目 StarBlog - (9) 图片批量导入</li>
<li>基于.NetCore开发博客项目 StarBlog - (10) 图片瀑布流</li>
<li>基于.NetCore开发博客项目 StarBlog - (11) 实现访问统计</li>
<li>基于.NetCore开发博客项目 StarBlog - (12) Razor页面动态编译</li>
<li>基于.NetCore开发博客项目 StarBlog - (13) 加入友情链接功能</li>
<li>基于.NetCore开发博客项目 StarBlog - (14) 实现主题切换功能</li>
<li>基于.NetCore开发博客项目 StarBlog - (15) 生成随机尺寸图片</li>
<li>基于.NetCore开发博客项目 StarBlog - (16) 一些新功能 (监控/统计/配置/初始化)</li>
<li>基于.NetCore开发博客项目 StarBlog - (17) 自动下载文章里的外部图片</li>
<li>基于.NetCore开发博客项目 StarBlog - (18) 实现本地Typora文章打包上传</li>
<li>基于.NetCore开发博客项目 StarBlog - (19) Markdown渲染方案探索</li>
<li>基于.NetCore开发博客项目 StarBlog - (20) 图片显示优化</li>
<li>基于.NetCore开发博客项目 StarBlog - (21) 开始开发RESTFul接口</li>
<li>基于.NetCore开发博客项目 StarBlog - (22) 开发博客文章相关接口</li>
<li>基于.NetCore开发博客项目 StarBlog - (23) 文章列表接口分页、过滤、搜索、排序</li>
<li>基于.NetCore开发博客项目 StarBlog - (24) 统一接口数据返回格式</li>
<li>基于.NetCore开发博客项目 StarBlog - (25) 图片接口与文件上传</li>
<li>基于.NetCore开发博客项目 StarBlog - (26) 集成Swagger接口文档</li>
<li>基于.NetCore开发博客项目 StarBlog - (27) 使用JWT保护接口</li>
<li>基于.NetCore开发博客项目 StarBlog - (28) 开发友情链接相关接口</li>
<li>基于.NetCore开发博客项目 StarBlog - (29) 开发RSS订阅功能</li>
<li>StarBlog开源博客项目 - 2023年底更新内容一览</li>
<li>基于.NetCore开发博客项目 StarBlog - (30) 实现评论系统</li>
<li>基于.NetCore开发博客项目 StarBlog - (31) 发布和部署</li>
<li>基于.NetCore开发博客项目 StarBlog - (32) 第一期完结</li>
<li>...</li>
</ul>
<p>博客DEMO地址: http://blog.deali.cn</p>
<h2 id="前言">前言</h2>
<p>OK，我也来造轮子了</p>
<p>博客系统从一开始用WordPress，再到后来用hexo、hugo之类的静态博客生成放github托管，一直在折腾</p>
<p>折腾是为了更好解决问题，最终还是打算自己花时间搞一个好了</p>
<p>本系列文章将记录博客的开发过程~ 将会持续更新，欢迎关注~</p>
<p>后端基于最新的<code>.Net6</code>和<code>Asp.Net Core</code>框架，遵循RESTFul接口规范，前端基于<code>Vue</code>+<code>ElementUI</code>开发，可作为 .Net Core 入门项目学习~</p>
<p>博客项目的开发已经基本完成，项目代码完全开源，有兴趣的朋友可以点个star~</p>
<ul>
<li>博客后端+前台项目地址：https://github.com/Deali-Axy/StarBlog</li>
<li>管理后台前端项目地址：https://github.com/Deali-Axy/StarBlog-Admin</li>
</ul>
<h2 id="为啥要自己开发博客">为啥要自己开发博客</h2>
<ul>
<li>找不到一个让我满意的在线博客</li>
<li>在线写博客体验不如在本地用typora写</li>
<li>写公众号推文的话注意力会分散一部分到如何写得吸引读者而不是文章本身</li>
<li>自己的网站才有完整的控制权，不会被垃圾平台添加不良信息污染</li>
</ul>
<h2 id="整体设计">整体设计</h2>
<p>虽然博客没啥技术含量，但还是要说一下我的想法</p>
<p>前面说到自己开发博客的原因有一点是我喜欢在本地用typora写博客，但markdown作为一种纯文本文件，有一个短板就是图片资源，无论是使用图床还是链接到本地，在发布的时候都有一定的麻烦。</p>
<p>图床可能失效，我还是习惯把资源放在本地可以自己掌握，但放在本地的话，要发布到博客园、公众号这类平台就免不了要一张张上传图片，很麻烦。</p>
<p>静态博客生成器可以把markdown转换成HTML然后放在github或者gitee托管，但前者国内几乎没法访问，后者自定义域名需要付费，加上现在管控严格，已经没法开启gitee pages了…</p>
<p>结合上述，我开发的博客最核心的一点就是要支持本地的markdown以及本地图片，要原封不动的利用我现有的几百个markdown文档来构建一个博客。</p>
<p>我不想做一个静态博客生成器，限制太大了，而且很多功能例如评论互动、更新推送等没办直接支持。</p>
<p>所以思路已经很明确了，这个博客需要读取本地的markdown文档，在不修改原有文档的基础上，将文档内容导入数据库中，同时收集文档里的资源文件（图片）。</p>
<p>然后博客前台为了更好的SEO效果，而且也很简单，使用后端渲染技术，不需要前后端分离；</p>
<p>博客数据都存储在数据库里，当然需要一个管理后台，这个后台就做成前后端分离的单页应用好了。</p>
<p><strong>PS: 本来只考虑本地写完上传，后面又加了在线编辑功能，可以满足基本的文章编辑功能，体验还行</strong></p>
<h2 id="功能要求">功能要求</h2>
<p>所以总结下来，本项目开发的博客需要具备以下功能：</p>
<ul>
<li>本地markdown文章批量上传导入，根据目录结构解析文章分类（支持多级分类嵌套），解析markdown中的图片并导入到网站目录中</li>
<li>本地摄影作品批量上传，读取图片EXIF信息并导入</li>
<li>可以配置的博客主页（展示置顶和置顶的文章、图片、分类）</li>
<li>代码片段编辑与分享功能</li>
<li>后台需要完整的文章、分类、图片、代码片段编辑功能</li>
<li>博客前台需要有将文章快捷发表到微信公众号、知乎专栏、博客园、掘金等平台的功能</li>
</ul>
<p>OK，大概就这些了~ 更多功能可能后面想到了就加上~</p>
<h2 id="技术选型">技术选型</h2>
<p>后端本来Django是最佳选择，自带管理后台，开发这类CMS系统最合适不过了。</p>
<p>然而我最近C#写得很顺手，也一直在学习AspNetCore这个高性能的web框架，觉得挺好用的，造轮子不能用太简单的工具来造，不然就失去挑战性也学不到太多新东西了… 于是就确定是AspNetCore了</p>
<p>前端选择之前用过的vue，前端技术栈除了不久前学了一点React之外就没怎么更新，所以先凑合一下快速实现，后面再考虑用blazor或者flutter之类好玩的新技术来重构~</p>
<p>所以很明确了</p>
<ul>
<li>后端：C# + AspNetCore</li>
<li>ORM：FreeSQL</li>
<li>博客前台：Bootstrap + Vue + editor.md + bootswatch</li>
<li>管理端：Vue + Vuex + VueRouter</li>
<li>管理端UI：SCSS + ElementUI</li>
</ul>
<h2 id="博客截图">博客截图</h2>
<p>放几个截图咯</p>
<h3 id="博客主页">博客主页</h3>
<p><img src="https://img2022.cnblogs.com/blog/866942/202204/866942-20220405225022304-2138815081.png" alt="" loading="lazy"></p>
<h3 id="文章列表">文章列表</h3>
<p><img src="https://img2022.cnblogs.com/blog/866942/202204/866942-20220405225035489-449753828.png" alt="" loading="lazy"></p>
<h3 id="摄影页面虽然现在还没把拍的照片放上去就是了">摄影页面<s>（虽然现在还没把拍的照片放上去就是了）</s></h3>
<p><img src="https://img2022.cnblogs.com/blog/866942/202204/866942-20220405225044985-638927928.png" alt="" loading="lazy"></p>
<h3 id="管理后台主页">管理后台主页</h3>
<p><img src="https://img2022.cnblogs.com/blog/866942/202204/866942-20220405225109051-1879120729.png" alt="" loading="lazy"></p>
<h3 id="后台文章列表">后台文章列表</h3>
<p><img src="https://img2022.cnblogs.com/blog/866942/202204/866942-20220405225117978-1439315393.png" alt="" loading="lazy"></p>
<h3 id="文章编辑界面">文章编辑界面</h3>
<p><img src="https://img2022.cnblogs.com/blog/866942/202204/866942-20220405225126462-1862916154.png" alt="" loading="lazy"></p>
<h3 id="后台图片列表">后台图片列表</h3>
<p><img src="https://img2022.cnblogs.com/blog/866942/202204/866942-20220405225135800-677882287.png" alt="" loading="lazy"></p>
<p>篇幅关系就放这些图片了~</p>
<p>博客已经部署上线了，demo链接: http://blog.deali.cn</p>
</div>
<div id="MySignature" role="contentinfo">
微信公众号：「程序设计实验室」
专注于互联网热门新技术探索与团队敏捷开发实践，包括架构设计、机器学习与数据分析算法、移动端开发、Linux、Web前后端开发等，欢迎一起探讨技术，分享学习实践经验。<br><br>
来源：https://www.cnblogs.com/deali/p/16104454.html
頁:
[1]