Astro+SvelteでつくるWebサイト
- カテゴリー
- Jamstack >
- 静的サイトジェネレーター
- JavaScript
全6回
架空の会社サイトをAstroとSvelteをベースに作り、公開・運用までできるようにしていきます。AstroとSvelteの組み合わせは、パフォーマンスが良く、運用コストが抑えられるという利点があります。
最終回 GitHub Pagesでサイトを公開する
AstroとSvelteを使って作成したサイトをGitHub Pagesで公開します。GitHub Actionsを使ってビルド処理を自動化しておきましょう。公開後の運用やAstroのSSRモードについても触れます。
第5回 Pagefindを使ってサイト内検索機能を実装する
Astroと組み合わせて使うのに相性がよいライブラリ「Pagefind」を使って、サイト内検索機能を実装します。プレビューでは検索機能は動作しないので、ビルド後に確認する点に注意しましょう。
第4回 ページネーション機能を実装する
Astroのページネーション機能を使って、お知らせ一覧ページの件数を制限し、ページネーションを実装します。各ページのデータの中身を理解しながら進めると、ページ間ナビゲーションの設置も容易です。
第3回 お知らせページと既読機能を追加する
今回は記事を追加していける「お知らせ」ページを作っていきます。ファイルでコンテンツを管理するためのContent CollectionsというAstroの機能を使っていきましょう。
第2回 共通部分と固定ページを作る
ヘッダー・フッターなど、全ページで共通する部分を作り、それをコンポーネントとして使い回せるようにします。また、内容が固定されたレイアウト用のコンポーネントも作ります。
第1回 環境構築と開発サーバーの確認
小規模なコーポレートサイトを作るという想定で、AstroとSvelteを使ってWebサイトを作成していきます。まずは環境構築と開発サーバーの確認をします。