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
61
複数ソースから集めて作る自分サイト
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
110
大阪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
200
WordBench京都への関わりと何を得たか
dkonishi
0
150
最近やったCSSの設計と やってみて感じたこと
dkonishi
0
180
Other Decks in Programming
See All in Programming
月刊 競技プログラミングをお仕事に役立てるには
terryu16
1
1.3k
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
28
6.1k
BEエンジニアがFEの業務をできるようになるまでにやったこと
yoshida_ryushin
0
260
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
4.2k
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
2.2k
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
240
Flatt Security XSS Challenge 解答・解説
flatt_security
0
1.1k
Azure AI Foundryのご紹介
qt_luigi
1
260
Fibonacci Function Gallery - Part 2
philipschwarz
PRO
0
230
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
29
4.8k
ATDDで素早く安定した デリバリを実現しよう!
tonnsama
1
2.4k
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
500
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
A Tale of Four Properties
chriscoyier
157
23k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Embracing the Ebb and Flow
colly
84
4.5k
The Cult of Friendly URLs
andyhume
78
6.2k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Docker and Python
trallard
43
3.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.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を書こうと思うとちょっと気持ちのハードルがあがる
まぁやってみようよ