Astro.js Bermula dengan penjana tapak statik

Astro.js ialah penjana tapak statik moden yang telah mendapat populariti dalam kalangan pembangun web kerana kesederhanaan, fleksibiliti dan prestasinya. Ia membolehkan anda membina tapak web pantas menggunakan teknologi biasa seperti HTML, CSS dan JavaScript, sambil turut menyokong pelbagai rangka kerja bahagian hadapan. Dalam artikel ini, kami akan meneroka asas Astro.js dan membimbing anda melalui proses bermula dengan alat berkuasa ini.

Apakah Tapak Statik?

Tapak statik ialah sejenis tapak web yang terdiri daripada fail HTML, CSS dan JavaScript pra-bina yang disampaikan terus kepada penyemak imbas pengguna tanpa memerlukan pemprosesan bahagian pelayan. Tidak seperti tapak web dinamik yang menjana kandungan dengan segera, tapak statik dibuat lebih awal dan kekal tidak berubah sehingga dikemas kini secara manual. Pendekatan ini menawarkan beberapa kelebihan, termasuk masa muat yang lebih pantas, keselamatan yang dipertingkatkan dan kebolehskalaan yang lebih mudah. Tapak statik amat sesuai untuk tapak web dipacu kandungan seperti blog, portfolio dan dokumentasi, di mana maklumat tidak kerap berubah. Ia juga sangat serasi dengan amalan pembangunan web moden, membolehkan kawalan versi dan penggunaan mudah melalui pelbagai platform pengehosan.

Apakah Penjana Tapak Statik?

Penjana tapak statik ialah alat yang membantu membuat tapak web statik. Ia memerlukan kandungan, biasanya ditulis dalam format mudah, dan mengubahnya menjadi fail HTML. Fail-fail ini kemudiannya boleh dimuat naik ke pelayan web. Penjana tapak statik mengautomasikan proses membina tapak web, menjadikannya lebih mudah untuk mengurus dan mengemas kini kandungan. Mereka selalunya menyertakan ciri seperti templat, yang membantu memastikan reka bentuk konsisten merentas semua halaman. Pendekatan ini berbeza daripada tapak web dinamik, yang mencipta halaman apabila pengguna memintanya.

Mengapa menggunakan Astro.js?

Astro.js menonjol sebagai penjana tapak statik yang berkuasa dan serba boleh yang menawarkan beberapa sebab yang menarik untuk pembangun memilihnya untuk projek mereka. Pada terasnya, Astro.js direka bentuk untuk menyampaikan tapak web berprestasi tinggi secara lalai, memfokuskan pada penghantaran JavaScript yang diperlukan sahaja ke penyemak imbas. Pendekatan ini menghasilkan masa pemuatan yang lebih pantas dan pengalaman pengguna yang lebih baik, yang merupakan faktor penting dalam landskap web hari ini.

Salah satu kelebihan utama Astro.js ialah fleksibilitinya. Ia membenarkan pembangun menggunakan rangka kerja bahagian hadapan pilihan mereka, seperti React, Vue atau Svelte, dalam projek Astro.js yang sama. Ini bermakna anda boleh memanfaatkan kemahiran sedia ada dan perpustakaan komponen anda sambil mendapat manfaat daripada proses binaan Astro yang dioptimumkan. Selain itu, Astro.js menyokong penghidratan separa, membolehkan anda menambah interaktiviti hanya apabila perlu, seterusnya mengoptimumkan prestasi.

Astro.js juga cemerlang dalam pengalaman pembangunnya. Ia menawarkan sistem penghalaan berasaskan fail yang mudah, sokongan penurunan harga terbina dalam, dan seni bina berasaskan komponen yang dirasakan biasa kepada pembangun web moden. Penekanan rangka kerja Astro.js pada pemaparan pertama statik sejajar dengan prinsip JAMstack, menjadikannya pilihan yang sangat baik untuk tapak web dan aplikasi yang penuh kandungan.

