ブログをリニューアルしました
今までWordPressでブログを作っていたのですが、それをAstroに乗り換え、リニューアルしました。
以前まではかなり適当に管理していたので至らないところが沢山ありましたが、今回のリニューアルでかなり整理されました。
Astroについて
Astroは結構新しめな静的Webフレームワークらしい。
最初は慣れているLaravelで作ろうと思っていたんだけど、ブログを作るのにはちょっとオーバースペック感があったのと、GitHub Pagesにデプロイしたかったのでこの選択に。
簡単に使えるを推している通り、Web系やってればある程度簡単に弄れる。
また、デフォルトで高速も推している通り、なんもやってないけどLightHouseは100点だった。
しかし、まだ新しいこともあってか動的ページ生成でバグがあったりはする。
このバグはAstro5.0で治ってるとあるんだけど、私の場合は5.0にしても改善しなかった。
というか、Next.jsとの兼ね合いで一定の特殊文字が動的ページに使えないという制約がありそう。
GitHub Pagesについて
デプロイ先にはGitHub Pagesを選んだ。
GitHub Pagesというのは静的サイトをリポジトリから無料で配信できるサービス。
何よりも
- 無料
- リポジトリから管理できる
- 独自ドメインが設定できる
というのがお強い。
もちろんデメリットもあって、
- サーバーサイド処理ができない
- 規約的にお金がからむサイトの運営はできない
- 公開されたサイトは1GB以上あってはいけない
らへんが大きい。
しかし、そこにさえ気を付ければドメイン代だけでブログを運用できるのはとってもありがたい。
元々私のブログは画像が多めだったので1GB制限が厳しそうだったんだけど、画像を全部WebPにしたら余裕だったよ。
デザインについて
このブログのデザインは、ブログトップページは晴耕雨読様を、homeのページはaiobahn.net様を大変参考にしております。
めっちゃ素敵なサイトです。
晴耕雨読さんの方は1画面で全ての記事を見れることに感動したし、aiobahnさんの方は昔のホームページのエモさに感動した。
WordPressからの移行について
このブログリニューアルで一番大変だったのが、この移行作業。
今までGoogleドキュメントとWordPressで書いてたので、md形式への移行がめちゃくちゃ大変だった。
まず、いままでGoogleドキュメント経由で投稿していた関係で、画像がGoogleの方に保存されてたりとかなりヤバヤバ。
また、WordPressのフォルダからMDに変換してくれる神ツールとかも提供されているのだけど、MDの仕様上HTMLタグはそのままHTMLタグとして残るので
<sctipt>console.log("アボカド")</script>でHTML内にJSが埋め込めるよ
みたいな自分で書いた解説文章でセルフXSSやったりしてた。
この点検作業がかなりの時間を食った。
新しくなったところ
コードが見やすく
正直ほとんどなんもしてないんだけど、AstroにはShikiというシンタックスハイライターが付属している。
そのおかげで、ブログ内のプログラムコードが
<?php
namespace App\Console;
use Illuminate\Console\Scheduling\Schedule;
use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
class Kernel extends ConsoleKernel
{
/**
* Define the application's command schedule.
*/
protected function schedule(Schedule $schedule): void
{
// $schedule->command('inspire')->hourly();
}
/**
* Register the commands for the application.
*/
protected function commands(): void
{
$this->load(__DIR__.'/Commands');
require base_path('routes/console.php');
}
}
こんな感じでめっちゃ綺麗に見やすくなった。
色の構成もとても良い。
検索機能
静的サイトなのに検索機能とかつけれるんか？ とか思ってたんだけどあるみたい。
私が使ったのはpagefindというもの。
仕組み的には、ビルドしたページを検索インデックスにし保存。検索時にはそれを非同期で取得/探索をしている感じ。
だとしても重くなりそうなんだけど、検索インデックスをチャンクに分割するという謎技術でこのサイトだと大体100KB程度の通信で検索＆表示ができる。
しかもこれで日本語にも対応しているのですごい。
目次機能
私は記事に目次が絶対に欲しい派なので、設置。
実装にはtocbotを利用。
めっちゃ簡単。すごい。
アイコンをSVGに
私が今使っている以下のアイコン、ドット絵なんだよね。
これは私の画力が無いからドットなんだけど、ドット＝低解像度＝機械で表現しやすい＝SVG化できる！？
という驚きのアイデアでSVG化した。
ファイルサイズは驚異の1.37KB。軽いし高解像度だし、これこそアイデアだね。