Generating static sites in ASP .NET Core using Statiq

Oct 14, 2020

Introduction

Let us first start with the introduction of Jamstack. As the name suggests, it is a stack that uses only Javascript, APIs and Markup to build websites. There is no need of using servers to serve these type of sites as no backend technologies like PHP, ASP.NET are used. These type of sites can simply be hosted on any type of CDN (Content Delivery Network). Basically, a static site generator like Hugo, Gatsby, Nuxt, etc are used to generate all the static pages on the deploy time.

'Statiq' is a static generation platform based on .NET. It also uses the same ideology of generating static content at deploy time. Statiq comes with three major components Statiq.Web, Statiq.Framework and Statiq.Documentation. Here, I will be exploring the usage of Statiq.Web which is a static site generator.

For this tutorial, I Will be using Visual Studio Code. However, the process remains the same in case of Visual Studio as well. Only the project creation process and the way to add packages change.

Creation of Project

The process starts with the creation of a dot net core console project. This console project will act as the base project that will generate the static pages for our website.

You must have installed .NET Core SDK in your computer along with all necessary tools to support the development of projects based on .NET. In my case, I am using .NET Core 3.1

First, fire up your terminal and issue the following command to create a new dotnet core console project.

dotnet new console --name mystaticwebsite

This will create a folder named "mystaticwebsite" with a dotnet core console project inside it.

We have to add the package Statiq.Web to our project. Open up the terminal in Visual Studio Code by pressing Ctrl + ~. We can add the package by issuing the following command in the terminal.

dotnet add package Statiq.Web --version 1.0.0-beta.5

At the time of writing this article, the project still is in beta. So, the command to install the package will change in future.

Now, modify the Program.cs file as shown below:

using System;
using System.Threading.Tasks;
using Statiq.App;
using Statiq.Web;

namespace mystaticwebsite
{
    class Program
    {
         public static async Task<int> Main(string[] args) =>
            await Bootstrapper
            .Factory
            .CreateWeb(args)
            .RunAsync();
    }
}

Now create a folder named 'input' in the root directory of your application. This folder will contain all the articles and other necessary assets required to build your website. Inside the input folder create a '_Layout.cshtml' which will be the main layout for the website. And also create a file named 'Index.cshtml' which will be the default page of the website. Now, create another file named '_ViewStart.cshtml' and paste the following code.

@{
    Layout = @"/_layout.cshtml";
}

Now, let's run the application by issuing the following command:

dotnet run -- preview

This will start the application in localhost in port 5080. Now, if you navigate to http://localhost:5080, you can see your static site. This is the basic starter application for statiq websites. If you want to go through the details, you can browse the github page of dotnet foundation website. This is an open source project built with Statiq. You can go through the code and get idea about how Statiq works.

The source code for the application in this article can be found here.