Astro.js Getting started with a static site generator

Astro.js is a modern static site generator that has gained popularity among web developers for its simplicity, flexibility, and performance. It allows you to build fast websites using familiar technologies like HTML, CSS, and JavaScript, while also supporting various front-end frameworks. In this article, we'll explore the basics of Astro.js and guide you through the process of getting started with this powerful tool.

What is a Static Site?

A static site is a type of website that consists of pre-built HTML, CSS, and JavaScript files served directly to the user's browser without the need for server-side processing. Unlike dynamic websites that generate content on-the-fly, static sites are created in advance and remain unchanged until manually updated. This approach offers several advantages, including faster load times, improved security, and easier scalability. Static sites are particularly well-suited for content-driven websites such as blogs, portfolios, and documentation, where information doesn't change frequently. They're also highly compatible with modern web development practices, allowing for easy version control and deployment through various hosting platforms.

What is a Static Site Generator?

A static site generator is a tool that helps create static websites. It takes content, usually written in a simple format, and turns it into HTML files. These files can then be uploaded to a web server. Static site generators automate the process of building a website, making it easier to manage and update content. They often include features like templates, which help keep the design consistent across all pages. This approach is different from dynamic websites, which create pages when a user requests them.

Why use Astro.js?

Astro.js stands out as a powerful and versatile static site generator that offers several compelling reasons for developers to choose it for their projects. At its core, Astro.js is designed to deliver high-performance websites by default, focusing on shipping only the necessary JavaScript to the browser. This approach results in faster load times and improved user experience, which are crucial factors in today's web landscape.

One of the key advantages of Astro.js is its flexibility. It allows developers to use their preferred front-end frameworks, such as React, Vue, or Svelte, within the same Astro.js project. This means you can leverage your existing skills and component libraries while benefiting from Astro's optimized build process. Additionally, Astro.js supports partial hydration, enabling you to add interactivity only where needed, further optimizing performance.

Astro.js also excels in its developer experience. It offers a straightforward file-based routing system, built-in markdown support, and a component-based architecture that feels familiar to modern web developers. The Astro.js framework's emphasis on static-first rendering aligns well with JAMstack principles, making it an excellent choice for content-heavy websites and applications.

Here's a comparison of Astro.js with other popular static site generators and frameworks:

• Performance:

  • Astro.js: Excellent, with minimal JavaScript shipped by default
  • Gatsby: Good, but can be heavy due to React dependency
  • Next.js: Very good, with options for static and server-side rendering
  • Hugo: Excellent, known for its speed in building sites

• Flexibility:

  • Astro.js: High, supports multiple frameworks in one project
  • Gatsby: Moderate, primarily React-based
  • Next.js: Good, but primarily focused on React
  • Hugo: Limited, uses Go templating

• Learning Curve:

  • Astro.js: Relatively easy, especially for those familiar with component-based architectures
  • Gatsby: Steeper, requires understanding of React and GraphQL
  • Next.js: Moderate, easier for those with React experience
  • Hugo: Can be challenging for developers not familiar with Go

• Ecosystem and Plugins:

  • Astro.js: Growing rapidly, with increasing community support
  • Gatsby: Extensive plugin ecosystem
  • Next.js: Strong ecosystem within the React community
  • Hugo: Well-established with a good selection of themes and plugins

• Build Speed:

  • 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에 새 페이지를 만들려면 src/pages 디렉터리에 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>

구성 요소 추가

구성요소를 추가하려면 src/comComponents 디렉터리에 새 파일을 추가하면 됩니다. 예를 들어 Button.astro라는 새 구성 요소를 추가하려면 src/comComponents 디렉터리에 Button.astro라는 새 파일을 추가하면 됩니다.

---
interface Props {
  label: string;
}

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

<button>{label}</button>

여기서 구성요소의 소품을 입력하기 위한 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는 페이지에 스타일을 추가하는 여러 가지 방법을 제공합니다. 다음은 몇 가지 일반적인 접근 방식입니다.

인라인 스타일:
스타일 속성을 사용하여 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는 콘텐츠 작성을 위한 여러 가지 강력한 옵션을 제공하므로 블로그, 마케팅 사이트, 포트폴리오와 같은 콘텐츠 중심 사이트에 탁월한 선택입니다. Astro.js에서 콘텐츠를 작성하고 관리할 수 있는 다양한 방법을 살펴보겠습니다.

마크다운 작성

마크다운은 서식 있는 텍스트 콘텐츠를 작성하는 데 널리 사용되는 간단한 구문입니다. Astro.js에는 Markdown 파일 지원 기능이 내장되어 있어 콘텐츠가 많은 페이지를 쉽게 만들 수 있습니다.

Astro.js에서 Markdown을 시작하려면:

1. src/pages 디렉토리에 새 .md 파일을 만듭니다.
2. 메타데이터를 지정하려면 파일 상단에 머리말을 추가하세요.
3. 마크다운 구문을 사용하여 콘텐츠를 작성하세요.

다음은 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를 사용하려면:

1. MDX 통합 설치: npx astro add mdx
2. src/pages 디렉토리에 .mdx 파일을 생성하세요.
3. 콘텐츠에 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

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.

The above is the detailed content of Astro.js Getting started with a static site generator. For more information, please follow other related articles on the PHP Chinese website!