個人のポートフォリオサイトをAstroでv2からv4にアップグレードする際の手順やエラーについてのメモが含まれています。アップグレードにはCLIコマンドを使用し、バージョンアップに伴う変更点を確認する必要があります。また、発生したビルドエラーの対応策として、Astro.locals.runtimeから環境変数を取得する方法が示されています。さらに、Transitions APIを追加する手順も紹介されています。

Astroは、サーバーサイドレンダリング（SSR）モードを持つが、Cloudflare Pages / Workersにデプロイする場合、Node.jsではない実行環境に注意が必要。AstroにCloudflareのSSRモードを追加するには、`astro add cloudflare`コマンドを実行。`astro.config.mjs`の変更を自動で行い、プレビューが表示される。しかし、Markdocファイルを読み込む際のエラーが発生した場合、Cloudflare Workers / Pages Functionsの実行環境ではfsモジュールがサポートされていないため、Markdownファイルの読み込みに関しては静的にビルドしてデプロイする必要がある。

AWS Samurai 2023を受賞した古里さんからのお声掛けで、StripeとCloudflareを学べるイベントに参加しました。ワークショップでは、Astro / Stripe / Cloudflare Pagesについて学びました。StripeとCloudflareの連携については、決済とメールの連携があると紹介されました。具体的なコード例も提供されました。また、サブスクリプションの申込後にユーザーアカウントを作成する方法や、決済が完了するまでの処理についても説明されました。ワークショップは好評で、AstroやStripe、Cloudflareに興味がある方は是非参加してみてください。

ブログ作者は最近の登壇報告について振り返りをするため、2023年7月26日に開催された「Cloudflare Meet-up Online!! ~日本全国ユーザー大集合LT~」でのLT登壇について述べました。資料はDocswellで公開されていることや、AstroとCloudflare Pagesを使用してサイトを運用する話題が取り上げられています。SSRとSSGの併用方法やAstroの「Hybrid Rendering」の魅力も言及され、またCloudflareに関心がある方はDiscordやMeet-upに参加することができると案内されています。関西在住の方は地元のCloudflare Meet-upに参加することをおすすめしています。

最近Astroをよく使っている人に向けて、microCMSのデータを取得する方法を簡単にまとめました。まず、microCMSのAPIキーを取得し、環境変数に設定します。次に、microCMSのJS SDKを使って記事情報を取得するためのライブラリをインストールし、APIクライアントを作成します。作成したクライアントを使用して情報を取得して表示する処理を追加しましょう。また、Astroでのビルド・デプロイには、環境変数の扱いに注意が必要です。

Astroでサイトを構築している場合、RSSフィードの生成が必要となることがあります。Astroには、@astro/rssを利用することで、公式でRSS周りのライブラリが用意されています。getメソッドで、rss()の実行結果をreturnし、Markdownのデータからフィードを生成する例を示しています。RSSOptions型を利用することで、型安全なフィード生成処理を作成することもできます。詳細は、https://docs.astro.build/ja/guides/rss/を参照してください。

AstroとCloudflare Pagesを使い、サイトをビルドし、デプロイする方法について説明されています。Cloudflare PagesとGitHubのリポジトリを連携させ、接続するGitリポジトリを選んで、ビルド設定を行い、環境変数をAdvancedメニューから設定しましょう。その後、ビルド・デプロイログを追跡し、デプロイが完了するとサイトにアクセスできるようになります。最後に、定期的にビルドするには、GitHub Actions側からWranglerでデプロイする方法が良さそうです。

個人のポートフォリオサイトを、2023年からAstroで構築しています。 サイトの要件として、「日本語でも英語でも表示すること」があったため、勉強も兼ねてある程度自前で実装してみました。 基本方針 英語をベースとする 日 […]

Markdocでは、{% custom %}Custom Tag{/% custom %}のような「独自のタグ」を作れます。 Astroでタグの作成・登録を行う方法を紹介します。 独自タグの描画内容を、実装する まずは「 […]

Astro2.1から追加された、Markdocインテグレーションを試してみました。 A new experimental Markdoc integration has also been published along […]