Astro.js は、そのシンプルさ、柔軟性、パフォーマンスにより Web 開発者の間で人気を得ている最新の静的サイト ジェネレーターです。 HTML、CSS、JavaScript などの使い慣れたテクノロジを使用して高速 Web サイトを構築できるほか、さまざまなフロントエンド フレームワークもサポートします。この記事では、Astro.js の基本を説明し、この強力なツールを使い始めるプロセスを案内します。
静的サイトは、サーバー側の処理を必要とせずにユーザーのブラウザに直接提供される、事前に構築された HTML、CSS、および JavaScript ファイルで構成される Web サイトの一種です。コンテンツをその場で生成する動的 Web サイトとは異なり、静的サイトは事前に作成され、手動で更新されるまで変更されません。このアプローチには、読み込み時間の短縮、セキュリティの向上、スケーラビリティの容易さなど、いくつかの利点があります。静的サイトは、情報が頻繁に変更されない、ブログ、ポートフォリオ、ドキュメントなどのコンテンツ中心の Web サイトに特に適しています。また、最新の Web 開発手法との互換性も高く、さまざまなホスティング プラットフォームを介した簡単なバージョン管理と展開が可能です。
静的サイト ジェネレーターは、静的 Web サイトの作成に役立つツールです。通常は単純な形式で記述されたコンテンツを受け取り、それを HTML ファイルに変換します。これらのファイルは Web サーバーにアップロードできます。静的サイト ジェネレーターは、Web サイト構築プロセスを自動化し、コンテンツの管理と更新を容易にします。多くの場合、すべてのページでデザインの一貫性を保つのに役立つテンプレートなどの機能が含まれています。このアプローチは、ユーザーがリクエストしたときにページを作成する動的 Web サイトとは異なります。
Astro.js は、強力で多用途の静的サイト ジェネレーターとして際立っており、開発者がプロジェクトに Astro.js を選択するいくつかの説得力のある理由を提供します。 Astro.js の中核は、デフォルトで高パフォーマンスの Web サイトを提供するように設計されており、必要な JavaScript のみをブラウザーに送信することに重点を置いています。このアプローチにより、読み込み時間が短縮され、ユーザー エクスペリエンスが向上します。これは、今日の Web 環境において重要な要素です。
Astro.js の重要な利点の 1 つは、その柔軟性です。これにより、開発者は同じ Astro.js プロジェクト内で React、Vue、Svelte などの好みのフロントエンド フレームワークを使用できるようになります。これは、Astro の最適化されたビルド プロセスの恩恵を受けながら、既存のスキルとコンポーネント ライブラリを活用できることを意味します。さらに、Astro.js は部分的なハイドレーションをサポートしているため、必要な場合にのみインタラクティブ性を追加して、パフォーマンスをさらに最適化できます。
Astro.js は、開発者エクスペリエンスにおいても優れています。簡単なファイルベースのルーティング システム、組み込みのマークダウン サポート、現代の Web 開発者にとって馴染みのあるコンポーネント ベースのアーキテクチャを提供します。 Astro.js フレームワークは静的優先レンダリングに重点を置いているため、JAMstack の原則とよく一致しており、コンテンツの多い Web サイトやアプリケーションにとって優れた選択肢となっています。
ここでは、Astro.js と他の一般的な静的サイト ジェネレーターおよびフレームワークとの比較を示します。
パフォーマンス:
柔軟性:
学習曲線:
エコシステムとプラグイン:
ビルド速度:
これらの比較は、パフォーマンス、柔軟性、使いやすさにおける Astro.js の強みを強調しており、Astro.js を使用して最新の効率的な静的 Web サイトを構築しようとしている開発者にとって魅力的な選択肢となっています。
Astro.js を使い始めるには、マシンに Node.js がインストールされている必要があります。これは、nodejs.org からダウンロードできます。 Node.js をインストールしたら、次のコマンドを使用して新しい Astro.js プロジェクトを作成できます:
npm create astro@latest
create astro はマシン上のどこでも実行できるため、開始する前にプロジェクト用に新しい空のディレクトリを作成する必要はありません。新しいプロジェクト用の空のディレクトリがまだない場合は、ウィザードが自動的に作成します。
コマンドを実行した後、手順に従い、完了したら次のコマンドで開発サーバーを起動できます。
npm run dev
これによりローカル サーバーが起動し、http://localhost:4321 で新しい Astro.js サイトを表示できます。
新しいページを作成するには、新しいファイルを src/pages ディレクトリに追加します。たとえば、http://localhost:4321/about に新しいページを作成するには、about.astro.
という名前の新しいファイルを src/pages ディレクトリに追加します。
---
// this is the frontmatter where you can define page metadata and provide other options to the page
const title = 'About';
---
<html>
<head>
<title>{title}</title>
</head>
<body>
<h1>About</h1>
<!-- Your page content here -->
</body>
</html>
コンポーネントを追加するには、新しいファイルを src/components ディレクトリに追加します。たとえば、Button.astro という新しいコンポーネントを追加するには、Button.astro.
という新しいファイルを src/components ディレクトリに追加します。
---
interface Props {
label: string;
}
const { label } = Astro.props;
---
<button>{label}</button>
ここでは、コンポーネントの props を入力するための Props インターフェースを定義しました。また、Astro.props オブジェクトを使用して、コンポーネントに渡された props にアクセスしました。
新しく作成した Button.astro コンポーネントを about.astro ページで使用します。
---
// this is the frontmatter where you can define page metadata and provide other options to the page
const title = 'About';
import Button from "../components/Button.astro"; // importing the Button component
---
<html>
<head>
<title>{title}</title>
</head>
<body>
<h1>About</h1>
<!-- Your page content here -->
<Button label="Hello" />
</body>
</html>
Astro は、ページにスタイルを追加するいくつかの方法を提供します。一般的なアプローチをいくつか示します:
インライン スタイル:
style 属性を使用して、インライン スタイルを HTML 要素に直接追加できます:
<h1 style="color: blue; font-size: 24px;">Hello, Astro.js!</h1>
スコープ付きスタイル:
Astro を使用すると、コンポーネント ファイル内に範囲指定されたスタイルを追加できます。これらのスタイルは現在のコンポーネントにのみ適用されます:
---
// Your component logic here
---
<h1>Hello, Astro.js!</h1>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
グローバル スタイル:
サイト全体に適用するグローバル スタイルを追加するには、別の CSS ファイルを作成し、それを Astro コンポーネントにインポートします。
---
import "../styles/global.css";
---
<html>
<head>
<title>My Astro.js Site</title>
</head>
<body>
<h1>Hello, Astro.js!</h1>
</body>
</html>
CSS モジュール:
Astro は、すぐに CSS モジュールをサポートします。 .module.css 拡張子を持つファイルを作成し、コンポーネントにインポートします:
---
import styles from "./styles.module.css";
---
<h1 class={styles.heading}>Hello, Astro.js!</h1>
Tailwind CSS:
Astro には、Tailwind CSS のサポートが組み込まれています。セットアップ後は、HTML 内で直接 Tailwind クラスを使用できます。
<h1 class="text-blue-500 text-2xl font-bold">Hello, Astro.js!</h1>
プロジェクトのニーズとコーディング スタイルの好みに最も適した方法を選択してください。
Astro.js は、コンテンツを作成するための強力なオプションをいくつか提供しており、ブログ、マーケティング サイト、ポートフォリオなどのコンテンツ中心のサイトに最適です。 Astro.js でコンテンツを作成および管理できるさまざまな方法を見てみましょう。
Markdown は、リッチ テキスト コンテンツを記述するための一般的で簡単な構文です。 Astro.js には Markdown ファイルのサポートが組み込まれているため、コンテンツの多いページを簡単に作成できます。
Astro.js で Markdown を始めるには:
Astro.js の Markdown ファイルの例を次に示します:
--- title: "My First Blog Post" pubDate: 2024-03-15 description: "This is my first blog post using Astro.js" author: "Astro.js Learner" --- # Welcome to my blog This is my first blog post using Astro.js. I'm excited to share my thoughts! ## What I've learned 1. How to set up an Astro.js project 2. How to create pages in Astro.js 3. How to use Markdown for content
サイトを構築すると、このファイルは /my-first-post にページを自動的に生成します。
MDX は、コンテンツ内に JavaScript 式とコンポーネントを含めることができるようにすることで、Markdown を拡張します。これは、インタラクティブな要素や複雑なレイアウトをコンテンツ ページに追加する場合に特に便利です。
Astro.js で MDX を使用するには:
MDX ファイルの例を次に示します:
--- title: "Interactive Blog Post" --- import Button from '../components/Button.astro' # Welcome to my interactive blog post Here's a regular Markdown paragraph. <Button label="Hello" /> And here's another Markdown paragraph after the component.
この例では、MDX コンテンツ内で前に定義した Button コンポーネントをインポートして使用しています。
For larger projects or teams that prefer a more robust content management system, Astro.js works well with headless CMS solutions. You can write your content in your preferred CMS and then fetch it in your Astro.js pages.
Here's a basic example of fetching content from a hypothetical CMS API:
---
const response = await fetch('https://api.your-cms.com/posts');
const posts = await response.json();
---
<h1>My Blog</h1>
{posts.map((post) => (
<article>
<h2>{post.title}</h2>
<p>{post.excerpt}</p>
<a href={`/blog/${post.slug}`}>Read more</a>
</article>
))}
Astro.js offers several ways to organize and manage your content:
Page Files: Markdown and MDX files in src/pages automatically generate pages.
Local Content: Keep content files outside src/pages and import them into Astro.js pages:
---
import { Content as AboutContent } from '../content/about.md';
---
<main>
<AboutContent />
</main>
import { defineCollection, z } from 'astro:content';
const blogCollection = defineCollection({
schema: z.object({
title: z.string(),
pubDate: z.date(),
tags: z.array(z.string()),
}),
});
export const collections = {
'blog': blogCollection,
};
Then, you can query your content:
---
import { getCollection } from 'astro:content';
const blogEntries = await getCollection('blog');
---
<ul>
{blogEntries.map(entry => (
<li>
<a href={`/blog/${entry.slug}`}>{entry.data.title}</a>
<time datetime={entry.data.pubDate.toISOString()}>
{entry.data.pubDate.toLocaleDateString()}
</time>
</li>
))}
</ul>
Astro.js makes it easy to create features like blog archives or tag pages:
---
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
const blogEntries = await getCollection('blog');
const uniqueTags = [...new Set(blogEntries.flatMap(post => post.data.tags))];
return uniqueTags.map(tag => ({
params: { tag },
props: { posts: blogEntries.filter(post => post.data.tags.includes(tag)) },
}));
}
const { tag } = Astro.params;
const { posts } = Astro.props;
---
<h1>Posts tagged with {tag}</h1>
<ul>
{posts.map(post => (
<li><a href={`/blog/${post.slug}`}>{post.data.title}</a></li>
))}
</ul>
This example creates a dynamic page for each unique tag in your blog posts.
By leveraging these content authoring and management features, you can create rich, content-driven websites with Astro.js while maintaining flexibility and ease of use.
To build your Astro.js site, you can run the following command:
npm run build
This will create a dist directory with your static site. You can then upload the contents of the dist directory to your web server.
You can deploy your Astro.js site using various platforms like Vercel or Netlify. Each platform has its own deployment process, but the general idea is to upload the contents of the dist directory to your chosen platform.
Astro.js offers a powerful and flexible approach to building static websites, combining the best of modern web development practices with exceptional performance. Its ability to work with multiple front-end frameworks, partial hydration capabilities, and focus on shipping minimal JavaScript make it an excellent choice for developers looking to create fast, content-driven websites with Astro.js. The Astro.js framework's intuitive file-based routing, built-in markdown support, and growing ecosystem of integrations further enhance its appeal for projects of various scales.
As you embark on your journey with Astro.js, remember that its strength lies in its versatility and performance-first approach. Whether you're building a personal blog, a corporate website, or a complex web application, Astro.js provides the tools and flexibility to bring your vision to life efficiently. By leveraging Astro.js features and best practices, you can create websites that not only look great but also deliver an exceptional user experience through blazing-fast load times and optimized content delivery.
以上がAstro.js 静的サイト ジェネレーターの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
