A Blog Boilerplate for Statiq, the C# static site generator
Tags: dotnet, webdev, csharp
Published: 2020-05-14 10:53:14

---
title: A Blog Boilerplate for Statiq, the C# static site generator
published: true
date: 2020-05-13 09:00:00 UTC
tags: dotnet, webdev, csharp
canonical_url: https://wellsb.com/csharp/aspnet/create-blog-csharp-statiq/
cover_image: https://wellsb.com/csharp/wp-content/uploads/sites/2/2020/05/statiq-blog-boilerplate2-min.png
---

If you want to create a blog using a static site generator in 2020, you may be overwhelmed with all the options. In this guide, I hope to convince you why you should consider using [Statiq](https://statiq.dev) (formerly WYAM) for your next statically generated blog, and I will give you tips for getting started with this powerful tool.

## Why Statiq?

There is a plethora of popular tools for creating a statically-rendered blog, one that does not rely on databases or server-side processing. Without databases, static sites can be more secure, have faster load times, and can be hosted very inexpensively.

Among the most popular competitors to Statiq are Gatsby, Hugo, and Jekyll. Gatsby is based on the React Javascript library. Hugo is based on the Go programming language. And Jekyll is based on Ruby. However, you are at this site because you are a C# developer. If you are more comfortable in C# than you are in Ruby, Go, or the Javascript framework of the day, there is another important option you should consider for launching your static website — Statiq. The Statiq framework is built on .NET Core, so it is easy to extend if you are a .NET developer.

The Statiq framework allows you to create static content from a variety of sources, including input files such as Markdown, YAML, XML, as well as from databases and services. You can create a pipeline to handle content and data creation from virtually any source you might need, but fortunately for you, The developers of Statiq, mostly [@daveaglick](https://twitter.com/daveaglick) along with some other open-source contributors, have already created a toolkit, [Statiq.Web](https://statiq.dev/web/), with built-in pipelines capable of handling the most common scenarios.

## Getting Started with Statiq.Web

First things first. The **Statiq Framework** itself is completely free and open source under an MIT license. **Statiq.Web** is turnkey solution built on the Statiq Framework that also includes a live-reload preview server, out-of-the-box deployment capabilities, and other features to make getting started a breeze, It is licensed under the License Zero Prosperity Public License. The Prosperity license allows free use for non-commercial applications, but there is a $50 per developer, per major version fee to obtain a License Zero Private License for users intending to use the product in commercial applications.

To help you get started creating a static generated blog using Statiq.Web, I created a boilerplate template. To get started, clone the [statiq-blog-boilerplate project on Github](https://github.com/bradwellsb/statiq-blog-boilerplate).

[![](https://wellsb.com/csharp/wp-content/uploads/sites/2/2020/05/statiq-blog-boilerplate2-min-300x141.png)](https://wellsb.com/csharp/wp-content/uploads/sites/2/2020/05/statiq-blog-boilerplate2-min.png)

## Using the Template

Making customizations to your blog using the boilerplate is easy. Here are some common configuration suggestions.

To change your website title, blog title, and other details, edit the appropriate value in **Constants.cs**.

To change the subdirectory for your blog from **/blog/** to another path, change the name of the **blog** folder in the **input** directory and set the **BlogPath** string in **Constants.cs** to the new location.

To change the structure of post permalinks, change line 24 of **Program.cs**. By default, the boilerplate template uses `/{year}/{category}/{title}` for generating permalinks.

The sidebar is displayed by default. To hide it, add `HideSidebar: true` markup to the pages where you do not wish to show the sidebar.

To change the order of items in the sidebar, or to add your own widgets, simply edit **/input/blog/\_sidebar.cshtml**. If you want the sidebar to display on the left side of the page. Simply move things around in **/input/\_layout.cshtml**.

To adjust how posts are displayed in index and archive pages, adjust **/input/blog/\_posts.cshtml**. For example, you could create a card-style display by using the following code:

```html
<div class="row">
    @foreach (IDocument post in Model)
    {
        IDocument topicDocument = Outputs[nameof(Archives)][$"{Constants.BlogPath}/categories/{post.GetString("Category")}/index.html"];
        string excerpt = post.GetString(Statiq.Html.HtmlKeys.Excerpt);
        excerpt = excerpt.RemoveEnd("");
        var words = excerpt.Split().Take(50);
        excerpt = string.Join(" ", words);
        excerpt += $" ... <span class=\"small\"><a href=\"{Context.GetLink(post)}\">Read more</a></span></p>";
 
        <div class="col-12 col-md-6 @(Document.GetBool("HideSidebar")?"col-lg-4 col-xl-3":"col-xl-4") mb-3">
            <div class="card">
                <div class="card-header">
                    <h2 itemprop="headline name" class="card-title">
                        <a itemprop="url" class="small" href="@Context.GetLink(post).Substring(1)">@post.GetString("Title")</a>
                    </h2>
                    <div class="bh">
                        <time datetime="@post.GetString("Published")" itemprop="datePublished">@post.GetDateTime("Published").ToString("MMMM dd, yyyy")</time>
                        @if (topicDocument != null)
                        {
                            <a href="@(topicDocument.GetLink())"><span class="badge badge-info">@topicDocument.GetTitle()</span></a>
                        }
                    </div>
                </div>
                <div class="card-body">
                    <div itemprop="articleBody">
                        <div class="card-text">@Html.Raw(excerpt)</div>
                    </div>
                </div>
            </div>
            <div class="collapse" aria-hidden="true" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
                <meta itemprop="name" content="@post.GetString("Author")">
            </div>
            <meta itemprop="dateModified" content="@post.GetString("Modified")">
        </div>
    }
</div>
```

## Testing your Static Blog

Eventually, you will want to add your own content and blog posts to your new project. The boilerplate template includes sample posts in the **/input/blog/posts/** directory. Feel free to delete these posts and add your own to this folder using Markdown (.md) or any other supported syntax.

Once you have configured everything to your liking, run your project and start the preview server by executing the following console command from your project directory.

```
dotnet run -- preview
```

By default, your website will be accessible at `http://localhost:5080`. The preview server will tell you which port it is listening on.

## The Bottom Line

In this guide, you learned about Statiq, the C# static site generator, and you learned how you can use Statiq.Web to create a blog. Feel free to peruse my template source code on GitHub at [bradwellsb/statiq-blog-boilerplate](https://github.com/bradwellsb/statiq-blog-boilerplate/) to learn more about the cool things you can do this with free boilerplate!

[![](https://wellsb.com/csharp/wp-content/uploads/sites/2/2020/05/statiq-blog-boilerplate-cards-min-300x122.png)](https://wellsb.com/csharp/wp-content/uploads/sites/2/2020/05/statiq-blog-boilerplate-cards-min.png)

[Source](https://wellsb.com/csharp/aspnet/create-blog-csharp-statiq/)