AstroとmicroCMSで作ったサイトにページネーションを実装する
この記事は microCMS Advent Calendar 2022 の25日目の記事です。昨年に引き続き参加させて頂きました。今回は、AstroとmicroCMSで作成したWebサイトにページネーションを実装する内容について書いています。 はじめに microCMSは日本製のヘッドレスCMSです。日本語の分かりやすい管理画面でコンテンツを管理して、APIベースで簡単にデータを扱うことができます。 AstroはWebサイトを構築するためのフレームワークです。公式サイトのトップに"Build faster websites."とあるように、高速なWebサイトを構築することを目的としていて、完全な静的HTMLを生成することもできるといった特徴があります。また、Astroにはページネーションに必要な機能がビルトインでサポートされています。本記事ではこの機能を利用して、以下のような2種類のページ
Jamstack な構成（Gatsby+microCMS+Firebase）で個人サイトを作成しました - Qiita
今年の GW もステイホーム期間でしたので、フロントエンド周りの技術勉強も兼ねて個人サイトを作成してみました。 折しも、 Qiita では「フロントエンド強化月間」となっていましたので、記事にします。 完成したサイト まだ未完成な部分はありますが、 https://www.zakioka.net/ で個人サイトを公開しました。 ソースは GitHub のリポジトリに公開しております： 大まかな構成は以下のとおりです： いわゆる Jamstack な構成にしています。 「J」と「M」：Gatsby 「A」：microCMS ビルドとデプロイ：GitHub Actions ホスティング： Firebase Hositing 個人サイトで実現した機能は以下のとおりです： 個人のプロフィール表示 Markdown で記述した技術メモを Web ページとして公開 microCMS でブログ記事を作成
知識不足すぎるのでNext.js×microCMSをChatGPTに 手伝ってもらいました
発端：既存のサイトに組み込めるの便利だな… 過去に既に完成しているサイトをお知らせ機能などを使いたいからWordpress化してくれという個人的な仕事の際にすこーしだけ更新したいのにわざわざWordpress化するのめんどくさいな〜お知らせのところだけCMSにできないかと考えたことがありました。（その時から世にheadlessCMSは既にあったのですが…） 色々調べて情報収集しているとheadlessCMSというものの存在を知り、日本で開発されているmicroCMSというものの存在を知りました。なので実際に今後使ってみたいと思い上記の記事に書いてある詳しい手順を参考に作成してみました。 始めた時の状況 ・TypeScript未経験 ・Next.js未経験 ・module.css未知 ・Reactなら分かる ・API微経験 と言うレベル感です。こんな私でもできたのでChatGPTすごい… 進
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
