Astro ゆく年くる年
8 月 30 日に v3.0 がリリースされ、それから約 3 ヶ月後の 12 月 5 日には v4.0 がリリースされており、メジャーアップデートのペースがやや早かったように感じますね。Astro の co-creator である Matthew Phillips によると、v4.0 における大きな変更の一つに Vite 5 へのアップデートがあり、これはもともと v3.0 に含まれる予定だったのが、Vite 5 のリリースが遅れてしまい、一方で v3.0 の目玉機能である View Transitions を早くリリースしたかったため、まず先に v3.0 をリリースし、その後に v4.0 で Vite 5 を含めるという流れとなり、結果的に v3.0 と v4.0 のリリースが短期間で連続してしまった、という事情があったようです。 GitHub スター数の推移 https://star-
Astroで作る静的サイトに、超高速のAlgoliaの検索システムを導入する - Route360
前回、MeilisearchをAstroに導入しましたが、日本語の漢字語彙の検索にまだ少し難があるため、Algoliaも試しました。 Algoliaは、ドキュメント数10,000・月10,000サーチまでが無料となっています。個人や小規模のサイトには十分ですが、中規模以上になると料金がかさむというのが巷の評価（？）ですね。 コードの書き方に多少の違いがあるものの、流れ的には、Meilisearchの導入の手順と同じです。 Algoliaにユーザー登録 Astroプロジェクト内にalgoliasearchをインストール 検索用のデータを構築してAlgoliaに送信 検索フォーム・検索結果表示用コンポーネントを作成 ページ内で検索コンポーネントを読み込む スタイリング 動作環境: Node v18.12.1 Astro v2.0.11 algoliasearch v4.14.3 dotenv
Astro でリンクや参照などを相対パスでビルドする
はじめに まず、Astro では、相対パスでの生成は公式的には対応しておりません。 上記の issue と提案は上がったことはあるものの、現在は close されており、やり取りの中身を見ても、公式がサポートすることはあまり期待できなそうです。 個人的にも、こういった汎用的なフレームワークはやはり絶対パスのほうが何かと無難です。それは開発する側でも使う側でも。ですので、特殊な事情がないかぎりは絶対パスか絶対 URL を推奨します。 ただ、静的書き出しができるフレームワークにおいて、相対パスの需要も理解できます。 まず結論 プロジェクト内のリンクや参照を全部相対パスにして問題ないということであれば、astro-relative-links という Astro integration (Astro のプラグインみたいなもの) を作りましたので、こちらを使えば実現できます。使い方は後述。 要件
AstroでgetStaticPathsで指定したpropsをTypeScriptの型推論で型情報を取りだす
AstroでgetStaticPathsの返り値としてpropsが指定できます。 export async function getStaticPaths() { return [ { params: { id: "foo" }, props: { text: "abcd" }, }, { params: { id: "var" }, props: { text: "efg" }, }, ]; } TypeScriptで型指定を行いたい場合に、この場合はporpsの方は{ text:string }なのでファイル中に以下のような型定義を行えば型の指定が可能です。 export type Props = { text: string; } propsはgetStaticPathsの返り値として定義されているので頑張ればのgetStaticPaths返り値の型推論として取り出すこともできます。
AstroとmicroCMSでつくるブログサイト
=== 更新履歴 2024/1/10: MicroCMSQueriesをインポートするときにType-Only Imports and Exportを使用するように変更しました。 === こんにちは、microCMSの松田です。 今回は2022年8月に1.0バージョンを公開したAstroを使ったチュートリアルをお届けいたします。 Astroとは？Astroは静的サイトジェネレーターの一つです。 そのGitHubリポジトリには2022年9月時点で2万弱のスターが付けられています。 https://astro.build/ 数ある静的サイトジェネレーターの中でなぜAstroを選ぶのか公式のドキュメントで解説されています。 https://docs.astro.build/en/concepts/why-astro/ ここで書かれていることを簡潔にまとめると以下のような内容です。 Astroはウ
静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量Markdown対応、「Hybrid Rendering」で静的と動的ページの混在可能に
静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量Markdown対応、「Hybrid Rendering」で静的と動的ページの混在可能に オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 2.0」が正式にリリースされました。 Astro 2.0 – our most exciting release yet!https://t.co/FPb5rBTRPT — Astro (@astrodotbuild) January 24, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。 ビルド時にWebサイト全体のHTMLが生成され、しかもそのHTMLには全
ブログをAstro に移行しました - As a Futurist...
式年遷宮の様な感じですが、数年おきにブログを作り直してます(前回)。今回は Gatsby でデザインした UI をほぼそのままに、フレームワークを Astro に移行しました。静的サイトの作成では Astro の開発者体験が最高に優れているので、2 年間ほぼ塩漬けにしてしまっていた Gatsby のコードを無事に移行できてよかったです。 Astro とは？ Astro は 一言で言うと、Better HTML です。Astro というフォーマットでサイトが記述できるのですが、普通の(素の)HTML も Astro としてそのまま使えます。厳密には違いますが、HTML のスーパーセットみたいな感じです。その HTML の要素群を component としてまとめることで関心を分離できて(この辺は Web Components でも実現できます)、必要に応じてビルド時にロジックも走らせることが
AstroでSSGする場合の個人的ベストプラクティス - console.lealog();
個人的なやつなので、すべての案件にハマるわけではないはず。 今回はたまたまAstroを選んでるけど、他のものを使ってSSGする場合にも、ある程度は当てはまる内容かと。 データの取得コマンドとSSGのコマンドを分ける ビルドコマンドを叩いた時に、 SSGのフローの一貫としてデータを`fetch()`し、それを使ってページ生成 というのではなく、 データを取得し、ローカルにキャッシュするコマンド そのキャッシュを使って、SSGでページ生成するコマンド という2段構えにするということ。 こうすることで、ローカルでの開発時にネットワーキングしなくて済む。 データ取得のコマンドを賢く作れば、毎回一括ダウンロードもしなくてよくなるし。 アーキテクチャにSSGを採用した場合、遅かれ早かれCMSからすべてのデータを引っこ抜くことになるので、そこだけを個別に最適化できるようにしたほうが絶対に幸せになれる。C
SSGとしてのAstroとNext.jsを比較してみた
Webサイトを構築するアーキテクチャとしてJamstackを導入する際、Static Site Generator (SSG) としての選択肢は豊富にあります。 HugoやGatsby、Next.jsあたりが定番だと思いますが、2022年8月にv1.0がリリースされたAstroが個人的に気になったので、Next.jsとビルドのパフォーマンスを比較してみることにしました。 中〜大規模サイトでの利用を想定して、API経由でコンテンツ取得する1000ページ分のサイトをNext.js、Astroそれぞれで生成して比べてみます。 なお、Next.jsはStatic Generationを利用します。 先に結論 生成されたページのパフォーマンスはAstroのほうが有利 ビルド時間はNext.jsが早い。ただしやり方を変えればAstroのほうが早くなった。 準備編 Headless CMS（の代わり）
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
