【C#】マークダウンとC#で数行コードを書くだけで静的サイトが作れる「Statiq Web」を紹介

はじめに

.NETの最新情報を毎週投稿してくれるWeekRef.NET: 週刊 .NETですが、どうやらStatiq Web + GitHub Pagesを用いて構築されていることを知りました。
weekref.net

気になり調べたところ、C#コードを数行書くだけで、記事を.mdで書くといい感じにサイトを構築してくれることが分かりました。結構便利そうだったので、今回は紹介したいと思います。

はじめに
Statiq Webの紹介
ローカルで利用してみる

Statiq Webの紹介

Statiq WebはStatiq Frameworkを利用して構築されているC#の静的Webサイトジェネレーターです。

Statiq Web is a powerful static web site generation toolkit suitable for most use cases. It's built on top of Statiq Framework so you can always extend or customize it beyond those base capabilities as well.

// DeepL翻訳
Statiq Webは、ほとんどのユースケースに適した強力な静的Webサイト生成ツールキットです。 Statiq Frameworkの上に構築されているため、これらの基本機能を超えていつでも拡張またはカスタマイズできます。

github.com

ローカルで利用してみる

まずはローカルでサイトを作ってみましょう。

また.NETがインストールされている前提で話をすすめていきます。ちなみにStatiq.Webはnetcoreapp3.1で作られているらしく、まあ今では.NET8を利用するのが無難かなと思います。

プロジェクトテンプレートよりプロジェクトを作成する

コンソールアプリケーションをdotnet templateから作成します。

$ cd <プロジェクトを作成したいディレクトリパス>
$ dotnet new console --name SampleSite -f net8.0

Visual StudioやRiderからコンソールアプリケーションを作成するのでも全く問題ありません。

Statiq.Webをインストールする

NuGetからStatiq.Webをインストールします。
www.nuget.org

$ dotnet add package Statiq.Web --version 1.0.0-beta.60

Program.csを編集する

.NET 6以降であれば最上位レベルのステートメントが利用できるので、以下を書くだけで終わりです。
最上位レベルのステートメント - C# チュートリアル - C# | Microsoft Learn

return await Bootstrapper
    .Factory
    .CreateWeb(args)
    .RunAsync();

コンテンツを追加する

inputフォルダの中に.mdを作成することでコンテンツを追加できます。まずはindex.mdを作成します。

.
└── SampleSite
    ├── Program.cs
    ├── SampleSite.csproj
    ├── bin
    ├── input
    │   └── index.md
    └── obj

↓ inputs/index.md

# はじめに
これはStatiq.Webで構築されたサイトです。

以下のC#コードと.mdファイルだけで構築することができました。
    
```csharp
return await Bootstrapper
    .Factory
    .CreateWeb(args)
    .RunAsync();
```

静的Webコンテンツを作成する

最後にProgram.csを実行して、outputフォルダにコンテンツを出力します。

$ dotnet run

outputの中身をどこかにホスティングすればOKというわけです。

.
└── SampleSite
    ├── Program.cs
    ├── SampleSite.csproj
    ├── input
    │   └── index.md
    ├── output
        ├── index.html
        └── sitemap.xml

templateを設定する

見た目がそっけないので、テーマを適応して華やかにしてみます。CleanBlogというテーマが公開されているのでそれを利用してみます。

公式ドキュメントではSubModuleを利用した方法が紹介されています。テーマをthemeフォルダ以下に置くことで自動で適応されるみたいです。

$ git submodule add https://github.com/statiqdev/CleanBlog.git theme

実際にビルドを行って出力が変わったか試してみます。またM1 Macだとビルドできずx64でないと私の環境だと動作しなかったのでご注意ください。

$ dotnet run

またサブモジュールは嫌というのはあるのかなと思います(別にテーマの方に楽にPR送りたいとかもないですし)。そこでNuGetより適応できるような仕組みを作ってくださっている方がいました。
GitHub - devlead/Devlead.Statiq: @devlead helpers for the static site generator Statiq

Devlead.Statiqを利用するとNuGetより適応できます。

dotnet add package Devlead.Statiq --version 0.20.1

https://www.nuget.org/packages/Devlead.Statiq

コードを一部だけ変更します。

return await Bootstrapper
    .Factory
    .CreateDefault(args)
    .AddThemeFromUri(new Uri("https://github.com/statiqdev/CleanBlog/archive/ceb5055f3d0f7a330708494ed21eb469cde62ce2.zip"))
    .AddWeb()
    .RunAsync();