分享我做Dotnet9部落格網站時積累的一些資料

從 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，並參考 YouTube 一些影片做了個首頁展示：

• 原始碼：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是還沒有接觸過的，所以全網找影片學習。

懷著找有現成部落格程式碼的教學影片目標，在百度、Google 找了個遍，終於找到了一個影片網址：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做了一個版本的部落格前台展示後，在 YouTube 發現了土耳其老師的帳號，他新開了一個影片系列，也是講解 ASP.NET CORE MVC 5.0 開發部落格系統，只是主題不同，使用的技術可能更新了，有 150 集，站長追了 80 幾集，後面沒看了，和前面付費的類似，有需求的朋友可不用買付費影片（當然支持是可以的），直接看他最新的部落格開發影片學習吧。

• 影片地址：https://www.youtube.com/watch?v=HXKnDUb06iw&list=PLKnjBHu2xXNNkinaVhPqPZG0ubaLN63ci

語言不是障礙哈，YouTube 可以做語言翻譯，站長有時是 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 World 開始又重新搭建網站了。

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 線上 Ico 轉換工具

• 使用 Blazor 做個簡單的時間戳線上轉換工具

後面也沒有繼續堅持選擇 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 可視化日誌組件使用

前台使用的ASP.NET Core MVC開發，ORM 使用的 EF Core，MVC 可以得到完美的 SEO 支援，再也不用擔心百度、Google 的收錄問題了。

網站資料做了個資料種子，目前每次有更新需要刪庫、重新初始化，後台正在開發中，參考的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%A0%85%E7%9B%AE%E4%BB%A3%E7%A2%BC/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

1. Dotnet9.Commons：工具庫
2. Dotnet9.Contracts：暫時放 Dto 類別
3. Dotnet9.RazorPages：前台主工程，逐步完善
4. Dotnet9.Service：後端主工程，暫時將各種分層檔案放一個工程，有需要再分庫
5. Dotnet9.Admin：後台前端暫定

等網站開發完成，寫個 Dotnet9 網站前後台開發系列教學分享，不是今年，就是明年....

9. 2024年7月

Ant Design風格重構，原始碼位址：https://github.com/dotnet9/CodeWF：

1. 採用Blazor靜態SSR；
2. 沒有資料庫，核心資料本地讀取、載入記憶體使用，所以沒有後台

線上瀏覽：https://dotnet9.com

訪問速度有沒有飛一般的感覺：

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