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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Daisuke Konishi
July 20, 2024
Programming
0
120
複数ソースから集めて作る自分サイト
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
270
Kansai WordPress Meetup@京都 近況とこれから
dkonishi
0
170
大阪Pythonの会の紹介@Python Kansai #01
dkonishi
1
200
Netlify Functions 叩き初め
dkonishi
0
270
Gatsby.jsでWordPressのフロントエンドを作る
dkonishi
0
310
AWS LambdaからSlackに ○○を送る
dkonishi
0
1.3k
Bench京都怖くない
dkonishi
0
230
WordBench京都への関わりと何を得たか
dkonishi
0
180
最近やったCSSの設計と やってみて感じたこと
dkonishi
0
190
Other Decks in Programming
See All in Programming
CSC307 Lecture 04
javiergs
PRO
0
660
FOSDEM 2026: STUNMESH-go: Building P2P WireGuard Mesh Without Self-Hosted Infrastructure
tjjh89017
0
180
日本だけで解禁されているアプリ起動の方法
ryunakayama
0
260
Apache Iceberg V3 and migration to V3
tomtanaka
0
170
Gemini for developers
meteatamel
0
100
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
ahuglajbclajep
5
1k
Unicodeどうしてる? PHPから見たUnicode対応と他言語での対応についてのお伺い
youkidearitai
PRO
1
2.6k
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
610
CSC307 Lecture 08
javiergs
PRO
0
670
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
190
CSC307 Lecture 02
javiergs
PRO
1
780
MDN Web Docs に日本語翻訳でコントリビュート
ohmori_yusuke
0
660
Featured
See All Featured
Joys of Absence: A Defence of Solitary Play
codingconduct
1
290
エンジニアに許された特別な時間の終わり
watany
106
230k
Designing Experiences People Love
moore
144
24k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Being A Developer After 40
akosma
91
590k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
460
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
61
52k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Reality Check: Gamification 10 Years Later
codingconduct
0
2k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
65
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
68
SEO for Brand Visibility & Recognition
aleyda
0
4.2k
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を書こうと思うとちょっと気持ちのハードルがあがる
まぁやってみようよ