Setting up my Website & Blog using Statiq

Step-by-step guide on how to set up your website and blog using Statiq by Dave Glick

Published on Sunday, 18 April 2021

I have wished for my own site & blog for a very long time. Yet, I am clearly not a full-stack or even remotely a frontend developer. I am classic backend guy - the sort of which one would now call DevOps engineer or SRE.

Basically, I have not the slightest clue about how to build web-frontends with JavaScript, all these frameworks and CSS, LESS, SASS - you name it. I don't know much about these technologies and I think the're a mess. Whenever I do frontend development, I have a strong feeling, it is non-deterministic.

So I really struggled with building my site and never did it for many years.

Then there comes Dave Glick and his latest creation: Statiq.

Statiq is is a "Static Site Generator" - effectively a .NET Core CLI application that uses so called Pipelines to ingest arbitrary data from any source, processes it via one or more Modules to Documents (which are an object containing content and metadata) and ultimately generating static content. This generated output could really be anything: a static website, a PDF, JSON data etc.

Find out more about how Statiq works in the Statiq.Framework docs.

Layout

Statiq-based sites, as mentioned above, consist of code for pipelines, metadata and content files.

A typical project folder structure looks like this:

.
└───YourProjectName
    ├───input
    │   ├───images
    │   ├───posts
    │   └───scss
    ├───output
    │   ├───images
    │   ├───img
    │   ├───js
    │   ├───posts
    │   ├───scss
    │   ├───tags
    │   └───vendor
    ├───theme
    │   └───input
    │       ├───img
    │       ├───js
    │       ├───scss
    │       └───vendor
    └───wwwroot
  • input defines all the content & metadata that is used as input for the Statiq pipelines, which eventually get transformed to ouptput
  • theme contains all the pipeline code. I am using CleanBlog (by the Statiq development team) as a sub-module to my repository. However, I have forked it so I can make my own custom changes and contribute to the upstream repository.
  • output is where all the generated content goes. The contents of this folder is what you would deploy to your web-server.

Creating content & publishing

You can create content by adding files to the input directory. Check out the Statiq Docs for more info.

To transform the input to output, just run dotnet run. This will run all the pipelines and generate the static content.

Since you might not be sure what the effects of your content additions are before generating and loading it in a browser, you can run dotnet run -- preview to start a preview server. It watches the input files for changes and automatically regenerates, refreshing your browser.

Header Photo by Patrick Tomasso on Unsplash