从 2019 年使用WordPress搭建Dotnet9 网站,到现在手撸代码开发,介绍中间使用的一些资源,绝无保留,希望对大家有用。
1. 申請域名、搭建 wordpress 網站
時間點:2019 年 11 月
申请Dotnet9域名,讲个实话,站长是从 Dotnet1 试到 Dotnet9 的,前面 8 个都被注册了,哈哈。
网站使用WordPress的第三方收费主题JustNews 主题搭建:
justnews 主題專為博客、自媒體、資訊類的網站設計開發,自適應兼容手機、平板設備,支持前端用戶中心,可以前端發布/投稿文章,同時主題支持專題功能,可以添加文章專題。
1.1經典風格
- 演示地址:http://demo.wpcom.cn/justnews/
這種風格挺適合技術類網站,內容比較緊湊,一眼展示內容較多。

1.2風格二
- 演示地址:http://demo.wpcom.cn/justnews2/
這種風格是站長去年之前一直選用的風格,用了將近 2 年,看著比較大氣,貌似沒有保留網站最後的截圖,還是上演示截圖吧。

2. 開始調研網站開發技術棧
時間點:2021 年 10 月
这是一个重要时间点,前面两年站长基本就是在维护上面的WordPress搭建的网站。
关注Dotnet9 网站的网友也经常问我,这个网站是用什么语言开发的,是否开源,想学习一下怎么开发网站。
陸陸續續站長也有自己開發網站的想法,但一直未付諸行動,畢竟自己技術棧主要在 c/s,b/s 也只是偶爾客串。
所以这个时候就开始调研网站开发技术栈,这首先就选择了Flutter Web,并参考油管一些视频做了个首页展示:
- 源碼:https://github.com/dotnet9/lequ/tree/main/src/flutter_blog
選擇 flutter web,因為站長在公司也在調研 flutter 開發 mac 項目,另一個就是為了它的跨平台特性,為了後面做桌面和 app 鋪路,但目前 flutter web 是還不太成熟的:
目前最不適合選用的技術,首次加載 2mb 左右的 flutter js 庫,2、30 秒加載白屏等待,有做 seo 的第三方插件,但不成熟,就和選 flutter 做桌面一樣,需要再等等...
3. 使用 asp.net core mvc + bootstrap 開發網站
時間點:2021 年 12 月
源碼:https://github.com/dotnet9/lequ/tree/main/src/dotnet_blog
這應該是最適宜做需要 seo 類型的網站選用的技術棧,個人感覺單體就好。
站长以前做 B/S,要么只做ASP.NET Core Web API,或者加上前端 Vue(vue-element-admin),React(Ant Design Prop),ASP.NET Core MVC是还没有接触过的,所以全网找视频学习。
怀着找有现成博客代码的教学视频目标,在百度、谷歌找了个遍,终于找到了一个视频网址:udemy.com,这个网址有不少同学在上面学习过吧,全球的教学视频都有,中文、英文、其他语言:

我找到了一个土耳其老师的视频,正好是使用ASP.NET Core MVC 5教授博客网站开发,正好对我路子,当时花了 19.9$来着,还是有点小贵,不过学到了真东西,他基本使用的三层架构开发的,建议初学 MVC 的同学可以看看,这里发截图和链接不是推荐买哈,后面我接着讲。
- 視頻連結:https://www.udemy.com/course/kurumsal-mimaride-mvc5-ile-blog-projesi-gelistirelim/

当然站长不全是按他的教学视频做,有些代码也参考了老张的Blog.Core开发的,建议收藏老张的博客园,有兴趣的同学可以看看他的博客,站长 18 年底开始看的老张博客入门的 B/S 开发,这应该是全网最全的 B/S 入门系列教程了:.NET CORE Web API + Vue:
- 博客園 [老張的哲學]: https://www.cnblogs.com/laozhang-is-phi/

站长在看土耳其老师的视频和参考老张的Blog.Core做了一个版本的博客前台展示后,在油管发现了土耳其老师的账号,他新开了一个视频系列,也是讲解 ASP.NET CORE MVC 5.0 开发博客系统,只是主题不同,使用的技术可能更新了,有 150 集,站长追了 80 几集,后面没看了,和前面收费的类似,有需求的朋友可不用买收费视频(当然支持是可以的),直接看他最新的博客开发视频学习吧。
- 視頻地址:https://www.youtube.com/watch? v=hxkndub06iw&list=plknjbhu2xxnnkinavhpqpzg0ubaln63ci

