memorandums

日々の生活で問題解決したこと、知ってよかったことなどを自分が思い出すために記録しています。

トップ > 入学式からの昨日の宿題２件を消化した話

入学式からの昨日の宿題２件を消化した話

👄 昨日はやっつけで書いてしまってすいませんでした。。。とりあえず、GitHub PagesをCloudflare Pagesで動かせて嬉しいというだけでした。でも、本当に簡単でした。アクセス数によって課金があるのでしょうけど、GitHubと組み合わせて簡単にWebページを公開できるのは素晴らしい時代と思いました。はい。

memorandums.hatenablog.com

さて、昨日の宿題が２件ありました。以下、やったことです。

Cloudflare Pagesに配備したJekyll＆MarkdownにMermaidを追記したページをレンダリングできるようにする

でした。

👄 元々、GitHub Pagesで管理しているmdページをJekyllがhtmlに変換してくれるのでhtmlファイルは管理しなくてよい利点がありました。この利点を継続したいわけです。一応、昨日の作業でできることを確認しました。ただ、そのmdファイルにmermaidを入れたページを作ってみたのですが、GitHub Pagesでは正常に表示されるのにCloudflareでは表示されませんでした。Jekyllの設定の問題だとはわかりましたが、そもそもどうやって動作しているのか最初はわからなかったためネット記事をあれこれ試していました。すぐにアクセスできるページは３０ページくらいは見て試したと思います。すべてダメでした。これは予備知識が無かったからと思います。JekyllのFront matterってなんじゃそれ？という感じでしたから、それでもあれこれ試しているうちに何となく仕組みが見えてくるのがこれはこれで面白いものだと思います。

やったこと：ローカルリポジトリのトップに_includesというディレクトリを作成します。その中にhead-custom.htmlという以下の内容のファイルを入れます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
<script>
function initializeMermaid() {
    mermaid.initialize({
       startOnLoad:true,
       theme: 'default'
   });
   window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
}
window.addEventListener("load", function() {
    initializeMermaid();
});
</script>

👄 この対処方法の元ネタは以下の記事でした。昨夜も見ていたのですが、色々と知識が足りなくてやり方が悪かったようです。jekyllは_includesというディレクトリにあるファイルを読み込むことができて、特殊な名前のファイルは自動的にテンプレート内に差し込まれる仕組みがあるものと理解しました。head-custom.htmlというファイルはその名の通りで、htmlのhead部にその内容が差し込まれるファイルになっていると思います。で、head-custom.htmlの内容は、書かれている通りなのですが、mermaid.initで第２引数に指定したクラスに対してmermaidで書かれたテキストをSVGに変換する処理を走らせてくれるらしいです。この処理をWebページがすべて読み込み終わったら実行すればいいよ、というのが上記で参考にしたページに書かれていました。ありがとうございます。

GitHub Pages で Mermaid を使う - みちのぶのねぐら

これで、Jekyllが（というよりGFMなんでしょうけど）mdファイルの変化を検知してhtmlファイルを生成して_site以下に放り込んでくれます。そのファイルをみると確かにできていることが確認できました。git pushすればCloudflareでmermaidが表示できているのがわかりました👍　まだまだわかっていないことが多いですが、とりあえずできればヨシとして。

Cloudflare PagesにBASIC認証をかける、です。

👄 これはWorkerというやつでできると思っていたのですが、これはカスタムドメインを設定したページにかけるものらしく、途中までやってできないことがわかりました。Cloudflare Pagesで作成したページは講義用なので特にわかりやすい名前である必要はないと考えました。年間2,000円くらいですから借りればいいんでしょうけどね。。。無駄なものにはお金は使いたくないので。pages.devのままでいます。このページに対して基本認証っぽいことができないか？調べると、結果、以下でできることがわかりました。ありがとうございました。

やりかた：といっても以下に書かれている通りにやればできました。以下のページで紹介されているGithubのリポジトリをダウンロードしてきて、自分のリポジトリのトップにfunctionsというフォルダを入れます。あとは、CloudflareにCFP_PASSWORDという環境変数を追加するだけでした。トップだけではなく、それ以下のページに飛び込んだ場合にもパスワードが求められるようになりました。パスワードだけで十分なのでこれでOKです。

astro.gdgd.tokyo

とりあえず、これで来週からの授業に間に合いそうです😀

めでたしめでたし。