upinetree's memo

Web系技術の話題や日常について。

自分用ポータルサイト作った

9 月は一家で新型コロナに感染して散々でした。真夏のように暑かったのも輪をかけて辛かった。幸い息子は重症化せず、すぐに元気が戻り安心しましたが焦りました。私の方は高熱でダウンした上、解熱後も微熱っぽいだるさと思考の重さが 2 週間以上続き、体力も失われました…。妻もまだ嗅覚がもとに戻らないっぽい。かかるもんじゃないですね。インフルエンザやアデノウイルス等々も流行っているようなので気をつけて過ごしたいです。

自分用ポータルサイト

感染前からちょいちょい準備してたのがこちら。

https://hrtful.life

ドメイン名の由来はご存知 Team Geek の Humanity, Respect, Trust からです(ひそかに、とある我が家に関係する頭文字ともかけてます)。これらにあふれる日々でありますように、という感じです。

なぜ作ったの

Threads はじめました - upinetree's memo に書いたように、SNS を複数使い分ける状況になってきたことと、今後も使う SNS が変遷していくだろうとの予感から、それぞれアクティブかどうかを含めて整理したリンク集を作りたいと思ったためです。

加えて、名刺代わりになる情報を置くのにもちょうどよいかなと。今までは GitHub あるいは SNS のリンクを渡してましたが、それもまあごちゃっとしてきたので。Lapras とかにまとまった一覧はありますが、こちらは採用色が強くてポートフォリオって感じになっちゃいますし。

技術的な話

Astro, Tailwind CSS, Cloudflare で組んでみました。

github.com

Astro は 3 になって View Transitions API サポートが入ったので使ってみたかったんですが、コンテンツがなさすぎて無理でした。残念。ただまあこれ入れると MPA ではあるものの Turbo っぽい感じになるので現状は過剰ですかね。SSR も特に今のところ不要なので、単純に SSG したものを配ってます。Next.js っぽい dynamic routing が楽ちんで良かったです。

Tailwind CSS はいつものという感じで。Markdown のスタイリングに @tailwindcss/typography プラグインを使ってます。あとは SVG Icon として Heroicons を利用しました。デザインは門外漢なので ChatGPT にイメージを伝えて配色を作ってもらって、それを Tailwind CSS Color Generator でカラーパレットに展開しながら調整しました。

Cloudflare はドメインの取得から設定、サイトのホスティングまで使いました。初めて触ったんですが使いやすかったです。面倒なことしなくても高速に配信される一方で、拡張に開いていそうな感じが気に入りました。あとは C3 (create-cloudflare-cli) でシュッとプロジェクト作れるのが試しやすくて良きでした。

今後

色んな人のサイト見てみたいなと思って /uses というのにたどり着き、興味深く見ています。この一覧に載せるのは(言語の問題もあり)忍びないのですが、同じフォーマットでページを用意してみるのも楽しそうだなと思っています。

一応職歴とかスキルマップも載せようかと思ってますが、まあ今は作る手間を掛けられないので保留にしてます。かといってこういうのはコツコツ更新していかないと、いざやろうとしたときに大変な思いをするので、ぼちぼち着手はしていきたいと思います。

あとは自分用 ActivityPub を建てるかどうかですかね。これもよっこいしょが必要そう。