StarBlog Development Notes (1): Project Introduction

Preface

OK, I'm reinventing the wheel too

I've been tinkering with blog systems from the start with WordPress, then later using static blog generators like hexo and hugo hosted on GitHub

Tinkering is for solving problems better, and in the end I decided to spend the time building one myself

This series of articles will document the blog's development process~

The backend is based on the latest .Net6 and Asp.Net Core frameworks, following RESTFul API conventions. The frontend is developed with Vue+ElementUI, and it can serve as a beginner project for learning .Net Core~

Why Develop My Own Blog

• I couldn't find an online blog that satisfied me
• The experience of writing blogs online isn't as good as writing locally with Typora
• When writing WeChat official account posts, some attention gets diverted to how to write in a way that attracts readers rather than the article itself
• Only your own website gives you complete control, and it won't be polluted by junk platforms adding unwanted content

Overall Design

Although a blog doesn't have much technical depth, I still want to share my thoughts

One of the reasons I mentioned for developing my own blog is that I like writing blogs locally with Typora. But Markdown, as a plain text format, has a shortcoming when it comes to image resources. Whether you use an image host or link to local files, there's always some hassle when publishing.

Image hosts may go down, and I'm used to keeping resources locally so I can control them myself. But if they're stored locally, publishing to platforms like Blog Garden or WeChat official accounts means uploading images one by one, which is a pain.

Static blog generators can convert Markdown to HTML and then host it on GitHub or Gitee, but the former is almost inaccessible in China, while the latter requires payment for a custom domain, and with stricter controls now, Gitee Pages can no longer be enabled…

Combining the above, the most core point of the blog I'm developing is that it must support local Markdown as well as local images, so I can use my existing hundreds of Markdown documents as-is to build a blog.

I don't want to make a static blog generator—the limitations are too great, and many features such as comments/interaction, update notifications, etc. can't be directly supported.

So the approach is already quite clear: this blog needs to read local Markdown documents, import the document content into the database without modifying the original documents, and at the same time collect resource files (images) from the documents.

Then, for better SEO and also because it's simple, the blog frontend uses server-side rendering and doesn't need frontend-backend separation;

Blog data is all stored in the database, so of course an admin backend is needed. This backend can be made as a frontend-backend separated single-page application.

PS: Originally I only considered writing locally and then uploading. Later I added an online editing feature, which covers basic article editing and the experience is decent

Feature Requirements

So to summarize, the blog developed in this project needs the following features:

• Batch upload and import of local Markdown articles, parse article categories from the directory structure (supports nested multi-level categories), parse images in Markdown and import them into the website directory
• Batch upload of local photography works, read image EXIF information and import
• Configurable blog homepage (display pinned and featured articles, images, and categories)
• Code snippet editing and sharing
• The admin backend needs complete editing features for articles, categories, images, and code snippets
• The blog frontend needs the ability to quickly publish articles to platforms such as WeChat Official Accounts, Zhihu Columns, Blog Garden, Juejin, etc.

OK, that's about it~ More features may be added later when I think of them~

Tech Stack

Django would originally have been the best choice for the backend—it comes with a built-in admin, making it perfect for developing this kind of CMS.

However, I've been getting quite comfortable with C# lately, and I've also been learning AspNetCore, this high-performance web framework, and I find it pretty nice to use. You shouldn't reinvent the wheel with tools that are too simple, otherwise you lose the challenge and don't learn much that's new… So I settled on AspNetCore.

For the frontend I chose Vue, which I've used before. Aside from picking up a bit of React not long ago, my frontend stack hasn't been updated much, so I'll make do with it for a quick implementation first, and later consider refactoring with fun new tech like Blazor or Flutter~

So it's quite clear

• Backend: C# + AspNetCore
• ORM: FreeSQL
• Blog frontend: Bootstrap + Vue + editor.md + bootswatch
• Admin: Vue + Vuex + VueRouter
• Admin UI: SCSS + ElementUI

Blog Screenshots

Here are a few screenshots

Blog homepage

Article list

Photography page~~(although I haven't put the photos I took up there yet)~~

Admin backend homepage

Admin article list

Article editing interface

Admin image list

That's all the images for now due to length~

The blog will be deployed and go live soon, and I'll post the demo link then!