StarBlog Development Notes (5): Starting to Build the Web Project

Series Articles

• Developing a Blog Project with .NetCore: StarBlog - (1) Why Write Your Own Blog?
• Developing a Blog Project with .NetCore: StarBlog - (2) Environment Setup and Creating the Project
• Developing a Blog Project with .NetCore: StarBlog - (3) Model Design
• Developing a Blog Project with .NetCore: StarBlog - (4) Batch Import of Markdown Blogs
• Developing a Blog Project with .NetCore: StarBlog - (5) Starting to Build the Web Project
• ...

Preface

It's been a while since the previous article in this series was published. I recently got worn out by a training event, and after a weekend of rest I finally recovered. Time to get back to updating the blog~

After the earlier model design and blog data import, the project's preparatory work is basically done, and we can start building the website. This article will document the process of setting up the AspNet.Core Web project for the StarBlog blog.

A Quick Recap

Let's recap: our Web project is an MVC-type project. Serving as the blog's frontend, this project uses server-side rendering for better SEO, meaning this part of the blog site is written without frontend-backend separation.

Organizing the Project

Open the AspNetCore Web project StarBlog.Web we created earlier. The default directory structure generated by the template looks something like this:

StarBlog.Web
├── Controllers
│   └── HomeController.cs
├── Models
│   └── ErrorViewModel.cs
├── Properties
│   └── launchSettings.json
├── Views
│   ├── Home
│   ├── Shared
│   ├── _ViewImports.cshtml
│   └── _ViewStart.cshtml
├── wwwroot
│   ├── css
│   ├── js
│   ├── lib
│   └── favicon.ico
├── Dockerfile
├── Program.cs
├── StarBlog.Web.csproj
├── appsettings.Development.json
└── appsettings.json

As you can see, it automatically generated a bunch of stuff. Some of it we don't need, some we can make use of. Let's tidy things up first.

The static assets in the wwwroot directory aren't needed. The bootstrap and such that come with the template aren't suitable for putting into git either. Later we'll manage static assets ourselves with NPM, so delete all the files under the wwwroot directory.

What's in Views are page templates; the code inside will all need to be rewritten. Leave them for now and just rewrite them later.

The ErrorViewModel.cs in Models isn't being used, so it can be deleted~

That's enough for now. On to the next step.

Introducing NPM to Manage Frontend Assets

I heard that in the .Net Framework era, frontend assets could even be managed through NuGet, but there were too few packages and updates couldn't keep up with NPM, so it's been abandoned in the .Net Core era. I previously wrote a blog post detailing how to use NPM and Gulp to manage static assets in an AspNetCore Web project, which can serve as further reading for this part of the article: Asp-Net-Core Development Notes: Managing Frontend Static Files with NPM and Gulp

This part depends on a Node environment. If you don't have Node installed locally, please download and install it from the official website first: https://nodejs.org/en/download/

In the StarBlog.Web project directory, run the command to initialize a Node project (mainly to generate the package.json file)

npm init

Then edit the package.json file directly to add dependencies

{
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-changed": "^4.0.3",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-rename": "^2.0.0",
    "gulp-uglify": "^3.0.2",
    "rimraf": "^3.0.2"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.0.0",
    "bootstrap": "^5.1.3",
    "bootswatch": "^5.1.3",
    "editor.md": "^1.5.0",
    "jquery": "^3.6.0",
    "masonry-layout": "^4.2.2",
    "vue": "^2.6.14"
  }
}

These are the frontend dependencies this project needs. After dumping them all in, run the command to install the dependencies in one go

npm install

At this point, NPM's mission of managing frontend assets is complete.

Using the Frontend Automation Tool Gulp

Next we need to solve a problem: the dependencies installed by NPM are all in the node_modules directory. How do we get these assets into the wwwroot directory? Copy and paste manually? No, that's way too much trouble. The frontend toolchain provides us with a more convenient productivity tool—Gulp.

For an introduction to Gulp, you can check out my previous blog post: Asp-Net-Core Development Notes: Managing Frontend Static Files with NPM and Gulp

I won't repeat it here. Just install it:

npm install --global gulp-cli

Then create a gulpfile.js file in the StarBlog.Web directory. The content is fairly long, so I won't paste it all here. The full code can be viewed on GitHub: https://github.com/Deali-Axy/StarBlog/blob/master/StarBlog.Web/gulpfile.js

Here's the key configuration

// 使用 npm 下载的前端组件包
const libs = [
    {name: "jquery", dist: "./node_modules/jquery/dist/**/*.*"},
    {name: "popper", dist: "./node_modules/popper.js/dist/**/*.*"},
    {name: "bootstrap", dist: "./node_modules/bootstrap/dist/**/*.*"},
    {name: "bootswatch", dist: "./node_modules/bootswatch/dist/**/*.*"},
    {name: "prismjs", dist: "./node_modules/prismjs/**/*.*"},
    {name: 'vue', dist: './node_modules/vue/dist/**/*.*'},
    {name: 'masonry-layout', dist: './node_modules/masonry-layout/dist/*.*'},
];

// 使用 npm 下载的前端组件，自定义存放位置
const customLibs = [
    {name: "editormd", dist: "./node_modules/editor.md/*.js"},
    {name: "editormd/css", dist: "./node_modules/editor.md/css/*.css"},
    {name: "editormd/lib", dist: "./node_modules/editor.md/lib/*.js"},
    {name: "editormd/examples/js", dist: "./node_modules/editor.md/examples/js/*.js"},
    {name: 'font-awesome', dist: './node_modules/@fortawesome/fontawesome-free/**/*.*'},
]

Done. What we've configured is to copy the frontend dependencies into the wwwroot/lib directory

Then run the command

gulp move

Done~

If you find it annoying to type the command every time after adding a frontend dependency, you can check out my previous blog post on configuring Gulp, set it up in the IDE, and then just click a button from then on.

Modifying the _Layout Template

With the frontend assets all ready, next let's modify the main frontend template to make writing pages easier going forward~

Edit the Views/Shared/_Layout.cshtml file and modify the reference code under the <head> node

<head>
    <!-- 第三方依赖 -->
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="~/lib/font-awesome/css/all.css">
    
    <!-- 我们自己写的样式 -->
    <link rel="stylesheet" href="~/css/features.css">
    <link rel="stylesheet" href="~/css/metro.css">
    <link rel="stylesheet" href="~/css/footer.css">

    @await RenderSectionAsync("head", false)
</head>

Modify the JS references at the end

<!-- 第三方依赖 -->
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/vue/dist/vue.js"></script>
<!-- 我们自己写的js -->
<script src="~/js/site.js"></script>
@await RenderSectionAsync("bottom", false)

Some of the specific code is too long so I won't paste it. When we get to specific features I'll paste the key code. Since the project is basically complete and the code is all on GitHub, you can refer to the GitHub code~

At this point the preparatory work for writing pages is done. Next it's just a matter of writing the pages one by one~