ブログのカスタマイズ

昨日gialogで作ったブログを少しカスタマイズした。

具体的にはOGPの設定やTwitterボタンの設置。

最初GitHubのAPIにそんなに詳しくないからYAML front-matterでIssueから渡ってくるレスポンスの種類にどんなものがあるのかわからなかった。とりあえずはGitHubのAPIリファレンスを読むと大体解決した。

OGPの画像は記事内を正規表現で走査して最初に登場する画像を設定するようにしている。/\((http[s]*.+\.(?:png|jpg|jpeg|gif))?\)/iみたいなやつを使っているが、後方参照のキャプチャしないやつの書き方を思い出せなくてちょっと迷った。今回はキャプチャされてもいいんだけど、気分的に無駄なキャプチャは嫌である。グローバルな一致とかだとパフォーマンス問題が起きたりするなど詳説 正規表現に書いてた気もするから避けられるなら避けた方が良さげ。

あとちょっと困ってるのはOGP画像が仕様を超える解像度だった場合にTwitter Cardでうまく表示されない問題がある。これはどう対応したものかちょっと考えているところ。

それと雑でもいいので検索を設置したくてGoogle検索へのリンクを配置したがまだインデックスされていないから機能しない。時間が解決するのかなこれ。。

最後にOGPのテスト。先日和処黒木に行った時に八木メシでお馴染みの八木栞FSKと撮った牛しぐれうどんでも載せておく。 IMG_2962

RSSフィードも作った。r7kamuraさんのr7kamura/diaryのコードをほぼほぼ頂戴させていただいた。

仕組みとしてはすでに生成されてる記事のissue.mdの情報を使ってgetStaticPropspublic/feed.xmlへ静的ファイルとして吐き出す。するとhttps://yuheinakasaka.github.io/gialog-diary/feed.xmlという感じのURLでアクセスできる。

GitHub Actionsはあんまり使いこなせてなかったけど、ちょっとしたサーバーレス環境みたいな感じで使えて便利だなーと思った。もう少し仕組みとか調べておくか。。。

tweet
tweet

おすすめ

  1. 最近のWeb3への雑感
  2. エンジニアとして今の自分を形成した本
  3. 楽しそうなおじさんを見るのが好き