> ## Content Index
> Fetch the complete content index at: https://hanatane.net/llms.txt
> Use this file to discover other available public pages before exploring further.

# ドメイン認証用のWebサイトをAstroでサクっと作った
- URL: https://hanatane.net/quickly-built-domain-verification-site-with-astro/
- Published: 2024-02-14T01:50:05.000Z
- Updated: 2024-02-14T01:50:05.000Z
- Description: Astroで簡単に自分だけのドメイン認証サイトを作る方法、始めよう
- Author: たねのぶ
- Tags: 技術の話, #Import 2025-03-18 13:46

分散型SNSが乱立してきたので、各種アカウントが自分のものであると証明しやすくなるようにドメインをとった。ドメインだけでもいいのだけど、せっかくなので自分の各種アカウントへのリンクを掲載するLink in bioのページにした。

パーソナルサイトなのでドメインは `mtane0412.me` にした。

[Masayuki TanenobuMasayuki Tanenobu![](https://mtane0412.me/favicon/safari-pinned-tab.svg)![](https://mtane0412.me/opengraph.webp)](https://mtane0412.me/?ref=hanatane.net)

経緯としては、Nostrのドメイン認証のときに[Github PagesでLink in bioを作っていた](https://github.com/mtane0412/mtane0412.github.io?ref=hanatane.net)のだが、先日一般公開されたBlueskyもカスタムドメインに対応していたので、せっかくなので独自ドメインをとってサイトも作り直しちゃおうと思い立った。

こういうちょっとしたものを作るのは枯れた技術のほうが良いなと思っていて、以前はHugoで作ってたのだけど、最近触り始めたAstroで作ってみることにした。

結論から言うと[Astro](https://astro.build/?ref=hanatane.net)はめちゃくちゃ作りやすかったので、もう全部これでいいなという感じだった。独自の構文という感じは少なくて、直感的なJavaScriptの構文で書けるし、[Astro icon](https://www.astroicon.dev/?ref=hanatane.net)なんかの便利なセットもあったのでアイコンも簡単に用意できたし、ドキュメントの日本語化もすごい進んでいる。

もっと複雑なことをやろうと思ったらReactとかの既存技術といくらでも組み合わせ可能なのも熱い。

さらに吐き出されるコードは基本的にゼロJSでパフォーマンスもめちゃくちゃいい。LighthouseでBest Practicesが減点くらってるのは調べてみるとバグらしくて悲しい…。

![Lighthouseスコア、満点](https://i.gyazo.com/159c73f7d96920c960ecb158bcfb0b48.png)

おまけのサイトができたので、本来の目的である各種ソーシャルメディアのアカウントがmtane0412.meの所有者である証明を行っていく。

[Nostr](https://nostter.app/npub1nca6cct4ce6zhm5mxhufqjym696jdlyr6h7zq76fqlw5p0gnnyus35j2v3?ref=hanatane.net)は [https://mtane0412.me/.well-known/nostr.json](https://mtane0412.me/.well-known/nostr.json?ref=hanatane.net) を参照してドメインの確認をとっている。(Nostr.comのほうはなかなか更新されてなくてよくわからない)

![Nostrのドメイン認証](https://i.gyazo.com/a5147e69808b32e72e1eea2630e07f15.png)

BlueskyはDNSでDIDを返してあげると認証されるDNS認証が一般的っぽいが、Nostrですでにファイル形式をやっていてなんとなく合わせたくなったので、こちらも [https://mtane0412.me/.well-known/atproto-did](https://mtane0412.me/.well-known/atproto-did?ref=hanatane.net) にDIDを置いておく。

[Bluesky](https://bsky.app/profile/mtane0412.me?ref=hanatane.net)は@以下がドメインになるので、個人はなんかあれだけど有名な公式アカウントとかはめちゃくちゃわかりやすくなるだろう。

![Blueskyのカスタムドメイン認証。](https://i.gyazo.com/b1b6b92564d28d50214e1203133d3263.png)

[Fedibird(Mastodon)](https://fedibird.com/@mtane0412?ref=hanatane.net)や[Misskey.io](https://misskey.io/@mtane0412?ref=hanatane.net)はリンク先のページに`rel="me"` でバックリンクがあると所有者確認が取れるようだ。

![misskey.ioの認証](https://i.gyazo.com/bccd5977d0fab70ada8e004461601f05.png)

![Fedibirdの認証](https://i.gyazo.com/478651c9e31baaf368aab23ac46b9411.png)

という感じで一通り作業終わり。僕の場合、ただの自己満足なんだけど、分散型の時代は色んなところにアカウントが散在する形になるのでこういった認証の方法を取っておいたほうがいい。有名な人はしばしば偽物が出現して、もともと活動していた著名なアカウントで新アカウントを言及するとかで認証してたけど、サービス側のこういう仕組みでわかりやすくするとよいのだろうな〜と思った。分散型の時代はいろいろな人がデジタルアイデンティティのために自分のサイトを持ったりするようになると、一昔前のWebっぽい感じになって楽しそうだなと思いました。