縁起物の式年遷宮

Engimonoのノート移行先として、FranklinとGitHub Pagesによる静的サイトを作成したメモ。

背景

CSとCAEの論文読みPodcastであるEngimonoでは、エピソードの収録に先立つ形で論文読みノートを作っている。 Engimonoエピソード0で話したように、このノートはPodcastサイトのドメインの下に作成できると収まりが良い。 げんにいくつかのPodcast（たとえばResearchat.fm, Interaxion Podcast）ではドメインの下にブログ等の読み物が置いてある構成を見かける。 しかし僕はRubyに明るくなく、そのためJekyllの使い方、狭義にはYattecastのカスタマイズの仕方がわからなかった。 そこでやむなく手元にあったはてなブログに論文読みノートを書いていくことにした。

はてなブログのよい点はMarkdown記法に対応していることで、このおかげもあって今でも書き物の置き場所として使い続けている。 ただし以下の点で改善したいという思いが出てきた：

• 仮住まいで論文読みの技術系記事を書き続けてきたものの、お気持ち表明の記事とはやっぱり分けて書きたい（本とゲームについてまた何か書きたい）

• ブログテーマとして使っているMonoTsuduriはとても好きなので使い続けたいけれど、コードブロックでシンタックスハイライトが効かない

  • そもそもの用途が違うだろうから効かないことそれ自体が問題ではなく、（前の項目でも書いたように）技術系の記事はそれにふさわしいところに書くべき、ということ。

• 技術系の記事はMarkdown + Gitで管理したい

  • （まとまった時間が取れなくとも）incrementalに書き続ける、ということをやりたい

Markdown記法で記事を書き、かつGitで管理できるとなると、候補に挙がるのはやはりJekyllなどの静的サイトジェネレーターになるのだろう。けれど僕はRubyに明るくないので、どうするか。

技術選定

静的サイトジェネレーターといえばJekyllが一般的、というのはこれまでの観測範囲（Yattecastもしくはこれまで見てきたブログ^[1][2] ）、あるいはSetting up a GitHub Pages site with JekyllといったGitHubによる記事から受ける印象としてあった。

しかし調べてみるとJuliaにも静的サイトジェネレーターのFranklinがあることがわかり、これはよかろうということで使うことにした。 静的サイトを作る目的であれば別のJuliaパッケージであるDocumenterも良さそうだったが（げんにいくつかの実装例^[3][4] も見つかる）、生成されるサイトの構成はやはりマニュアル用途であって、ブログを書いていくのはちょっと難しそうという印象を受けた。

構築と運用

公式サイトにあるQuick startの手順通りに初期サイトを生成した。 また構築作業の全体を通じて先人の資料に助けられた^[5] 。

• using Franklinからのserve()することでlocalhostにウェブページを表示できる。ページの様子を確認しつつ、テキストファイルを更新するとウェブページも自動更新されるのでとても楽だった。

• Working with Franklinでフォルダ構造を確認し、ブログ記事のテキストファイルはpagesフォルダに置くことに。

• Franklin themesよりいい感じのtemplateとしてLanyonを選択した。

  • サイドバーは_layout/sidebar.htmlで編集できる。タグ用のページを別に作るか、サイドバーにタグを表示してしまうかは、タグの運用も含めて今後の検討。（はてなブログ時代はタグのやる気がなかった）

GitHub Pagesへのデプロイはやはり公式サイトのDeploying on GitHubを参考にした。GitHub Pagesでウェブページが見られるようになる仕組みはこれまで知らなかったけど、今回の一連の構築作業を通してなんとなく理解できた。

• Engimonoと対になるURLを持たせたかったので、personal (or org) websiteではなくproject websiteとして作成した。説明にも出てくるbasic project webpageのリポジトリがとても参考になったのでありがたい。

将来的にFranklin本家のパッケージが更新されたらどうするか？　手元で改めてnewsite()して更新分を差し替える感じになるのか、今後の検討。

追記：Gitで手元ではドラフト稿をバージョン管理しつつ、mainブランチには成果物だけをコミットしたい。一旦git checkout -b devで開発ブランチを作成したあとで、このブランチでドラフト稿をcommitしていく。公開できるだけの完成版になったらgit checkout mainからのgit merge --squash devとすることで、完成版までに加えた変更は1コミットにまとめられる。（参考）その後git push origin mainでmainブランチをpushする。この追記部分と本文が1コミットになって見えていればOK。

追記2： 上で書いた追記のやり方を使って記事ごとにブランチを作ると、しばらく作業していなかったブランチでは他記事の公開状況が反映されないまま、当該ブランチで書こうとしている記事を書いていくことになる。 これは公開済の記事を引用したい場合には不便な状態だ。 このようなときにはgit rebaseを使って、「ブランチがどこから分岐したか」を変更してやる。 git rebase main devとすることで、devブランチの分岐元をmainブランチの先頭コミット（＝公開済の記事が存在する状態）へと変更することができる。 git rebaseについてはGitポケットリファレンスも参考になる。

追記3： 1年経ってFranklin本家のパッケージが更新されていた（2023-01-07時点でv0.10.79）ので、アップデートを試してみた。 Franklinの紹介ページにある通り（テンプレート部分のみ変更して）newsite("mySite", template="lanyon")を実行して、出力されたファイルで上書きした。 その後git diffを使って変更を取り込むかそうでないかを目で見て確認した。 手元でserve()してみて、サイトの構成に問題がなさそうなのを目で見て確認してからGitHubにpushした。 それぞれの確認の方法はもっといいやり方があるかもしれない。 CSSまわりで不要なファイルがどうも残っていそうだが、よくわからないので悪さをしないのであればそのまま放置しておく。

結果

• 記事執筆のはじめから終わりまでをMarkdown形式のテキストファイルで完結させられるようになった。

  • 反面、はてなブログでは出来ていたリンクの埋め込みができなくなったので、視覚的なインパクトは小さくなったかもしれない。

• このサイトのURLをTwitterなどにを貼り付けたときにサムネイルが表示されない。調べてみるとこの仕組みはOpen Graph protocol (OGP) と呼ばれるもののようで（参考）、Franklinではopen issueになっていて未実装の様子。静かにやっていくことにする。

• コードブロックにシンタックスハイライトが効くようになった。以前の記事でのコード引用部分は以下のように表示される（ただしFortranではハイライトされない。残念）：

n,m = 3*2^6,2^7
center,radius = m/2,m/6
body = AutoBody((x,t)->√sum(abs2,x .- center) - radius)
sim = Simulation((n+2,m+2), [1.,0.], radius; ν=ν, body=body)
sim_step!(sim,10)

# plot the vorcity ω=curl(u) scaled by the body length L and flow speed U
function plot_vorticity(sim)
  @inside sim.flow.σ[I] = WaterLily.curl(3,I,sim.flow.u)*sim.L/sim.U
  contourf(sim.flow.σ',
    color=palette(:BuGn), clims=(-10,10),linewidth=0,
    aspect_ratio=:equal,legend=false,border=:none)
end

# make a gif over a swimming cycle
@gif for t ∈ sim_time(sim) .+ range(0.0, stop=20.0, step=0.25)
  sim_step!(sim,t)
  plot_vorticity(sim)
end

参考文献