بلاگ

شروع کار با Astro - راهنمای کامل

نحوه ساخت وب‌سایت‌های سریع و مدرن با Astro را بیاموزید. این راهنمای جامع همه چیز از نصب تا استقرار را پوشش می‌دهد.

۳۰ دی ۱۴۰۴

• By محمد رباطی •

astro

توسعه-وب

آموزش

Article

مقدمه

Astro یک ابزار مدرن تولید سایت ایستا است که به شما امکان ساخت وب‌سایت‌های سریع‌تر با جاوااسکریپت کمتر در سمت کاربر را می‌دهد. در این راهنما، بررسی می‌کنیم که چه چیزی Astro را خاص می‌کند و چگونه می‌توان با آن شروع کرد.

Astro چیست؟

Astro یک فریمورک وب است که برای وب‌سایت‌های محتوا‌محور طراحی شده است. به‌طور پیش‌فرض هیچ جاوااسکریپتی ارسال نمی‌کند، به این معنی که سایت‌های شما فوق‌العاده سریع بارگذاری می‌شوند. همچنان می‌توانید در صورت نیاز از React، Vue یا سایر فریمورک‌ها برای کامپوننت‌های تعاملی استفاده کنید.

چرا Astro را انتخاب کنیم؟

عملکرد: بدون جاوااسکریپت به‌صورت پیش‌فرض به معنای زمان بارگذاری سریع‌تر است
انعطاف‌پذیری: از هر فریمورکی که می‌خواهید استفاده کنید (React، Vue، Svelte و غیره)
تجربه توسعه‌دهنده: تجربه توسعه عالی با پشتیبانی از TypeScript و ابزارهای مدرن
سازگار با SEO: عالی برای سایت‌های محتوایی و وبلاگ‌ها

شروع کار

نصب

npm create astro@latest

دستورالعمل‌ها را دنبال کنید تا پروژه خود را راه‌اندازی کنید. Astro شما را در فرآیند نصب راهنمایی می‌کند.

ساختار پروژه

my-astro-site/
├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   └── styles/
├── public/
└── astro.config.mjs

اولین صفحه شما

یک فایل در مسیر src/pages/index.astro ایجاد کنید:

---
// اسکریپت کامپوننت (در زمان ساخت اجرا می‌شود)
const title = "Hello, Astro!";
---

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
  </body>
</html>

مفاهیم کلیدی

کامپوننت‌ها

کامپوننت‌های Astro از فرمت فایل ویژه .astro استفاده می‌کنند که HTML، CSS و JavaScript را ترکیب می‌کند:

---
// اسکریپت کامپوننت
const name = "Astro";
---

<div class="greeting">
  <h1>Hello, {name}!</h1>
</div>

<style>
  .greeting {
    color: blue;
  }
</style>

صفحات

صفحات در Astro با استفاده از مسیریابی مبتنی بر فایل ایجاد می‌شوند. هر فایلی در src/pages/ تبدیل به یک مسیر می‌شود.

قالب‌های صفحه

قالب‌های صفحه، صفحات شما را با ساختار HTML مشترک می‌پوشانند:

---
// src/layouts/Layout.astro
---

<html>
  <head>
    <slot name="head" />
  </head>
  <body>
    <slot />
  </body>
</html>

استفاده از فریمورک‌ها

می‌توانید از React، Vue یا سایر فریمورک‌ها برای کامپوننت‌های تعاملی استفاده کنید:

npx astro add react

سپس از کامپوننت‌های React در صفحات Astro خود استفاده کنید:

---
import MyReactComponent from '../components/MyReactComponent';
---

<MyReactComponent client:load />

استقرار

سایت‌های Astro را می‌توان در پلتفرم‌های مختلف مستقر کرد:

Netlify: دستور npm run build را اجرا کنید و پوشه dist را مستقر کنید
Vercel: مخزن خود را متصل کنید، Vercel به‌طور خودکار Astro را شناسایی می‌کند
Cloudflare Pages: مستقیماً از GitHub مستقر کنید

نتیجه‌گیری

Astro گزینه‌ای عالی برای ساخت وب‌سایت‌های سریع و مدرن است. رویکرد بدون جاوااسکریپت به‌صورت پیش‌فرض آن را برای سایت‌های محتوایی عالی می‌کند، در حالی که همچنان امکان استفاده از فریمورک‌ها را در صورت نیاز فراهم می‌سازد.

آماده ساخت چیزی شگفت‌انگیز هستید؟ قالب‌های Astro ما را بررسی کنید تا به سرعت شروع کنید!

بازگشت به بلاگ