Astro

[Astro] 静的サイトジェネレーター [エンドポイント、データフェッチ]

技術

静的アセット

Astro は、ほとんどの静的アセットを設定不要でサポートしています。プロジェクトの JavaScript (Astro front-matter スクリプトを含む) のどこでも import 文を使用でき、Astro は最終ビルドにその静的アセットのビルドされた最適化されたコピーを含めます。また、@import は CSS と <style> タグの中でもサポートされています。

続きを読む…

[Astro] 静的サイトジェネレーター [ルーティング]

技術

ルーティング

静的ルーティング

src/pages ディレクトリにある、Astro コンポーネント (.astro) と Markdown ファイル (.md) は自動的にウェブサイトのページとなります。

動的ルーティング

1つの Astro ページコンポーネントは、ファイル名に動的ルーティングパラメータを指定して、指定した条件に合致する複数のルーティングを生成することもできます。

続きを読む…

[Astro] 静的サイトジェネレーター [ページ、レイアウト]

技術

ページ

Astro ページ

.astro 拡張子を使い Astro コンポーネントと同じ機能を持ちます。
src/pages/index.astro

---
---
<html lang="ja">
    <head>
        <title>Home</title>
    </head>
    <body>
        <h1>Welcom to my site.</h1>
    </body>
</html>

全てのページで同じ HTML 要素を繰り返すことを避けるために、共通の <head> と <body> 要素を独自のレイアウトコンポーネントに移動できます。
src/pages/index.astro

続きを読む…

[Astro] 静的サイトジェネレーター [インストール、ディレクトリ構成、Astro コンポーネント]

技術

Astro

コンテンツにフォーカスした高速なWebサイトを構築するためのフレームワークです。

プロジェクトを作成

以下のコマンドを実行して、プロジェクトを作成します。

npm create astro@latest

Need to install the following packages:
  create-astro@1.2.4
Ok to proceed? (y) y
√ Where would you like to create your new project? ... // プロジェクト名
√ How would you like to setup your new project? » a few best practices (recommended)
✔ Template copied!
√ Would you like to install npm dependencies? (recommended) ... yes
✔ Packages installed!
√ Would you like to initialize a new git repository? (optional) ... yes
✔ Git repository created!
√ How would you like to setup TypeScript? » Relaxed
✔ TypeScript settings applied!

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./astro
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

npm run dev

ディレクトリ構成

・src/ - プロジェクトソースコード (コンポーネント、スタイル、ページ)
・public/ - コード以外の処理不要のアセット (フォント、アイコン)
・package.json - プロジェクトマニュフェスト
・astro.config.mjs - Astroの設定ファイル

続きを読む…