4 Steps to Get Started with Static Content Generator Statiq

Statiq is a static content generator written in c# that is used to generate the site you are reading right now. It is an incredibly robust and feature full project. This blog will walk through a series of steps to create your own blog similar to this one. The source for the app that generates this site is open source at https://github.com/e13tech/blog. Feel free to browse the source and get inspiration for your own project.

Step 1 – Create .NET Console App

Create a new .NET console app and add the Statiq.Web Package:

dotnet new console --name AwesomeBlog
cd AwesomeBlog
dotnet add package Statiq.Web --version 1.0.0-beta.13
md input
md theme\input

Most of this is fairly intuitive but in case you need some more details:

[1] : Create a .NET console app that will be the generator for your site

[2] : Navigate into the directory for your new console app

[3] : Add the Statiq.Web nuget package, at the time of writing this Statiq is still prerelease so specify the version

[4] : Create the input directory that will host

[5] : Create the theme input directory that will contain the layout and other site assets

Step 2 – Create Bootstrapper Program.cs

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

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

A very straight forward Program.cs, notable lines:

[2] : The core Statiq framework namespace with the original Bootstrapper.Factory comes from

[3] : The Statiq Web namespace which provides the .CreateWeb(..)

[9-13] : Have the Main(string[]) method await the call to the Statiq

Step 3 – Create New index.md file

Create a new index.md file within the input directory with the following content:

Title: My First Statiq page
 ---
 # Hello World!

 Hello from my first Statiq page.

There are countless great sources online explaining how Markdown works including the official Statiq website. In a follow-up post I will go through an example of how I am utilizing this input files.

Step 4 – Launch Previewer

Launch the built-in previewer from a terminal window

dotnet run -- preview

If all went well Statiq will display a bunch of diagnostic information and then host your new site at https://localhost:5080 with livereload meaning that you can edit your site content in your favorite editor such as VS Code and the browser will reload to display your changes as you save.

Most of these steps here are borrowed directly from the Statiq Quick Start and adjusted for my content. Combining Clean Blog Template with a responsive web template will get you most of the way toward having a blog of your own. Let’s look at some of the modifications I made beyond this.

Statiq Web is built on top of Statiq Framework and this series covers a small fraction of the functionality of this fantastic project. So far, I am very happy with this platform and am anticipating the release of Statiq Docs which is built on top of the Statiq Web with a focus on generating .NET API documentation.