複数ソースから集めて作る自分サイト

Me too Astro #1 での登壇資料 #MetooAstroEvent

Transcript

1. 複数ソースから集めて作る 自分サイト Daisuke KONISHI Me too Astro #1
2. Daisuke KONISHI エンジニアリングマネージャー Web エンジニア コーヒーとラーメンでできています @skd_nw
4. 自分のサイト持ってますか • ポートフォリオ • ブログ とかとか
5. 何で作ってますか？ • Astro • WordPress • STUDIO • Notion • 何かしらのフレームワーク • その他
6. これまで色々経由して作ってきました 1. HTML/CSS/JavaScript 2. WordPress 3. Hugo (たしかやった) 4. Next.js (SSG) 5. Astro
7. 「静的サイトの形で配信したい」にたどり着いている • あまり内容の更新がない • なるべく面倒を見なくていい状態にしたい • 未来で乗り換える可能性はあるのでデータは別で持っていたい • 自分がある程度書けてメンテ出来そうなものにしておきたい A. Astroで。
8. 1.技術ブログを書いているので その内容を取得・表示 2.個人開発したものを取得・表示 経歴を取得・表示 (今は見せ方の再検討中で閉じてます)
9. 1.ブログ記事
10. 1.ブログ記事の取得 記事本文は不要で、タイトルとリンクだけあればOK • ブログは別途Next.jsで実装しています • 記事データはmicroCMSで管理していますが、Next.jsを経由して取得する ようにしています • Next.jsからRSSを配信してAstroはこれを取得・パースして表示している
11. 1.自サイト側でのブログ記事の更新どうするか • 今は… ◦ 気が向いた時のビルド ◦ 定期的に行っているパッケージアップデートを反映するタイミングでビ ルド • そこまで高頻度で更新しているわけではないので、ある程度ラグがあって もOK
12. 1.自サイト側でのブログ記事の更新どうするか なるべくリアルタイムで更新するなら... • microCMSのWebhookを利用する • AstroでSSRする • Astro IslandでReactなどを活用してCSRする
13. 2.個人開発したものを取得・表示 • 個人開発の実績データはmicroCMSで管理しています • こちらは特に捻り無くAstroから取得しています
14. 基本的にはSSGにしている • なるべく管理したくないので。 • 各所からデータ取得を行っているが、シークレットやデータ取得量の問題 をあまり気にしなくて良くなるのが大きい • ビルドで処理が終わっているので、とても早くページを届けられる (早いは 正義)
15. Astroでやるのって結局どうなのか • 運用し始めてからは、考えることがぐっと減って良い • Node.jsの豊富なエコシステムを使えるので、何かしようと思ったときに楽 • ちょっとJSを書こうと思うとちょっと気持ちのハードルがあがる
16. まぁやってみようよ