C#製の静的サイトジェネレータ「Statiq」でブログを書く

6009 ワード
ブログ C# 静的サイトジェネレーター C# テキストリンク

この記事は、C#製の静的サイトジェネレータ「Statiq」を使ってブログを作る記事です。

Statiqは、Razor構文でサイトのレイアウトを作って、MarkDownで記事を書いて、dotnet run！！でHTMLを出力してくれる便利ツールです。
タグや公開日などのメタデータも管理できます。

Razor構文でHTML/CSSが書けるのでページデザインの自由度が比較的高いのと、C#でモジュールと呼ばれる処理部を追加することで色々な機能を追加していけるのが特徴です。
また、用意されているテーマを導入すれば、簡単にブログのレイアウトにすることができます。

※変更履歴

  • 2022/2/28
    • 「2. 記事を書く」のpreviewコマンド実行時のアクセス先をlocalhost:5000 ⇒ localhost:5080に修正

Get Started

以下の公式サイトで、簡単なHTMLファイルを出力する手順が紹介されています。
15分くらいで終わります。

最後まで行くと、Hello World！と表示されるページをLocalHostにデプロイできます。
↓↓こんな感じです。

ブログテーマの適用

Statiqで作成するサイトは、初期状態のままではブログの形式になっていません。
ブログの形式にするために、CleanBlogというテーマが用意されています。
Githubのレポジトリは下記です。

ReadMeに導入手順や説明が書いてあるのですが、以降で簡単な手順をまとめていきたいと思います。

ちなみに、最終的には下記のようなサイトが出来上がります。
（Statiqの作者の方のブログです。）

1. CleanBlogテーマの適用

Get Startedで作成したフォルダの直下にCleanBlogのレポジトリをクローンし、フォルダ名を"theme"とします。

git clone https://github.com/statiqdev/CleanBlog.git theme

そうすると、ビルド時に自動でthemeフォルダ内のファイルが反映され、先程紹介したブログのようなレイアウトになります。
簡単ですね。

2. 記事を書く

MarkDownで書きます。
記事を書いたら、文章の一番上に下記のようなヘッダを追記します。
（StatiqではFront Matterと呼ばれています）

Title: This Is An Example Post     //pageのタイトル
Published: 12/13/2014              //公開日
Tags:                              //ブログのタグ（複数設定可）
  - Examples
  - Csharp
---

Get Startedで作成したinputフォルダ内の "index.md"は、themeフォルダ内の
"index.cshtml"と競合してしまうので削除します。
そして、inputフォルダ内に"posts"フォルダを作成し、書いたmdファイルをpostsフォルダに保存します。

ここで、いったんプレビューを実施してみると、ブログの形式になっているのが確認できます。
プレビューのコマンドを実行して、localhost:5080へアクセスします。

dotnet run -- preview

↓↓すると、下記のようになります。

記事が一つもないと、HTMLファイルが出力されないのでご注意ください。

3. 固定ページを作る

自己紹介、プライバシーポリシーなどの固定ページを作成するには、inputフォルダ直下にMarkDownファイルを保存します。
そうすると、ページ上部にリンクが追加されます。

ためしに、ABOUT.mdというファイルを作成すると↓↓のようになります。

4. Statiqの設定

設定は設定ファイルで変えることができます。
themeフォルダ内にある "settings.yml" が設定ファイルです。

設定項目の一覧は、下記のソースコードで確認ください
（公式HPのドキュメントでは散らばっていたり、そもそも説明がなかったりするので、下記のソースの方が見やすいかと思います。）

Sitemapを使用する場合は、 "Host"と"LinksUseHttps"を設定しないと正しく出力されませんので、設定をおすすめします。
ブログのタイトルなども、ここで変えられるようになっています。

5. cssの変更・追加

cssを変更・追加したい場合は、inputフォルダ ⇒ scssフォルダ ⇒ _overrides.scssにcssを記述します。
ここに記述されたcssは、従来のものに上書きされます。
例えば色やレイアウトなどを変えることができます。
また、themeフォルダ内のcssを直接変更してしまっても大丈夫です。

6. HEADへのScript追加（google analyticsなど）

themeフォルダ⇒inputフォルダ内の_head.cshtmlファイルで、<HEAD>タグ内へのスクリプト追加ができます。
google analyticsなどのスクリプトを追加したいときは、_head.cshtmlにスクリプトをコピペすると、全ページの<HEAD>タグ内に追加されます。

7. HTMLへの変換

program.csがあるフォルダでコンソール（コマンドプロンプトもしくはPowerShell）を立ち上げてdotnet run を実行すると、outputフォルダにHTMLを出力してくれます。

最終的なフォルダ構成は下記のようになっています。

フォルダ構成
├─ input ─┬─ () 　　 <= 固定ページ　　
│ 　 　　 　└ posts　 　<= ブログ記事
├─ theme
├─ output　　　　　　 <= HTML出力
├─ Program.cs
└─ xxxx.csproj

8. sitemapの作成

dotnet runを実行したときに、outputフォルダに自動出力されます。


以上が、Statiqの手順になります。

作ったサイトの公開

静的サイトの公開にはホスティングサービスを利用します。
Qiitaを見ている方はエンジニアだと思いますので、Github Pagesをお勧めします。
無料で使えて、Google Adsenseなどの広告も貼ることができます。
独自ドメインも適用可能のようです。

手順は公式ページが詳しいですので、参照ください。

また、Github pagesは、「utterances」というオープンソースのツールを使うことでコメント欄を追加することができます。
issueを利用してコメント欄を追加しているようです。
導入手順は下記の記事にまとめていますのでご興味があれば参照ください。


これで、ブログを作成して、公開することができました。

まとめ

Statiqでブログを書く方法をまとめてみました。
MarkDownで記事を書いてpostsフォルダに追加していけば、どんどんブログ記事が増えていきます。
お手軽で使いやすいかと思います。

また、今回はテーマを使用しましたが、Razor構文で自分でレイアウトを作ることも可能です。
HTMLで書けるので、比較的自由度が高く、フロント側の勉強にもなります。

私もブログを作っていて、ブログの構成やデザインを自分で作りました。
（イラストは娘（5）が書いてくれたのを使っています。）
下記で少しやり方を紹介していますので、興味があったらご覧ください。

以上です。
Statiqおすすめですので、ぜひ導入して快適なブログライフをお楽しみください。