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

Transcript

1. 複数ソースから集めて作る 自分サイト Daisuke KONISHI Me too Astro #1

2. Daisuke KONISHI エンジニアリングマネージャー Web エンジニア コーヒーとラーメンでできています @skd_nw

3. None

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. まぁやってみようよ