I've created a new tech blog using Astro and Vercel | stefafafan's tech blog
これまで記事を書くのにはてなブログを使ってきましたが*1、これとは別に英語で技術記事を書くためのブログを用意したい気持ちになりました。Mediumが使われがちですがせっかくならAstro試してみたいなと思って今回試しました*2。以下がとりあえず完成した英語専用のブログです。
やったこと
- AstroPaper というテーマがあったので、GitHubのテンプレートからリポジトリを生成
- Vercel に登録して、先ほど作ったリポジトリを連携
- 独自ドメイン登録するために、VercelからCNAMEの値を取得してDNSに登録
あまりにも簡単ですごい。
感想
Astro
Astroで作られたサイトは素早いという噂だけど確かにパフォーマンスは良くてありがたい (もちろん現時点の私のサイトはたいした画像もなく内容も少ないですが)。
また、AstroとVercelの連携がとにかく強くてびっくりしました。ちなみにGitHub Pagesでの連携だったり、色々と丁寧にデプロイ方法が公式でまとまっているのでおもてなし度が高いです。
docs.astro.build
Vercel
Vercelの感想ですが、連携直後からPull Requestごとにプレビュー環境が自動で作られること、main branchへのマージで本番反映されることがかなり開発体験が良いです*3。今回は特に認証で隠したいとかもなかったので普通にpublicなリポジトリでやっています。
例えば以下のPull Requestをみると、Vercelのbotからコメントが投稿されているのが確認できて、Visit Preview をクリックするとこのブランチ用の環境で変更内容を確認してから問題なさげならマージしていける。
add site title to post title by stefafafan · Pull Request #10 · stefafafan/blog-en · GitHub
AstroPaperのOG Image生成
そういえばAstroPaperテーマの機能として、動的OG Image生成機能が数日前に入っていました。これを使うと記事ごとに svg 形式ですがOG Imageが生成されます（はてなブログとかにもあるアレですね）。
github.com
仕組みはVercelが先日発表した仕組みと同じで Satori というのを利用しています。
vercel.com
へ〜いいじゃんと思いましたが、どうやらTwitterは svg 形式のOG Image未対応のようなので、Twitterシェア時はこのOG Imageにはならなかった。今後に期待します。
Dynamic OG image generation in AstroPaper blog posts
英語で技術記事を書くことについて
日本語で記事を書いてから英語でも書くということになるのでシンプルに面倒臭そうですが、2023年にもなったしやってみるか、という感じで用意しました。
英語で書くようブログ用意したいという気持ちとだるすぎる気持ちが出てきた
— すてにゃん (@stefafafan) 2022年12月31日
ブログで良い知見を取得できたらせっかくなら日本語で閉じず英語圏にもリーチしてほしいという気持ちもありますし、英語圏の人にもし「こういうことがありました」とリンクを投げたくなったときに英語の記事URLがあると良い気がします。また、英語を使う機会があまりないので、定期的に英語を書けると良い気もします。そういう感じです。
はたして実際にやったとして読まれるかどうかは謎ですがコンテンツが増えたらきっと良いでしょう。過去の記事の翻訳はあきらめていて、これから書く技術エントリだけに絞ることにしています。