語言不是障礙哈,油管可以做語言翻譯,站長有時是 2 倍速觀看,邊看邊敲代碼學習,食用效果更佳。
4. abp vnext + blazor server 開發
時間點:2022 年 01 月
站長在前面學習 mvc 的過程中,已經把前台做了個大概了,有主題切換、多語言切換。
在 2022 年 01 月,站长公司有个项目,有使用 Abp vNext + Blazor Server 开发项目的需求,遂在公司学习技术,晚上加班加点用新学的技术练手做Dotnet9网站前台,
源碼:https://github.com/dotnet9/Dotnet9/tree/abp-blazor-server
學習地址:https://docs.abp.io/en/abp/latest/Tutorials/Part-1? ui=blazorserver&db=ef
總結:
Abp vNext 太重了,Hello World运行内存 400MB 左右,个人手撸 CRUD 比较费时,即使有代码生成器,也不应该选用这种方式做博客网站。
但不妨礙大家使用 abp vnext 開發企業級項目哈,社區有不少 abp vnext 的開源項目,大家可關注這個 github 帳號: EasyAbp Team
- EasyAbp Team:https://github.com/EasyAbp

5. 純用 blazor server 開發網站
時間點:1 月~2 月

上面未再用 abp vnext 做個人項目的原因已經提了個人觀點,所以從 blazor server hello word 開始又重新搭建網站了。
blazor 組件庫使用的 masa blazor:https://masa-blazor-docs-dev.lonsid.cn/

與第 4 版 abp vnext 集成的 blazor server 相比,當時是工作需要練手選擇的。這次選原生的 blazor server,對做.net 的我來說,應該是僅次於 mvc 的選擇吧。
说实话,找工作靠 Blazor 可能性是很小的,但个人玩是非常爽的,这里学习 Blazor 可看下站长当时翻译的一个台湾小哥的系列文章:学 Blazor,站长用 Blazor 这个版本还写了 2 个在线小工具,上线了一段时间,代码可参考:


後面也沒有繼續堅持選擇 blazor server 開發個人網站,站長主要有這個考量:blazor 使用的 signalr 做長連接,實時性較好,但對客戶端網絡要求較高,網絡稍差,可能就與伺服器斷開了連接,對用戶使用體驗影響較大,站長也不想繼續折騰下去,所以後面又選擇了 mvc 開發個人網站。
小插曲:當時中間有用 .net core web api 搭配 vue 開發網站,因為老張的新書上市了,站長上手買了一本,跟著做了後端和前台首頁,嘗了個鮮,前後端分離,前端 vue 比較熟用起來也很爽,稍微有點麻煩,沒有 mvc 利索。
6. 現在的開發版本(2022年5月)
時間點:2022 年 03 月至今(2022 年 05 月 03 號)
第一次上線時間:2022 年 04 月 01 號
源碼:https://github.com/dotnet9/Dotnet9

折騰回 mvc 做網站,現在網站前台基本成型了,前台前端在網上扒的一個主題,後面考慮在淘寶付費找個設計師美化一下:
首頁:

专辑之一:开源 WPF

分类之一:Blazor


前台使用的ASP.NET Core MVC开发,ORM 使用的 EF Core,MVC 可以得到完美的 SEO 支持,再也不用担心百度、谷歌的收录问题了。
网站数据做了个数据种子,目前每次有更新需要删库、重新初始化,后台正在开发中,参考的Panda这个项目正在做后台,后台前端使用的 Vue 3.0 + Element Plus:
- Panda:https://github.com/coolqingcheng/Panda

最後來個後台前端動圖結束本文:

7. 2023 年 3 月 11 號更新
目前網站正在進行新一輪的重構,前台展示效果如下:
首頁:

詳情頁:

