ブログのリニューアル
公開日:
カテゴリ: 雑記
07/01よりブログをリニューアルしました。
主に裏側の大幅変更が主ですが、丸ごと構築し直しているので表側も全体的に見直しています。
表面的な変更点(フロントエンド)
- ダークモード対応
- 記事の更新
- Twitter関連ツールの公開終了
- 古い記事かつ今は使えないものへの注意書き追加
- 誤字の修正(内容に影響のない誤字修正のみの場合、記事の更新日時は変更していません)
- いくつかのアーカイブ系ページの削除(○○の記録の類)
- カテゴリページのURLの一本化 (
https://blog.usx.jp/カテゴリ名)https://blog.usx.jp/category/カテゴリ名の形式ではアクセスできなくなります
- 画像フォーマットの変更
- PNG形式はWebP形式に、JPEG形式はAVIF形式に変更
- フォールバックはしていませんので、古いブラウザでは画像が表示できなくなります
- Chrome 84以前、Edge 120以前、Firefox 92以前、macOS Safari 16.0以前、iOS 15.8以前、IEがサポート対象外となります
- いくつかの重めなpngはAVIFに変換 (一旦WebPでおおよそ1MBを閾値としています)
- ブログ内各所で使われているアイコン類の多くをSVGに変更
- 画像のURL変更(旧ファイルパスから新ファイルパスへのリダイレクトは行いません)
- 画像のソースセット指定の停止(ファイル容量が大幅に小さくなったため、リサイズした画像ではなくオリジナルサイズの画像が表示されます。転送量をみて再考するかもしれません)
- PNG形式はWebP形式に、JPEG形式はAVIF形式に変更
- サイト内検索の実装方式・配置場所の変更
- サイトアイコンの追加
- ページ送りURLの変更
裏側の変更点(バックエンド)
- WordPressブログからAstroをベースとしたSSG生成
- Pagefindを用いた静的サイト内検索の実装
- 一般的なWebホスティングサーバからCloudflare Pagesを使用した配信に変更
- ブログ記事のmarkdown管理
小話
- これまで使ってきたCoreserver + WordPressの構成ですが、筆者の使い方では管理画面から記事を変更できる以外にこれと言った利点がないことから、思い切ってやめました
- 当初は出先から編集する可能性を考えていましたが、出先で更新している余裕など全くありませんでした…ｗ
- 今回の構成ではGitHubのプライベートリポジトリ経由でデプロイしているので、一応出先から編集や修正はできなくもないようにはしています (多分使いませんがｗ)
- メールサーバは既にGoogle Workspaceに切り替えているので、今回を機にCoreserverは一旦解約予定です。なんだかんだで10年以上契約していました
- Cloudflareの無料枠はなかなか大盤振る舞いですね。CloudflareといえばDDoS対策のプロキシで有名(※筆者主観)ですが、地味にPagesやR2もコスパ良さげに見えます。いつまでこのプランや無料枠が続くのかはわかりませんが、活用できればかなりのことができそうです
- 画像ファイルの形式変更で、オリジナルサイズに比べて約1/3の容量になりました
- クラウド時代はリソースの使用量ベースの課金体系のため、なるべくスリムにしておかないと、料金が跳ね上がったり無料枠を食い潰したりすることになります
- 今回初めてAVIFを使ってみましたが、これまでのJPEGと比べるとかなりのファイルサイズが落ちます。エンコードはかなり重いですが、それに見合うだけの価値はありそうです。次世代という感じがしますねー
- AVIFの可逆圧縮は微妙で、WebPの方が圧縮率が高かったので、こちらはWebPを採用することにしました。今のところ当ブログのすべての画像でpngを
zopfliで圧縮するよりもサイズが小さくなりました - WebP形式のいくつかは、サイズが減っているとはいえMB単位のサイズだったので、非可逆圧縮に切り替えてAVIFにしたものもあります
- 主にOverwatchと新年投稿(マイクラ)がほとんどでした。シェーダーが効いているものは、確かにサイズが増えますよね
- 他にはFTB Pyramidの12日目終わりから13日目の中頃にかけて、1MB超えのファイルが続いていました。なんでだろうと思ってファイルを確認してみたら、すべてジ・エンドのSSでした。よく見たら、ジ・エンドの背景ってノイズなんですね。そりゃ可逆圧縮では容量を食うわけです
- 初めてのAstroでしたが、基本的には難しいところもなく使えました。
getStaticPaths()は使いやすいですね- 1点だけ、
[...A]/[...B]といった可変長の階層を2つ並べたときの挙動は怪しめ。。。ただこれは、筆者が正しい使い方をしていない可能性も高そうです - これまで個人的にマークダウンはmarkedを使って変換していましたが、Astroのバックエンドはremarkなので、こちらに変わりました。本体そのものがUnifiedと呼ばれるプラグインのいくつかとしてできているため、拡張はこちらの方が便利ですね
- 実際に画像のHTML属性追加のために自力で簡易的なUnifiedプラグインを書いていますが、非常に簡単でした
- 1点だけ、
- Pagefindは外部の検索エンジンを使う必要がなく、なおかつ静的なのでPHP等が使えない構成のサーバでも使える非常に優秀なツールです。しかも検索速度も非常に早く快適です
- 唯一にして最大の欠点が、区切り位置が任意に指定できない点です。例えば”設定集”で検索しても”設定”でヒットしてしまう点。幸い発生率はそれほど高くない(と見込んでいる)のが救いですが(苦笑)。サービスは全く違いますが、Gmailもそんな感じの検索なので、地味に使いにくい時があるんですよね…
カテゴリ: 雑記