Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
複数ソースから集めて作る自分サイト
Search
Daisuke Konishi
July 20, 2024
Programming
0
64
複数ソースから集めて作る自分サイト
Me too Astro #1 での登壇資料 #MetooAstroEvent
Daisuke Konishi
July 20, 2024
Tweet
Share
More Decks by Daisuke Konishi
See All by Daisuke Konishi
django-import-export で マスターデータ管理生活
dkonishi
0
240
Kansai WordPress Meetup@京都 近況とこれから
dkonishi
0
120
大阪Pythonの会の紹介@Python Kansai #01
dkonishi
1
170
Netlify Functions 叩き初め
dkonishi
0
220
Gatsby.jsでWordPressのフロントエンドを作る
dkonishi
0
300
AWS LambdaからSlackに ○○を送る
dkonishi
0
1.3k
Bench京都怖くない
dkonishi
0
210
WordBench京都への関わりと何を得たか
dkonishi
0
150
最近やったCSSの設計と やってみて感じたこと
dkonishi
0
180
Other Decks in Programming
See All in Programming
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
CI改善もDatadogとともに
taumu
0
110
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
『品質』という言葉が嫌いな理由
korimu
0
160
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Side Projects
sachag
452
42k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
We Have a Design System, Now What?
morganepeng
51
7.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Done Done
chrislema
182
16k
Docker and Python
trallard
44
3.3k
Transcript
複数ソースから集めて作る 自分サイト Daisuke KONISHI Me too Astro #1
Daisuke KONISHI エンジニアリングマネージャー Web エンジニア コーヒーとラーメンでできています @skd_nw
None
自分のサイト持ってますか • ポートフォリオ • ブログ とかとか
何で作ってますか? • Astro • WordPress • STUDIO • Notion •
何かしらのフレームワーク • その他
これまで色々経由して作ってきました 1. HTML/CSS/JavaScript 2. WordPress 3. Hugo (たしかやった) 4. Next.js
(SSG) 5. Astro
「静的サイトの形で配信したい」にたどり着いている • あまり内容の更新がない • なるべく面倒を見なくていい状態にしたい • 未来で乗り換える可能性はあるのでデータは別で持っていたい • 自分がある程度書けてメンテ出来そうなものにしておきたい A.
Astroで。
1.技術ブログを書いているので その内容を取得・表示 2.個人開発したものを取得・表示 経歴を取得・表示 (今は見せ方の再検討中で閉じてます)
1.ブログ記事
1.ブログ記事の取得 記事本文は不要で、タイトルとリンクだけあればOK • ブログは別途Next.jsで実装しています • 記事データはmicroCMSで管理していますが、Next.jsを経由して取得する ようにしています • Next.jsからRSSを配信してAstroはこれを取得・パースして表示している
1.自サイト側でのブログ記事の更新どうするか • 今は… ◦ 気が向いた時のビルド ◦ 定期的に行っているパッケージアップデートを反映するタイミングでビ ルド • そこまで高頻度で更新しているわけではないので、ある程度ラグがあって
もOK
1.自サイト側でのブログ記事の更新どうするか なるべくリアルタイムで更新するなら... • microCMSのWebhookを利用する • AstroでSSRする • Astro IslandでReactなどを活用してCSRする
2.個人開発したものを取得・表示 • 個人開発の実績データはmicroCMSで管理しています • こちらは特に捻り無くAstroから取得しています
基本的にはSSGにしている • なるべく管理したくないので。 • 各所からデータ取得を行っているが、シークレットやデータ取得量の問題 をあまり気にしなくて良くなるのが大きい • ビルドで処理が終わっているので、とても早くページを届けられる (早いは 正義)
Astroでやるのって結局どうなのか • 運用し始めてからは、考えることがぐっと減って良い • Node.jsの豊富なエコシステムを使えるので、何かしようと思ったときに楽 • ちょっとJSを書こうと思うとちょっと気持ちのハードルがあがる
まぁやってみようよ