參考項目:
- 前台前端:https://github.com/linhaojun857/aurora/tree/master/aurora-vue/aurora-blog
- 後台前端:https://github.com/linhaojun857/aurora/tree/master/aurora-vue/aurora-admin
- 後端:https://github.com/yangzhongke/NETBookMaterials/tree/main/%E6%9C%80%E5%90%8E%E5%A4%A7%E9%A1%B9%E7%9B%AE%E4%BB%A3%E7%A0%81/YouZack-VNext
dotnet9 網站項目:
- 前台前端(vue 3 + element plus):https://github.com/dotnet9/Dotnet9/tree/develop/src/dotnet9-web-vue3
- 後台前端(vue 2 + element ui):https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnet9.Admin.Web/dotnet9-adminvue
- 後端(asp.net core 7.0 web api):https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnet9.Admin.WebAPI
8. 2023 年 5 月 3 號更新
前台由 Vue 3 换回ASP.NET Core Razor Pages,风格以简约为主,主打内容为王,放弃花哨,网友称风格类似早期博客园,站长其实买的杨青青个人博客(https://www.yangqq.com/)的静态模板;后端采用MASA Framework 搭建,框架地址是 https://www.masastack.com/framework,后端依然以DDD设计为开发指导,这次加入了CQRS。开发总体规划是:后端框架采用MASA Framework 应该是不变了,并且前后台现在全面拥抱了 .NET 8。
怎麼又重構了?
隨著技術的不斷發展,網站的重構已經成為了一個必然的趨勢。為了更好地滿足個人學習的需求,提高網站的性能和用戶體驗,dotnet9 網站進行了新一輪的重構。本次重構主要包括前台和後台兩個方面。
前台重構
技術棧:asp.net core 8.0 razor pages
在前台方面,Dotnet9 网站将原来的 Vue 3 换回了 Razor Pages 。这是因为 Vue 3 虽然有很多优点,但是在性能和 SEO 方面还存在一些问题。而 Razor Pages 则更加适合于构建前台网站(服务端渲染),具有更好的性能和 SEO 优化效果。
同時,dotnet9 網站在風格上也進行了一些調整。網站的風格以簡約為主,放棄了過多的花哨效果,更加注重內容的呈現。這種風格類似於早期的博客園,讓用戶更加專注於閱讀和學習。
後台重構
技術棧:asp.net core 8.0 web api (masa framework + ef core 8.0(postgresql), ddd + cqrs)
在后台后端方面,Dotnet9 网站采用了 MASA Framework 作为开发框架。MASA Framework 是.NET 下一代微服务开发框架, 助力开发者和企业开启全新的现代化应用开发交付体验。
在開發設計上,dotnet9 網站依然採用了 ddd(領域驅動設計)的思想實踐。這種設計思想可以幫助開發者更好地理解業務需求,將業務邏輯和技術實現分離開來,從而提高代碼的可維護性和可擴展性。
此外,Dotnet9 网站还加入了 CQRS(命令查询职责分离)的设计模式,由 MASA Framework 提供技术支持。CQRS 是一种与领域驱动设计(DDD)和事件溯源相关的架构模式,它将事件(Event)划分为 命令端(Command)和 查询端(Query),可以提高系统的性能和可扩展性。在 Dotnet9 网站中,博客文章的查询就使用了查询(Query),文章阅读统计(开发中)使用了命令(Command)。
小結
dotnet9 網站的重構,不僅提高了網站的性能和用戶體驗,還採用了最新的技術和設計思想,使得網站更加具有可維護性和可擴展性。在未來的發展中,dotnet9 網站將繼續秉承這種理念,不斷優化和改進,為用戶提供更好的服務,當然主要以個人學習、不斷演進為主。
成果展示
首頁:

文章專輯:

文章詳情:

源碼
這次把歷史分支也做了清理,只保留 develop 和 main 分支。
倉庫:https://github.com/dotnet9/dotnet9
解決方案結構如下:

前台主工程:dotnet9.razorpages

後端主工程:dotnet9.service

- dotnet9.commons:工具庫
- dotnet9.contracts:暫時放 dto 類
- dotnet9.razorpages:前台主工程,逐步完善
- dotnet9.service:後端主工程,暫時將各種分層文件放一個工程,有需要再分庫
- dotnet9.admin:後台前端暫定
等網站開發完成,寫個 dotnet9 網站前後台開發系列教程分享,不是今年,就是明年....
9. 2024年7月
ant design風格重構,源碼地址:htts://github.com/dotnet9/codewf:
- 採用blazor靜態ssr;
- 沒有資料庫,核心數據本地讀取、加載內存使用,所以沒有後台
在線瀏覽:htts://dotnet9.. com
訪問速度有沒有飛一般的感覺:

本文持續更新,歡迎關注。