Berikut ialah perbandingan Astro.js dengan penjana dan rangka kerja tapak statik popular yang lain:

• Prestasi:

  • Astro.js: Cemerlang, dengan JavaScript minimum dihantar secara lalai
  • Gatsby: Bagus, tetapi boleh menjadi berat kerana kebergantungan React
  • Next.js: Sangat bagus, dengan pilihan untuk pemaparan statik dan sisi pelayan
  • Hugo: Cemerlang, terkenal dengan kepantasannya dalam membina tapak

• Fleksibiliti:

  • Astro.js: Tinggi, menyokong berbilang rangka kerja dalam satu projek
  • Gatsby: Sederhana, terutamanya berasaskan React
  • Next.js: Baik, tetapi tertumpu terutamanya pada React
  • Hugo: Terhad, menggunakan templat Go

• Keluk Pembelajaran:

  • Astro.js: Agak mudah, terutamanya bagi mereka yang biasa dengan seni bina berasaskan komponen
  • Gatsby: Lebih curam, memerlukan pemahaman tentang React dan GraphQL
  • Next.js: Sederhana, lebih mudah bagi mereka yang mempunyai pengalaman React
  • Hugo: Boleh mencabar bagi pembangun yang tidak biasa dengan Go

• Ekosistem dan Pemalam:

  • Astro.js: Berkembang pesat, dengan peningkatan sokongan komuniti
  • Gatsby: Ekosistem pemalam yang luas
  • Next.js: Ekosistem yang kukuh dalam komuniti React
  • Hugo: Mapan dengan pilihan tema dan pemalam yang baik

• Kelajuan Binaan:

  • Astro.js: Cepat, terutamanya untuk tapak yang lebih kecil hingga sederhana
  • Gatsby: Boleh menjadi lebih perlahan untuk tapak besar disebabkan lapisan GraphQL
  • Next.js: Secara umumnya pantas, dengan pengoptimuman untuk aplikasi yang lebih besar
  • Hugo: Sangat pantas, terkenal kerana mengendalikan tapak besar dengan cekap

Perbandingan ini menyerlahkan kekuatan Astro.js dalam prestasi, fleksibiliti dan kemudahan penggunaan, menjadikannya pilihan yang menarik untuk pembangun yang ingin membina tapak web statik moden dan cekap dengan Astro.js.

Bermula dengan Astro.js

Untuk bermula dengan Astro.js, anda perlu memasang Node.js pada mesin anda. Anda boleh memuat turunnya dari nodejs.org. Setelah anda memasang Node.js, anda boleh mencipta projek Astro.js baharu menggunakan arahan berikut:

npm create astro@latest

Anda boleh menjalankan create astro di mana-mana sahaja pada mesin anda, jadi anda tidak perlu mencipta direktori kosong baharu untuk projek anda sebelum anda bermula. Jika anda belum mempunyai direktori kosong untuk projek baharu anda, wizard akan membantu mencipta satu untuk anda secara automatik.

Selepas menjalankan arahan, ikut langkah dan setelah anda selesai, anda boleh memulakan pelayan dev anda dengan:

npm run dev

Ini akan memulakan pelayan setempat, dan anda boleh melihat tapak Astro.js baharu anda di http://localhost:4321.

Mencipta halaman baharu

Untuk mencipta halaman baharu, anda boleh menambah fail baharu pada direktori src/pages. Contohnya, untuk membuat halaman baharu di http://localhost:4321/about, anda boleh menambah fail baharu pada direktori src/pages yang dipanggil about.astro.

---
// 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>

Menambah komponen

Untuk menambah komponen, anda boleh menambah fail baharu pada direktori src/komponen. Contohnya, untuk menambah komponen baharu yang dipanggil Button.astro, anda boleh menambah fail baharu pada direktori src/komponen yang dipanggil Button.astro.

---
interface Props {
  label: string;
}

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

<button>{label}</button>

Di sini, kami telah menentukan antara muka Props untuk menaip props bagi komponen tersebut. Kami juga telah menggunakan objek Astro.props untuk mengakses prop yang dihantar kepada komponen.

