Astro.js 靜態網站產生器入門-js教程-PHP中文網

Astro.js Getting started with a static site generator

Astro.js 是一種現代靜態網站產生器，因其簡單性、靈活性和效能而受到 Web 開發人員的歡迎。它允許您使用 HTML、CSS 和 JavaScript 等熟悉的技術建立快速網站，同時也支援各種前端框架。在本文中，我們將探索 Astro.js 的基礎知識，並引導您完成開始使用這個強大工具的過程。

什麼是靜態站點？

靜態網站是一種由預先建立的 HTML、CSS 和 JavaScript 檔案組成的網站，直接提供給使用者的瀏覽器，無需伺服器端處理。與即時產生內容的動態網站不同，靜態網站是提前建立的，並且在手動更新之前保持不變。這種方法具有多種優點，包括更快的載入時間、更高的安全性和更容易的可擴充性。靜態網站特別適合內容驅動的網站，例如部落格、作品集和文檔，這些網站中的資訊不會經常更改。它們還與現代 Web 開發實踐高度相容，允許透過各種託管平台輕鬆進行版本控制和部署。

什麼是靜態站點產生器？

靜態網站產生器是幫助建立靜態網站的工具。它會取得通常以簡單格式編寫的內容，並將其轉換為 HTML 檔案。然後可以將這些檔案上傳到網頁伺服器。靜態網站產生器可自動執行建立網站的過程，從而更輕鬆地管理和更新內容。它們通常包含模板等功能，有助於保持所有頁面的設計一致。這種方法與動態網站不同，動態網站會在使用者要求時建立頁面。

為什麼要使用 Astro.js？

Astro.js 是一款功能強大且多功能的靜態網站產生器，它為開發人員在其專案中選擇它提供了幾個令人信服的理由。 Astro.js 的核心旨在預設提供高效能網站，專注於僅向瀏覽器傳送必要的 JavaScript。這種方法可以縮短載入時間並改善使用者體驗，這是當今網路格局的關鍵因素。

Astro.js 的主要優勢之一是它的靈活性。它允許開發人員在同一個 Astro.js 專案中使用他們喜歡的前端框架，例如 React、Vue 或 Svelte。這意味著您可以利用現有的技能和元件庫，同時受益於 Astro 的最佳化建置流程。此外，Astro.js 支援部分水合，使您能夠僅在需要時添加互動性，從而進一步優化效能。

Astro.js 在開發者體驗方面也表現出色。它提供了一個簡單的基於文件的路由系統、內建的 Markdown 支援以及現代 Web 開發人員所熟悉的基於元件的架構。 Astro.js 框架對靜態優先渲染的強調與 JAMstack 原則非常一致，使其成為內容豐富的網站和應用程式的絕佳選擇。

以下是 Astro.js 與其他流行的靜態網站產生器和框架的比較：

表現：
- Astro.js：非常好，預設只提供了最少的 JavaScript
- Gatsby：很好，但由於 React 依賴，可能會很重
- Next.js：非常好，具有靜態和伺服器端渲染選項
- Hugo：非常好，以其建站速度而聞名
彈性：
- Astro.js：高，支援一個專案中的多個框架
- Gatsby：中等，主要基於 React
- Next.js：很好，但主要關注 React
- Hugo：有限，使用 Go 模板
學習曲線：
- Astro.js：相對簡單，特別是對於熟悉基於組件的架構的人
- Gatsby：更陡，需要了解 React 和 GraphQL
- Next.js：中等，對於有 React 經驗的人來說更容易
- Hugo：對於不熟悉 Go 的開發人員來說可能具有挑戰性
生態系與外掛：
- Astro.js：快速成長，社群支持不斷增加
- Gatsby：廣泛的插件生態系統
- Next.js：React 社群內強大的生態系統
- Hugo：完善的主題和外掛程式選擇
建造速度：
- Astro.js：速度快，特別是中小型網站
- Gatsby：由於 GraphQL 層，大型網站可能會變慢
- Next.js：通常很快，針對大型應用程式進行了最佳化
- Hugo：速度極快，以高效處理大型網站而聞名

這些比較突顯了 Astro.js 在效能、靈活性和易用性方面的優勢，使其成為希望使用 Astro.js 建立現代、高效靜態網站的開發人員的一個有吸引力的選擇。

Astro.js 入門

要開始使用 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 的新元件，您可以在 src/components 目錄中新增一個名為 Button.astro 的新檔案。

---
interface Props {
  label: string;
}

const { label } = Astro.props;
---

<button>{label}</button>

登入後複製

在這裡，我們定義了一個 Props 介面來輸入元件的 props。我們也使用 Astro.props 物件來存取傳遞給元件的 props。

使用組件

我們將在 about.astro 頁面中使用新建立的 Button.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>

登入後複製

順風CSS：
Astro 內建了對 Tailwind CSS 的支援。設定完成後，您可以直接在 HTML 中使用 Tailwind 類別：

<h1 class="text-blue-500 text-2xl font-bold">Hello, Astro.js!</h1>

登入後複製

選擇最適合您的專案需求和程式設計風格偏好的方法。

使用 Astro.js 撰寫內容

Astro.js 提供了多個強大的內容創作選項，使其成為部落格、行銷網站和作品集等以內容為中心的網站的絕佳選擇。讓我們來探索在 Astro.js 中編寫和管理內容的各種方法。

Markdown 創作

Markdown 是一種流行且簡單的語法，用於編寫富文本內容。 Astro.js 內建對 Markdown 檔案的支持，可輕鬆建立內容豐富的頁面。

在 Astro.js 開始使用 Markdown：

在 src/pages 目錄中建立一個新的 .md 檔案。
在文件頂部新增 frontmatter 以指定元資料。
使用 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 創作

MDX 透過讓您在內容中包含 JavaScript 運算式和元件來擴充 Markdown。當您想要為內容頁面添加互動式元素或複雜版面時，這特別有用。

要在 Astro.js 使用 MDX：

安裝 MDX 整合：npx astro add mdx
在 src/pages 目錄中建立 .mdx 檔案。
在內容中混合使用 Markdown 和 JSX。

這是 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 元件。

Headless CMS Authoring

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>
))}

登入後複製

Managing Content Pages

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>

登入後複製

Content Collections: Organize content in src/content/ for type-safe content management:

   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>

登入後複製

Showcasing Your Content

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.

Building your Astro.js site

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.

Deploying your Astro.js site

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.

Deploying to Vercel

Install the Vercel CLI: npm install -g vercel
Log in to Vercel: vercel login
Build your site: vercel build
Deploy your site: vercel deploy

Deploying to Netlify

Install the Netlify CLI: npm install -g netlify-cli
Log in to Netlify: netlify login
Build your site: netlify build
Deploy your site: netlify deploy

Conclusion

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中文網其他相關文章！