Since 2019, I built the Dotnet9 website using WordPress, and now I develop it from scratch with my own code. Here, I share all the resources I used along the way without reservation, hoping they will be useful to you.
1. Registering a Domain and Building a WordPress Site
Time: November 2019
Registered the Dotnet9 domain. To be honest, I tried from Dotnet1 to Dotnet9, and the first eight were already taken, haha.
The site was built using the third-party paid theme JustNews for WordPress:
JustNews theme is designed for blogs, self-media, and news websites. It adapts to mobile and tablet devices, supports front-end user center, allows article submission/publishing on the front-end, and supports topic features for adding article series.
1.1 Classic Style
This style is quite suitable for technical sites. The content layout is compact, displaying more information at a glance.
1.2 Style Two
This style was the one I used until last year, for nearly two years. It looks more spacious. I didn’t keep a final screenshot of the site, so here is the demo screenshot.
2. Starting Research on Website Development Tech Stack
Time: October 2021
This was an important milestone. In the previous two years, I mainly maintained the WordPress-built site.
Many visitors to the Dotnet9 website often asked me what language the site was developed in, whether it was open source, and wanted to learn how to build a website.
I gradually considered developing my own site, but never took action, as my main tech stack was C/S, with only occasional forays into B/S.
So at this point, I started researching the website development tech stack. I first chose Flutter Web and built a home page demo based on some YouTube videos:
I chose Flutter Web because I was also researching Flutter for Mac development at work, and for its cross-platform potential to pave the way for desktop and mobile apps later. However, Flutter Web is still not fully mature:
Currently the least recommended technology: the initial load includes about 2MB of Flutter JS libraries, resulting in a blank white screen for 20–30 seconds. There are third-party SEO plugins, but they are not mature—similar to choosing Flutter for desktop, it needs more time...
3. Developing the Website with ASP.NET Core MVC + Bootstrap
Time: December 2021
Source code: https://github.com/dotnet9/lequ/tree/main/src/dotnet_blog
This is probably the most suitable tech stack for SEO-type websites. I personally favor a monolith architecture.
Previously, my B/S work was either purely ASP.NET Core Web API or combined with frontend Vue (vue-element-admin) / React (Ant Design Pro). I had no experience with ASP.NET Core MVC, so I searched everywhere for video tutorials.
Looking for teaching videos with ready-to-use blog code, I searched Baidu and Google and finally found a site: udemy.com. Many classmates have used this site for learning. It has global teaching videos in Chinese, English, and other languages:
I found a video by a Turkish instructor that exactly taught blog development using ASP.NET Core MVC 5. It was exactly what I needed. I paid $19.9 at the time, a bit expensive, but I learned real content. He used a three-layer architecture. I recommend this for beginners in MVC. However, I’m not necessarily recommending the purchase; I’ll continue the story.
Of course, I didn’t follow his tutorial entirely. Some code references came from Lao Zhang’s Blog.Core. I suggest bookmarking Lao Zhang’s blog on cnblogs. Interested students can check his blog. I started reading Lao Zhang’s blog at the end of 2018 for B/S development. It’s probably the most comprehensive B/S introductory series: .NET CORE Web API + Vue:
After building a blog frontend demo based on the Turkish instructor’s video and Lao Zhang’s Blog.Core, I discovered the Turkish instructor’s YouTube channel. He started a new video series also teaching ASP.NET CORE MVC 5.0 blog system, but with a different theme and updated technology. It had 150 episodes. I watched about 80 episodes and then stopped. It was similar to the paid version. If you need it, you can learn directly from his latest free blog development videos without buying the paid course (though supporting him is fine).
Language is not a barrier; YouTube supports subtitles and translation. I often watch at 2x speed while coding along—works better that way.
4. Developing with Abp vNext + Blazor Server
Time: January 2022
By this time, I had built a rough frontend using MVC with theme switching and multi-language support.
In January 2022, a company project required using Abp vNext + Blazor Server. So I learned the technology at work and spent evenings practicing by building Dotnet9 frontend.
Source code: https://github.com/dotnet9/Dotnet9/tree/abp-blazor-server
Learning site: https://docs.abp.io/en/abp/latest/Tutorials/Part-1?UI=BlazorServer&DB=EF
Summary:
Abp vNext is too heavy. A “Hello World” app consumes about 400MB of memory. Hand-coded CRUD is time-consuming, even with code generators. It’s not suitable for a blog website.
However, that doesn’t stop anyone from using Abp vNext for enterprise projects. There are many open-source Abp vNext projects in the community. Check out this GitHub account: EasyAbp Team
5. Developing Purely with Blazor Server
Time: January–February
The reason I stopped using Abp vNext for personal projects is already given. So I started rebuilding the site from a Blazor Server Hello World.
The Blazor component library used was Masa Blazor: https://masa-blazor-docs-dev.lonsid.cn/
Compared to the version integrating Abp vNext with Blazor Server (done for work), this time I chose native Blazor Server. For a .NET developer like me, this should be the second best choice after MVC.
To be honest, getting a job with Blazor is unlikely, but it’s very fun for personal projects. For learning Blazor, check out my translation of a series by a Taiwanese developer: Learn Blazor. I also built two online tools with this Blazor version, which were online for a while. Code reference:
Later, I didn’t continue with Blazor Server for my personal site. My main concern: Blazor uses SignalR for long connections, which has good real-time performance but requires a stable network. If the network is poor, the connection may drop, impacting user experience. I didn’t want to keep experimenting, so I switched back to MVC.
Side note: In between, I used .NET CORE Web API with Vue for the site. Because Lao Zhang’s new book was released, I bought it and built the backend and frontend home page. It was a good taste. Separation of front and back ends, Vue is familiar and fun, but a bit more effort than MVC.
6. Current Development Version (May 2022)
Time: March 2022 to present (May 3, 2022)
First launch: April 1, 2022
Source code: https://github.com/dotnet9/Dotnet9
Back to MVC for the site. The frontend is now basically shaped. The front-end theme was copied from an online template. I plan to pay a designer on Taobao to polish it later.
Home page:
One album: Open Source WPF
One category: Blazor
One article: ASP.NET Core Visual Log Component Usage
The frontend uses ASP.NET Core MVC, ORM is EF Core. MVC provides perfect SEO support, no more worries about Baidu/Google indexing.
The site data is seeded. Currently, any update requires deleting the database and reinitializing. The backend is under development, referencing the Panda project. The backend frontend uses Vue 3.0 + Element Plus:
Here’s a GIF of the backend frontend to end this section:
7. Update on March 11, 2023
The site is undergoing another round of refactoring. The frontend looks like this:
Home page:
Detail page:
Reference projects:
- Frontend: https://github.com/linhaojun857/aurora/tree/master/aurora-vue/aurora-blog
- Backend frontend: https://github.com/linhaojun857/aurora/tree/master/aurora-vue/aurora-admin
- Backend: 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 project:
- Frontend (Vue 3 + Element Plus): https://github.com/dotnet9/Dotnet9/tree/develop/src/dotnet9-web-vue3
- Backend frontend (Vue 2 + Element UI): https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnet9.Admin.Web/dotnet9-adminvue
- Backend (ASP.NET Core 7.0 Web API): https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnet9.Admin.WebAPI
8. Update on May 3, 2023
The frontend switched from Vue 3 back to ASP.NET Core Razor Pages. The style is minimalist, focusing on content over flashiness. Some netizens say it resembles the early cnblogs style. I actually bought a static template from Yang Qingqing’s personal blog (https://www.yangqq.com/). The backend uses MASA Framework (https://www.masastack.com/framework), still following DDD design principles, and now incorporates CQRS. The overall plan is to stick with MASA Framework for the backend, and both front and back end are now fully embracing .NET 8.
Why refactor again?
As technology evolves, website refactoring has become inevitable. To better meet personal learning needs and improve performance and user experience, the Dotnet9 site underwent another refactoring. This round includes both frontend and backend improvements.
Frontend refactoring
Tech stack: ASP.NET Core 8.0 Razor Pages
For the frontend, the site switched from Vue 3 to Razor Pages. While Vue 3 has many advantages, it has some issues with performance and SEO. Razor Pages is more suitable for building frontend websites (server-side rendering), offering better performance and SEO.
The style also adjusted to minimalist, focusing on content presentation rather than fancy effects. This resembles the early cnblogs style, allowing users to focus on reading and learning.
Backend refactoring
Tech stack: ASP.NET Core 8.0 Web API (MASA Framework + EF Core 8.0 (PostgreSQL), DDD + CQRS)
The backend now uses MASA Framework as the development framework. MASA Framework is .NET’s next-generation microservice development framework, helping developers and enterprises deliver modern application development experiences.
The design still follows DDD (Domain-Driven Design), helping developers better understand business requirements, separate business logic from technical implementation, and improve code maintainability and scalability.
Additionally, the site now incorporates CQRS (Command Query Responsibility Segregation) pattern, supported by MASA Framework. CQRS is an architectural pattern related to DDD and event sourcing, dividing events into Command and Query ends to improve system performance and scalability. In the Dotnet9 site, blog article queries use Query, and article reading statistics (under development) use Command.
Summary
This refactoring not only improved site performance and user experience but also adopted the latest technologies and design ideas, making the site more maintainable and scalable. Dotnet9 will continue this philosophy, optimizing and improving to provide better service—primarily driven by personal learning and continuous evolution.
Results display
Home page:
Article album:
Article detail:
Source code
Historical branches have been cleaned up, retaining only develop and main branches.
Repository: https://github.com/dotnet9/dotnet9
Solution structure:
Main frontend project: Dotnet9.RazorPages
Main backend project: Dotnet9.Service
- Dotnet9.Commons: utility library
- Dotnet9.Contracts: temporary DTO classes
- Dotnet9.RazorPages: frontend main project, gradually improving
- Dotnet9.Service: backend main project, temporarily placing various layers in one project; will split into separate libraries if needed
- Dotnet9.Admin: backend frontend (tentative)
Once the site is complete, I will write a series of tutorials on building Dotnet9 front and back end—either this year or next...
9. July 2024
Refactored with Ant Design style. Source code: https://github.com/dotnet9/CodeWF
- Uses Blazor static SSR;
- No database; core data is read locally and loaded into memory, so no backend.
Online view: https://dotnet9.com
Does it feel super fast?
This article will be continuously updated. Stay tuned.