Menggunakan komponen

Kami akan menggunakan komponen Button.astro yang baru dibuat dalam halaman about.astro kami.

---
// 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>

Menambah gaya

Astro menyediakan beberapa cara untuk menambah gaya pada halaman anda. Berikut ialah beberapa pendekatan biasa:

Gaya sebaris:
Anda boleh menambah gaya sebaris terus pada elemen HTML anda menggunakan atribut gaya:

<h1 style="color: blue; font-size: 24px;">Hello, Astro.js!</h1>

Gaya berskop:
Astro membenarkan anda menambah gaya berskop dalam fail komponen. Gaya ini hanya akan digunakan pada komponen semasa:

---
// Your component logic here
---

<h1>Hello, Astro.js!</h1>

<style>
  h1 {
    color: blue;
    font-size: 24px;
  }
</style>

Gaya global:
Untuk menambah gaya global yang digunakan pada keseluruhan tapak anda, anda boleh membuat fail CSS yang berasingan dan mengimportnya dalam komponen Astro anda:

---
import "../styles/global.css";
---

<html>
  <head>
    <title>My Astro.js Site</title>
  </head>
  <body>
    <h1>Hello, Astro.js!</h1>
  </body>
</html>

Modul CSS:
Astro menyokong Modul CSS di luar kotak. Cipta fail dengan sambungan .module.css dan importnya dalam komponen anda:

---
import styles from "./styles.module.css";
---

<h1 class={styles.heading}>Hello, Astro.js!</h1>

CSS Tailwind:
Astro mempunyai sokongan terbina dalam untuk Tailwind CSS. Selepas menyediakannya, anda boleh menggunakan kelas Tailwind terus dalam HTML anda:

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

Pilih kaedah yang paling sesuai dengan keperluan projek anda dan pilihan gaya pengekodan.

Menulis Kandungan dengan Astro.js

Astro.js menyediakan beberapa pilihan hebat untuk mengarang kandungan, menjadikannya pilihan terbaik untuk tapak berfokuskan kandungan seperti blog, tapak pemasaran dan portfolio. Mari terokai pelbagai cara anda boleh menulis dan mengurus kandungan dalam Astro.js.

Pengarangan Markdown

Markdown ialah sintaks yang popular dan mudah untuk menulis kandungan teks yang kaya. Astro.js mempunyai sokongan terbina dalam untuk fail Markdown, menjadikannya mudah untuk membuat halaman yang mengandungi kandungan.

Untuk bermula dengan Markdown dalam Astro.js:

1. Buat fail .md baharu dalam direktori src/pages anda.
2. Tambah frontmatter di bahagian atas fail untuk menentukan metadata.
3. Tulis kandungan anda menggunakan sintaks Markdown.

Berikut ialah contoh fail Markdown dalam Astro.js:

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

Fail ini akan menjana halaman secara automatik di /my-first-post apabila anda membina tapak anda.

Pengarangan MDX

MDX memanjangkan Markdown dengan membenarkan anda memasukkan ungkapan dan komponen JavaScript dalam kandungan anda. Ini amat berguna apabila anda ingin menambah elemen interaktif atau reka letak yang kompleks pada halaman kandungan anda.

Untuk menggunakan MDX dalam Astro.js:

1. Pasang integrasi MDX: npx astro add mdx
2. Buat fail .mdx dalam direktori src/pages anda.
3. Gunakan gabungan Markdown dan JSX dalam kandungan anda.

Berikut ialah contoh fail 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.

Dalam contoh ini, kami mengimport dan menggunakan komponen Butang yang kami takrifkan sebelum ini dalam kandungan MDX kami.

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

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

Deploying to Netlify

1. Install the Netlify CLI: npm install -g netlify-cli
2. Log in to Netlify: netlify login
3. Build your site: netlify build
4. 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.

Atas ialah kandungan terperinci Astro.js Bermula dengan penjana tapak statik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!