コード側でCMSする静的サイト＠LoadMe LT会

プログラミングサークルLoadMeで開催されたLT会に参加したときの発表資料です。

Transcript

1. Build static website with Astro + Cloudflare Tetsu Github: @Tetsu-is LoadMe LT会 Feb 25 2025
2. CMS何使ってますか？
3. CMS何使ってますか？ microCMS： 管理画面で編集追加したコンテンツをAPIで取得できる WordPress： ossでセルフホストしちゃえば管理画面から投稿とか出来るやつ CMSとは.....content management systemの略である (自作ブログサイトの場合)
4. CMS何使ってますか？ CMSとは.....content management systemの略である microCMS： 管理画面で編集追加したコンテンツをAPIで取得できる WordPress： ossでセルフホストしちゃえば管理画面から投稿とか出来るやつ → Astroのcontent collection機能を使って、コード側でやってみよ (自作ブログサイトの場合)
5. 本日知って帰ってほしいこと！！
6. 本日知って帰って欲しいこと 個人ブログサイトを例に解説します AstroとCloudflareを使うと。。。 • CMSをコード側でやるという選択肢 • 無料でフルスタックなWebサイトを作れる
7. 自作ブログでの比較 (md+parser構成 vs microCMS) SSGで技術記事の掲載 md + parserの特徴 microCMSの特徴 mdファイルはIDE上で編集中のPreview表示 可能。HMRで画面Previewも可能。 編集すればAPIを叩いている箇所が本番で即 反映される！ CursorIDEで補完しながら書ける 非エンジニアが触りやすい mdx, Astro等でUI Componentに近い部分も 書ける ヘッドレスなのでWebでもモバイルでもOK ただのファイルなのでローカルで自動生成フ ローを組みやすい WebHookでci/cdを組むことができる。 `inline`や```codeblock```が使用可能 APIなので外部連携が容易
8. md + parserの特徴 microCMSの特徴 mdファイルはIDE上で編集中のPreview表示 可能。HMRで画面Previewも可能。 編集すればAPIを叩いている箇所が本番で即 反映される！ CursorIDEで補完しながら書ける 非エンジニアが触りやすい mdx, Astro等でUI Componentに近い部分も 書ける ヘッドレスなのでWebでもモバイルでもOK ただのファイルなのでローカルで自動生成フ ローを組みやすい WebHookでci/cdを組むことができる。 `inline`や```codeblock```が使用可能 APIなので外部連携が容易 • 編集者自分のみ • ブログの実装もあるのでCursor上で完結させたい • SSGなのでAPI経由はイマイチ • 技術記事なのでガンガンcodeblock使いたい • 用途がWebフロントのみである md+parserの構成が有利！ →mdを採用する！
9. Astroでは コンテンツ管理と parserが 標準搭載
10. Astroではコンテンツ管理とparserが標準搭載 contentCollection: meta情報(投稿日、タイトル等)もAstro内でjs 変数として使いまわしたりも出来る。 Contentディレクトリ配下のmdファイルがbuild時に HTMLとしてレンダリング&ファイルベースドルーティング
11. Cloudflareで広がる フルスタックアプリ
12. Cloudflareで広がるフルスタックアプリ Pages: 無料でデプロイ可能。Analyticsまで取れる Pages Functions: 一日10万リクエスト可能なサーバレス関数を公開可能。中身 はCloudflare Workers D1: SQLite互換のサーバレスデータベース これら全てを一括管理できるWrangler CLI。Bindings機能で 簡単に連携可能。
13. 例：Astroで作ったブログ 個人ブログサイト：tetsu-tech-blog URL ボタンやデータフェッチのインタラクティブな 部分だけReactやSvelteのcomponentにすることも可能