آموزش توسعه وب با Gatsby و Contentful

مقدمه

Gatsby یک فریم ورک React مبتنی بر GraphQL است که به شما امکان می دهد وب سایت های استاتیک سریع و بهینه ایجاد کنید. Contentful یک پلتفرم مدیریت محتوای headless (CMS) است که به شما امکان می دهد محتوای خود را به صورت ساختاریافته مدیریت کرده و از طریق API به آن دسترسی داشته باشید. ترکیب این دو ابزار به شما امکان می دهد وب سایت هایی با کارایی بالا و محتوای پویا ایجاد کنید.

در این آموزش، مراحل ساخت یک وب سایت ساده با استفاده از Gatsby و Contentful را به صورت گام به گام بررسی خواهیم کرد.

پیش نیازها

• Node.js و npm (یا yarn)
• آشنایی اولیه با React و JavaScript
• یک حساب کاربری Contentful (می توانید به صورت رایگان ثبت نام کنید)

مراحل راه اندازی پروژه

1. ایجاد پروژه Gatsby:

   از طریق ترمینال، دستور زیر را اجرا کنید:

   gatsby new my-gatsby-contentful-site

2. نصب پلاگین Contentful:

   وارد پوشه پروژه شوید و پلاگین Contentful را نصب کنید:

   cd my-gatsby-contentful-site
    npm install gatsby-source-contentful

3. پیکربندی پلاگین Contentful:

   فایل `gatsby-config.js` را باز کنید و پلاگین Contentful را پیکربندی کنید. برای این کار، به فضای Contentful و توکن دسترسی نیاز دارید:

   module.exports = {
     plugins: [
     {
     resolve: `gatsby-source-contentful`,
     options: {
     spaceId: `YOUR_SPACE_ID`,
     accessToken: `YOUR_ACCESS_TOKEN`,
     },
     },
     ],
    };

   به جای `YOUR_SPACE_ID` و `YOUR_ACCESS_TOKEN`، مقادیر مربوط به فضای Contentful خود را وارد کنید.

ایجاد مدل محتوا در Contentful

در این مرحله، باید مدل محتوای خود را در Contentful تعریف کنید. برای مثال، می توانید یک مدل محتوا برای مقالات با فیلدهایی مانند عنوان، متن، تصویر و تاریخ ایجاد کنید.

به داشبورد Contentful خود بروید و یک مدل محتوا جدید ایجاد کنید. فیلدهای مورد نیاز خود را تعریف کنید و تنظیمات مربوطه را انجام دهید.

ایجاد صفحات با Gatsby

Gatsby به شما امکان می دهد صفحات را به صورت برنامه نویسی ایجاد کنید. برای این کار، می توانید از APIهای Gatsby مانند `createPages` استفاده کنید.

در فایل `gatsby-node.js`، تابع `createPages` را تعریف کنید و منطق ایجاد صفحات را پیاده سازی کنید. در این تابع، می توانید داده های Contentful را از طریق GraphQL دریافت کرده و برای هر مقاله، یک صفحه جداگانه ایجاد کنید.

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  const result = await graphql(`
  query {
  allContentfulBlogPost {
  edges {
  node {
  id
  slug
  }
  }
  }
  }
  `);

  result.data.allContentfulBlogPost.edges.forEach(({ node }) => {
  createPage({
  path: \\`/blog/\\${node.slug}\\`,
  component: path.resolve(\\`./src/templates/blog-post.js\\`),
  context: {
  id: node.id,
  },
  });
  });
 };

در این مثال، برای هر مقاله با slug مشخص، یک صفحه با آدرس `/blog/{slug}` ایجاد می شود. فایل `blog-post.js` یک تمپلیت React است که محتوای مقاله را نمایش می دهد.

نمایش محتوا در تمپلیت React

در تمپلیت React (به عنوان مثال `blog-post.js`)، می توانید داده های Contentful را از طریق GraphQL دریافت کرده و در صفحه نمایش دهید.

import React from "react";
 import { graphql } from "gatsby";

 export default function BlogPost({ data }) {
  const post = data.contentfulBlogPost;

  return (
  <div>
  <h1>{post.title}</h1>
  <p>{post.body.body}</p>
  </div>
  );
 }

 export const query = graphql`
  query($id: String!) {
  contentfulBlogPost(id: { eq: $id }) {
  title
  body {
  body
  }
  }
  }
 `;

در این مثال، داده های مقاله با شناسه `$id` از Contentful دریافت شده و در صفحه نمایش داده می شود.

بهینه سازی SEO

برای بهینه سازی SEO وب سایت خود، می توانید از ابزارها و تکنیک های مختلفی استفاده کنید. برخی از مهم ترین موارد عبارتند از:

• استفاده از تگ های عنوان مناسب (H1، H2، و غیره)
• بهینه سازی توضیحات متا (Meta Description)
• استفاده از کلمات کلیدی مناسب در محتوا
• بهینه سازی تصاویر (Alt Text)
• ایجاد نقشه سایت (Sitemap)
• استفاده از Schema Markup

پرسش های متداول (FAQ)