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

Dotnet9個人部落格發表於2022-05-03

從2019年使用WordPress搭建Dotnet9網站,到現在手擼程式碼開發,介紹中間使用的一些資源,絕無保留,希望對大家有用。

1. 申請域名、搭建WordPress網站

時間點:2019年11月

申請Dotnet9域名,講個實話,站長是從Dotnet1試到Dotnet9的,前面8個都被註冊了,哈哈。

網站使用WordPress的第三方收費主題JustNews主題搭建:

JustNews主題專為部落格、自媒體、資訊類的網站設計開發,自適應相容手機、平板裝置,支援前端使用者中心,可以前端釋出/投稿文章,同時主題支援專題功能,可以新增文章專題。

1.1 經典風格

這種風格挺適合技術類網站,內容比較緊湊,一眼展示內容較多。

Just News經典風格

1.2 風格二

這種風格是站長去年之前一直選用的風格,用了將近2年,看著比較大氣,貌似沒有保留網站最後的截圖,還是上演示截圖吧。

Just News風格二

2. 開始調研網站開發技術棧

時間點:2021年10月

這是一個重要時間點,前面兩年站長基本就是在維護上面的WordPress搭建的網站。

關注Dotnet9網站的網友也經常問我,這個網站是用什麼語言開發的,是否開源,想學習一下怎麼開發網站。

陸陸續續站長也有自己開發網站的想法,但一直未付諸行動,畢竟自己技術棧主要在C/S,B/S也只是偶爾客串。

所以這個時候就開始調研網站開發技術棧,這首先就選擇了Flutter Web,並參考油管一些視訊做了個首頁展示:

選擇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,這個網址有不少同學在上面學習過吧,全球的教學視訊都有,中文、英文、其他語言:

udemy學習網站

我找到了一個土耳其老師的視訊,正好是使用ASP.NET Core MVC 5教授部落格網站開發,正好對我路子,當時花了19.9$來著,還是有點小貴,不過學到了真東西,他基本使用的三層架構開發的,建議初學MVC的同學可以看看,這裡發截圖和連結不是推薦買哈,後面我接著講。

部落格開發視訊教程

當然站長不全是按他的教學視訊做,有些程式碼也參考了老張的Blog.Core開發的,建議收藏老張的部落格園,有興趣的同學可以看看他的部落格,站長18年底開始看的老張部落格入門的B/S開發,這應該是全網最全的B/S入門系列教程了:.NET CORE Web API + Vue:

老張的哲學

站長在看土耳其老師的視訊和參考老張的Blog.Core做了一個版本的部落格前臺展示後,在油管發現了土耳其老師的賬號,他新開了一個視訊系列,也是講解ASP.NET CORE MVC 5.0開發部落格系統,只是主題不同,使用的技術可能更新了,有150集,站長追了80幾集,後面沒看了,和前面收費的類似,有需求的朋友可不用買收費視訊(當然支援是可以的),直接看他最新的部落格開發視訊學習吧。

油管免費部落格開發視訊教程

語言不是障礙哈,油管可以做語言翻譯,站長有時是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

5. 純用Blazor Server開發網站

時間點:1月~2月

純用Blazor Server開發的網站

上面未再用Abp vNext做個人專案的原因已經提了個人觀點,所以從Blazor Server Hello Word開始又重新搭建網站了。

Blazor元件庫使用的 Masa Blazor: https://masa-blazor-docs-dev.lonsid.cn/

Masa Blazor

與第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年03月至今(2022年05月03號)

第一次上線時間:2022年04月01號

原始碼:https://github.com/dotnet9/Dotnet9

Dotnet9網站原始碼倉庫

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

首頁:

Dotnet9網站首頁

專輯之一:開源WPF

Dotnet9網站專輯

分類之一:Blazor

Dotnet9網站分類

文章之一:ASP.NET Core視覺化日誌元件使用

Dotnet9網站文章詳情頁

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

網站資料做了個資料種子,目前每次有更新需要刪庫、重新初始化,後臺正在開發中,參考的Panda這個專案正在做後臺,後臺前端使用的Vue 3.0 + Element Plus:

開源專案Panda倉庫

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

開源專案Panda後臺前端

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

相關文章