C#による自家製じかせい静的せいてきサイトジェネレーターに移行いこうした話はなし

2021-11-21

見みた目めはほとんど変かわっていませんが(とはいえ横よこ幅広はばひろくしたので印象いんしょうは結構けっこう変かわったかも)、このサイト、フルリニューアルしました。内部ないぶ構造こうぞうが。完全かんぜんに。別物べつものに。元々もともとはWordPressだったのですが、今回こんかいから自作じさくの静的せいてきサイトジェネレーターでhtmlを生成せいせいし、GitHub Pagesでホストするようにしました。元もとになるソース(.md)もGitHub上じょうに置おき、GitHub ActionsでビルドしてGitHub Pagesでホスティングされるという、完全かんぜんGitHub完結かんけつソリューション。また、記事きじを書かくエディタもGitHub web-based editor(リポジトリのトップで.を打うつと、VS Codeそのものが起動きどうするやつ)を利用りようすることで、非常ひじょうに快適かいてきで、というかMarkdownエディタとしては最高さいこう品質ひんしつのものが乗のっかっていて、たかがブログ書かくにしては面倒めんどうくさいPush/Pullもなくダイレクトコミットで反映はんえい出来できてしまうというのがとても良よい体験たいけんになっています。

neuecc/Blog2

.でエディタを起動きどうして、articles配下はいかにYYYY-MM-DD.mdファイルを新規しんき作成さくせい。

完全かんぜんにVS Codeそのものでデスクトップアプリのものと全まったく区別くべつが付つかないレベルで、これを超こえる品質ひんしつのエディタを普通ふつうのサイトに乗のせることは不可能ふかのうでしょう。当然とうぜんもちろん画像がぞうのプレビューもできますし、なんだったら拡張かくちょうすら入はいる。

GitHub管理かんりだと画像がぞう置おき場ば（アップロード）が面倒めんどうくさい問題もんだいがあるのですが、これはIssueを画像がぞうアップローダーとして使つかうことで回避かいひしています。Issueの入力にゅうりょくフォームは、画像がぞうをCtrl+Vでそのままアップロードが可能かのうです。そして嬉うれしいことに、マークダウンに変換へんかんしてくれているのでコピペするだけでOK。

上あがった先さきのuser-images.githubusercontentは別べつにIssueそのものと紐ひも付ついているわけではないので、アップローダ用ように使つかったIssueはSubmitすることなくポイ、です。そうしてどこにも紐ひも付ついていないuser-images.githubusercontentですが、別べつにだからといって削除さくじょされることもなく永続えいぞく的てきに上あがり続つづけているので、遠慮えんりょなく使つかわせてもらうことにします。まぁちゃんとGitHub上じょうに上あげてるコンテンツ用ように使つかっているので、許ゆるされるでしょう、きっと。多分たぶん。

そうして出来上できあがった記事きじは、そのままエディタ上じょうのgit UIからコミットすると、自身じしんが作業さぎょうしている領域りょういきは直接ちょくせつサーバー上じょうのmaster(main)なので、プッシュ不要ふようで反映はんえいされます。

こうなると、もうWordPressで投稿とうこうをポスト、するのと変かわらないわけです。ブログ記事きじ程度ていどでcloneしてpullしてstagingしてpushしてというのは地味じみに重おもたいので、このぐらい身軽みがるで行いきたいですね。（実際じっさい、投稿とうこう後ごに編集へんしゅうラッシュとかよくあるので、ちょっと手数てかずが増ふえるだけで猛烈もうれつに嫌気いやけがさす）

ジェネレートはworkflows/buildy.ymlで、このリポジトリ内ないに配置はいちされてるC#プロジェクトを直接ちょくせつビルド/実行じっこうすることで生成せいせい処理しょりをしています。dotnet run便利べんり。

build-blog:
runs-on: ubuntu-latest
steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-dotnet@v1
      with:
        dotnet-version: 6.0.x
    - run: dotnet run --project ./src/Blog2/Blog2.csproj -c Release -- ./articles ./publish
    - uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./publish
        keep_files: true

