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
98
複数ソースから集めて作る自分サイト
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
260
Kansai WordPress Meetup@京都 近況とこれから
dkonishi
0
140
大阪Pythonの会の紹介@Python Kansai #01
dkonishi
1
190
Netlify Functions 叩き初め
dkonishi
0
240
Gatsby.jsでWordPressのフロントエンドを作る
dkonishi
0
300
AWS LambdaからSlackに ○○を送る
dkonishi
0
1.3k
Bench京都怖くない
dkonishi
0
220
WordBench京都への関わりと何を得たか
dkonishi
0
160
最近やったCSSの設計と やってみて感じたこと
dkonishi
0
190
Other Decks in Programming
See All in Programming
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
3
520
階層化自動テストで開発に機動力を
ickx
1
440
Go製CLIツールをnpmで配布するには
syumai
0
800
JetBrainsのAI機能の紹介 #jjug
yusuke
0
120
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
QA x AIエコシステム段階構築作戦
osu
0
220
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
200
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
260
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
760
リッチエディターを安全に開発・運用するために
unachang113
1
280
slogパッケージの深掘り
integral0515
0
160
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
Featured
See All Featured
Scaling GitHub
holman
461
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
It's Worth the Effort
3n
185
28k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Raft: Consensus for Rubyists
vanstee
140
7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
A better future with KSS
kneath
238
17k
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を書こうと思うとちょっと気持ちのハードルがあがる
まぁやってみようよ