Generating static sites from ASP.NET Core MVC apps

Introduction

As a longtime .NET developer, it has bothered me that there is no way for us to have cheap/free apps with the tools we know. Consider this simple/general scenario:

You are a C#/.NET developer who knows a little about web development but not much (or at all) of the numerous JS frameworks that exist nowadays. You want to develop a simple static website for yourself or a friend/family member and you want it to be as cheap as possible and even better if it’s free since it’s not a critical website. What are your options?

Reading: How to create a static website using asp.net

1. Write the entire website using HTML+CSS+JS only. Although you know and know the technologies, you must remember to update all HTML files every time you want to update header/footer.
2. Spend countless hours trying to learn a new JS framework (React.js , Vue.js , Angular etc. etc. etc.). This gives you a lot of flexibility and you can end up with a great site, but do you have the time to learn the framework and is the site dynamic enough to ensure download time of all libraries?
3. Accept the fact that the stack you know is expensive to run because even if .NET is OSS and runs on Linux, most free/cheap hosting solutions only accept some server-side JavaScript frameworks and therefore pay a premium static website. $5 a month might not be a lot of money for people in certain countries, but it’s a lot in many places.

Let’s go through another scenario. You are developing a website for a product/service that may need a backend in the future if things go well. You don’t want to pay for a backend now since you don’t need it, but then you have the same problem again. Either you:

1. Do everything in a static/client-side framework and spend the time learning the framework and so on. If necessary, then rebuild the application in ASP.NET Core MVC as you normally would. Or,
2. You pay to host ASP.NET Core up front.

Clearly, we lack a way to use ASP.NET Core MVC , without paying for a backend when it’s not necessary. Unfortunately, Microsoft has never given us anything like this. While we have options like Blazor, this is again a new framework to learn and you have to keep in mind the limitations surrounding WebAssembly, not to mention the massive size of the libraries for just a static website.

Introducing the .NET tool: ssg

Recently I started thinking about the idea of ​​compiling all views from an ASP.NET Core MVC into HTML files, which can then be used as static site can be used. Since Razor supports compiling views through services, this could also be used to generate HTML files.

From this idea and playing around with the framework, the ssg .NET tool was born: https:/ /github.com/CamiloTerevinto/TerevintoSoftware.StaticSiteGenerator.

How it works

See also: How to Publish an App to the App Store

This .NET tool works as follows:

• You create your ASP. NET Core MVC projects as usual. You use controllers, views, layouts, partials, etc. and use Visual Studio (or VS Code) to run your app locally.

• If you are happy with the application Like it is, install the .NET tool (if not already installed). This can be done globally, for example, as follows:

  dotnet tool install -global TerevintoSoftware.StaticSiteGenerator.Tool

• The tool can then be called with the following command (Release 1. x):

  ssg -project path -output path

  Where:-project refers to the directory of the MVC project. The views folder is expected to contain the project’s views, and the wwwroot folder is expected to contain the static assets that the web application uses. -output refers to where the tool saves the generated files.

Tool output

The ssg tool then:

1. Copies all files from the wwwroot folder to the output folder, removing wwwroot as that is not part of the compiled files route.
2. Loads the specified assembly, finds the views and generates an HTML file for each non-partial view it finds. For example:
   • Home/Index.cshtml => rendered as index.html
   • Home/About.cshtml => rendered as about.html
   • Blog/Index .cshtml => rendered as blog/index.html
   • Shared/_Layout.cshtml => skipped
   • /_ViewImports.cshtml => skipped

See also: Add Files or Folders to ZIP Archives Programmatically in C

The result is the output folder containing all the necessary files ready to be published in a hosting provider. For example:

For example, if we look at the index file:

You can see that this is a standard MVC template layout is (with a few small changes) that rendered the body, which is also from the MVC template.

If we look at the transformation as a whole:

The Good Part of being a .NET tool that can be run after the website is compiled, best eht is that it also allows for more complex setups, for example you could have a GitHub pipeline that builds the application, installs the tool, renders the website to HTML and publishes the output to a hosting website (like Google’s Firebase, Azure’s static website for storage accounts, Azure’s static web apps, AWS’s S3, etc.). ).

See also: How to Create a Fantastic Hip Hop Website?

If you’ve read this far and want to help with the build, please know that your contributions are welcome in the GitHub repository: https://github.com/CamiloTerevinto/TerevintoSoftware.StaticSiteGenerator.< .