生成せいせいされたファイルはpeaceiris/actions-gh-pagesを使つかってgh-pagesブランチと同期どうきします。その際さい、デフォルトでは既すでに上あがってるファイルを全ぜん削除さくじょしてしまうので、今回こんかいはstyleやassetを、同期どうきとは別べつに置おいてあるので削除さくじょされると困こまるので、keep_files: trueも指定していしています。そうすると記事きじの削除さくじょがしづらくなるんですが、記事きじの削除さくじょはしない or どうしても削除さくじょしなかったら二に重じゅうに(articlesとgh-pages)削除さくじょすればいいだけ、という運用うんようで回避かいひ。

と、いうわけでシステム的てきには満足まんぞくです。

C#でもStatiqなどといった静的せいてきサイトジェネレーターは存在そんざいするのですが、あえて自作じさくした理由りゆうは、サイトのシステムをそっくり移行いこうするという都合つごう上じょう、URLを前まえのものと完璧かんぺきに合あわせたかったというのがあります。生成せいせい結果けっかのファイル一覧いちらんが若干じゃっかん変へんというかクドいというか、といったところがあるのですが、これは前まえのWordPressでやっていたルーティングをそのまんま再現さいげんするためということで。WordPressからのエクスポートも、DB直接ちょくせつ見みてC#でそのままテーブルダンプから作つくったので、まぁ別べつに大たいしたコードが必要ひつようなわけでもないので一気いっきに作つくっちゃえという気きになったというのもあります。

外部がいぶライブラリとしてはMarkdownのHTML化かにMarkdigを採用さいようしました。色々いろいろ高機能こうきのうではあるのですが、今回こんかいは Markdown.ToHtml(input) しか使つかっていませんけれど、感触かんしょく的てきにはとても良よかったです。

シンタックスハイライトにはPrism.jsを用もちいました。Markdigの出力しゅつりょくする```csharpの変換へんかんを、特とくに何なにも意識いしきせずとも対象たいしょうにしてくれるのが良よかったですね。プラグインはautoloaderとnormalize-whitespaceを合あわせて投下とうかしています。

<script src=""https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-core.min.js""></script>
<script src=""https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js""></script>
<script src=""https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js""></script>

まとめ

最近さいきんブログ投稿とうこうがだいぶ減へってしまっていたのですが、システムも一新いっしんしたことでやる気きが出でてきたのでいいことです。まぁ見みた目めは本当ほんとうにあんま全然ぜんぜん変かわってないんですが……！

なお、反映はんえいに必要ひつような所要しょよう時間じかんは30秒びょう弱じゃく。

遅おそいっちゃあ遅おそいですが、許容きょようできるといえば許容きょようできますね。サイトジェネレートプログラムの実行じっこう時間じかん自体じたいは1秒びょう以下いかで、別べつに全然ぜんぜん時間じかんかかってないんで、CIセットアップとか、それ以外いがいの時間じかんが何なにかとかかっちゃってます。GitHub Actionsの仕組しくみ的てきにしょうがないといえばしょうがないんですが、もう少すこしなんとかなってほしいかなあ。あとGitHub Pages自体じたいが反映はんえいが若干じゃっかん遅おそい。遅おそい上うえに進捗しんちょくが分わからないのが地味じみにストレスフル。とはいえとはいえ、良よいんじゃあないでしょうか。良よさの殆ほとんどはGitHub web-based editorから来きてますね、これは本当ほんとうに革命かくめい的てきに良よい。というわけで、このweb-based editorを活いかすシステムを作つくっていくという手段しゅだんと目的もくてきを逆転ぎゃくてんさせた思考しこうが最終さいしゅう的てきに実際じっさい良よいんじゃないかと思おもってます！

C#による自家製じかせい静的せいてきサイトジェネレーターに移行いこうした話はなし

まとめ

Profile

Archive