در این آموزش، به صورت گام به گام، نحوه استفاده از Gatsby را برای ایجاد وب سایت های استاتیک با کارایی بالا یاد خواهید گرفت. چه یک توسعه دهنده تازه کار باشید و چه یک متخصص باتجربه، این راهنما به شما کمک می کند تا قدرت Gatsby را کشف کنید.
Gatsby یک فریم ورک متن باز مبتنی بر React است که به شما امکان می دهد وب سایت های استاتیک فوق العاده سریع ایجاد کنید. Gatsby با ترکیب بهترین ویژگی های React، GraphQL و Webpack، یک تجربه توسعه دهنده عالی و یک تجربه کاربری بی نظیر را ارائه می دهد.
برای شروع کار با Gatsby، ابتدا باید Node.js و npm (یا Yarn) را روی سیستم خود نصب داشته باشید. سپس، می توانید Gatsby CLI را به صورت سراسری نصب کنید:
npm install -g gatsby-cli
پس از نصب Gatsby CLI، می توانید یک پروژه جدید Gatsby ایجاد کنید:
gatsby new my-gatsby-site
به دایرکتوری پروژه جدید خود بروید و سرور توسعه Gatsby را اجرا کنید:
cd my-gatsby-site
gatsby develop
اکنون می توانید وب سایت Gatsby خود را در آدرس http://localhost:8000 مشاهده کنید.
یک پروژه Gatsby دارای ساختار دایرکتوری زیر است:
src/: این دایرکتوری شامل تمام کدهای منبع وب سایت شما است.src/pages/: این دایرکتوری شامل کامپوننت های React است که به عنوان صفحات وب سایت شما عمل می کنند.src/components/: این دایرکتوری شامل کامپوننت های React قابل استفاده مجدد است.gatsby-config.js: این فایل شامل تنظیمات اصلی پروژه Gatsby شما است.gatsby-node.js: این فایل به شما امکان می دهد تا در فرآیند ساخت Gatsby مداخله کنید.gatsby-browser.js: این فایل به شما امکان می دهد تا در رفتار مرورگر Gatsby مداخله کنید.برای ایجاد یک صفحه جدید در Gatsby، کافی است یک فایل JavaScript جدید را در دایرکتوری src/pages/ ایجاد کنید. Gatsby به طور خودکار این فایل را به عنوان یک صفحه وب سایت شما شناسایی می کند.
به عنوان مثال، برای ایجاد یک صفحه "درباره ما"، یک فایل به نام src/pages/about.js ایجاد کنید و کد زیر را در آن قرار دهید:
import React from "react"
const AboutPage = () => {
return (
<div>
<h1>درباره ما</h1>
<p>این صفحه درباره ما است.</p>
</div>
)
}
export default AboutPage
اکنون می توانید صفحه "درباره ما" را در آدرس http://localhost:8000/about/ مشاهده کنید.
کامپوننت ها بلوک های ساختمانی اصلی React هستند و به شما امکان می دهند تا رابط کاربری خود را به بخش های کوچک و قابل استفاده مجدد تقسیم کنید.
برای ایجاد یک کامپوننت جدید در Gatsby، یک فایل JavaScript جدید را در دایرکتوری src/components/ ایجاد کنید. به عنوان مثال، برای ایجاد یک کامپوننت "هدر"، یک فایل به نام src/components/header.js ایجاد کنید و کد زیر را در آن قرار دهید:
import React from "react"
const Header = () => {
return (
<header style="background-color: #f0f0f0; padding: 20px;">
<h1 style="margin: 0;">وب سایت من</h1>
</header>
)
}
export default Header
سپس می توانید این کامپوننت را در صفحات خود استفاده کنید:
import React from "react"
import Header from "../components/header"
const IndexPage = () => {
return (
<div>
<Header />
<h1>صفحه اصلی</h1>
<p>به وب سایت من خوش آمدید!</p>
</div>
)
}
export default IndexPage
Gatsby از GraphQL برای دریافت داده ها از منابع مختلف استفاده می کند. GraphQL یک زبان پرس وجو قدرتمند است که به شما امکان می دهد تا دقیقاً داده هایی را که نیاز دارید درخواست کنید.
برای مثال، می توانید از GraphQL برای دریافت داده ها از یک فایل Markdown، یک API یا یک پایگاه داده استفاده کنید.
Gatsby یک API GraphQL را در اختیار شما قرار می دهد که می توانید از آن برای پرس وجو داده ها در کامپوننت های خود استفاده کنید. برای انجام این کار، باید از هوک useStaticQuery استفاده کنید:
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
const MyComponent = () => {
const data = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
}
}
}
`
)
return (
<div>
<h1>{data.site.siteMetadata.title}</h1>
</div>
)
}
export default MyComponent
استقرار یک وب سایت Gatsby بسیار آسان است. Gatsby یک فرمان gatsby build را ارائه می دهد که وب سایت شما را به یک مجموعه از فایل های استاتیک تبدیل می کند.
gatsby build
سپس می توانید این فایل ها را روی یک سرویس میزبانی استاتیک مانند Netlify، Vercel یا GitHub Pages مستقر کنید.
نیاز به کمک در سئو سایت خود دارید؟ با ما تماس بگیرید: 09190994063 - 09376846692