stefafafan の fa は3つです

"すてにゃん" こと id:stefafafan のブログです

トップ > 技術 > Astro + Vercel で英語の技術ブログを新たに作成した
最終更新日

Astro + Vercel で英語の技術ブログを新たに作成した

技術

これまで記事を書くのにはてなブログを使ってきましたが*1、これとは別に英語で技術記事を書くためのブログを用意したい気持ちになりました。Mediumが使われがちですがせっかくならAstro試してみたいなと思って今回試しました*2。以下がとりあえず完成した英語専用のブログです。

blog.stenyan.dev

やったこと

  1. AstroPaper というテーマがあったので、GitHubのテンプレートからリポジトリを生成
  2. Vercel に登録して、先ほど作ったリポジトリを連携
  3. 独自ドメイン登録するために、VercelからCNAMEの値を取得してDNSに登録

あまりにも簡単ですごい。

感想

Astro

Astroで作られたサイトは素早いという噂だけど確かにパフォーマンスは良くてありがたい (もちろん現時点の私のサイトはたいした画像もなく内容も少ないですが)。

blog.stenyan.dev の PageSpeed Insights の様子

また、AstroとVercelの連携がとにかく強くてびっくりしました。ちなみにGitHub Pagesでの連携だったり、色々と丁寧にデプロイ方法が公式でまとまっているのでおもてなし度が高いです。
docs.astro.build

Vercel

Vercelの感想ですが、連携直後からPull Requestごとにプレビュー環境が自動で作られること、main branchへのマージで本番反映されることがかなり開発体験が良いです*3。今回は特に認証で隠したいとかもなかったので普通にpublicなリポジトリでやっています。

github.com

例えば以下のPull Requestをみると、Vercelのbotからコメントが投稿されているのが確認できて、Visit Preview をクリックするとこのブランチ用の環境で変更内容を確認してから問題なさげならマージしていける。
add site title to post title by stefafafan · Pull Request #10 · stefafafan/blog-en · GitHub

VercelによるPreview環境のコメント

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 | AstroPaper

英語で技術記事を書くことについて

日本語で記事を書いてから英語でも書くということになるのでシンプルに面倒臭そうですが、2023年にもなったしやってみるか、という感じで用意しました。

ブログで良い知見を取得できたらせっかくなら日本語で閉じず英語圏にもリーチしてほしいという気持ちもありますし、英語圏の人にもし「こういうことがありました」とリンクを投げたくなったときに英語の記事URLがあると良い気がします。また、英語を使う機会があまりないので、定期的に英語を書けると良い気もします。そういう感じです。

はたして実際にやったとして読まれるかどうかは謎ですがコンテンツが増えたらきっと良いでしょう。過去の記事の翻訳はあきらめていて、これから書く技術エントリだけに絞ることにしています。

*1:はてな社員なので、ドッグフーディング兼ねて使い続ける予定です。

*2:Mediumは会員登録なしで月に読める記事の数が制限されているらしく、イマイチ使おうと思いづらい。

*3:もちろんローカルでは npm run dev とかやるとサクッと手元環境が立ち上がるのでそれで十分ではありますが。