aridai.NET
このサイトをNetlifyで運用することにしたお話

Netlifyに移行したお話

タイトルにあるように、この aridai.NETNetlify で運用することにしました。
Netlify はとても強いサービスで、Git リポジトリの内容を自動でビルド&デプロイしてくれます。
私も GitHub にリポジトリを置き、静的サイトを生成する Node.js のCLIスクリプトを TypeScript で書いて、Netlify でのデプロイ時にそれを実行させています。
本当に強くて、プルリクのタイミングでビルドされ、CIが走り、生成されるページのプレビューなどもできちゃいます。

HugoHexo などの静的サイトジェネレータを利用している人も多いみたいですが、私は TypeScript の練習も兼ねて自分で全部書いてみました。
さすが Microsoft 製の言語なだけあって、C# 使いの私でもスラスラと書けましたね。
今は Kotlin も勉強中なんですけど、Kotlin にもなんとなく似ていていい感じです。

あと、GitHub Flow を試してみました。
Netlify を使うことになって、プルリクベースのマージ方法が主流になったので、master にどんどんプルリクを投げていった方がスムーズでいいですね。
ココらへんも機会があればもう少し勉強してみたいです。

追記: 実装について

(2019/02/03 追記)
Netlify で走らせているスクリプトについてもう少し詳しく書きたいと思います。

簡単に処理の流れを

Netlify では動的にサーバでの処理を実行させることができず、静的サイトジェネレータなどのスクリプトを実行させ、実行後にデプロイ用ディレクトリに入っているコンテンツを表示してくれるという感じなのです。

私は GitHubmaster ブランチに更新内容がマージされると、次のようなスクリプトが実行されるように設定しました。

  • NodeのCLIスクリプトを実行する。
    (静的サイトジェネレータの役割)
    • 存在しているMarkdownを取得する。
    • html形式にパースする。
    • テンプレートを使って記事ページを生成する。
    • 公開用ディレクトリに配置する。
  • TypeScriptのビルドコマンドを実行する。
    • クライアント側で動かすスクリプトをトランスパイルする。
    • 公開用ディレクトリに配置する。

みたいなことをさせています。

記事のパースとか

私の記事はすべて GitHub Flavored Markdown 記法に TeX (KaTeX) 記法を追加したフォーマットで書かれています。

実装方法ですが、メインに使っているパーサライブラリは Marked.js で、これのデフォルト設定によって GitHub Flavored Markdown としてパースするようにさせています。 そして、コードのハイライトに highlight.js を使っていて、数式には KaTeX を使っています。

数式はパース処理を行う前に Marked.lexer で段落トークンを取得して、その中に現れたドルマークで囲まれた部分を、単純な正規表現で抜き出してやり、これを KaTeX でパースしてやるといった感じに処理しています。
Marked.js はいろいろといじりやすい形で提供されているのでとても助かりました。

記事の生成とか

記事ページのhtml文字列の生成には EJS を使いました。
html中にスクリプトが書けて、View側の処理 (htmlタグの生成など) をそこでしてしまえば、Model側で表示用のデータ整形について一切気にしなくても良くなるというのがかなり強かったです。

作成日: 2019/01/19, 最終更新日: 2019/02/03