شروع کار با Gridsome

عصر مولدهای سایت استاتیک به مرور زمان در حال تغییر است. تعداد زیادی ابزار جالب ساخته می‌شوند تا در پرورش دادن تکامل JAMStack به ما کمک کنند و توسعه دهندگان در حال پذیرفتن این ابزار هستند. یکی از ابزار مربوط به ساخت وبسایت‌های بسیار سریع، Gridsome است.

در این مقاله، ما نگاهی به نحوه استفاده از Gridsome برای ساخت یک سایت لیست کردن پروفایل، ویژگی‌های اصلی آن و این که در مقایسه با دیگر مولدهای سایت استاتیک چگونه است، خواهیم داشت.

جدول محتوا:

• یک مولد سایت استاتیک (Static Site Generator) چیست؟
• Gridsome چیست؟
• ویژگی‌های Gridsome
• Gridsome چگونه کار می‌کند؟
• مقایسه با مولدهای سایت استاتیک دیگر
• ساخت یک سایت Gridsome
• پیش‌نیازها
• نصب Gridsome
• ساختار پوشه
• پلاگین‌ها
• راه‌اندازی Bulma برای استایل‌بندی
• کوئری کردن داده‌ها با GraphQL
• نمایش کامپوننت Layout
• نمایش کامپوننت Pages
• استقرار
• جمع‌بندی

یک مولد سایت استاتیک (Static Site Generator) چیست؟

آیا به یاد دارید که قبلا با کمی CSS در جاهای مختلف با سایت‌های HTML بازی می‌کردیم؟ من وقتی شروع به یادگیری کردم، خیلی پیش می‌آمد که این کار را انجام دهم. شما به طور طبیعی این وبسایت را یک وبسایت استاتیک خواهید نامید؛ زیرا هیچ نوع عمل دینامیکی در آن انجام نمی‌شود. این یک واقعیت است، اما به داشتن یک صفحه HTML استاتیک نیاز دارد. مولدهای سایت استاتیک یک رویکرد جدید و دورگه به توسعه‌دهی وب هستند که شما را قادر می‌سازند تا وبسایت‌های قدرتمندی را به طور محلی در کامپیوتر خود بسازید، اما این وبسایت‌ها را در قالب فایل‌های استاتیک برای استقرار قرار می‌دهند.

Gridsome چیست؟

Gridsome یک مولد سایت استاتیک بر پایه Vue، برای ساخت وبسایت‌های استاتیک بسیار سریع است. Gridsome داده محور می‌باشد، که یعنی از یک لایه GraphQL برای دریافت داده از منابع مختلف، و تولید صفحات به طور دینامیک استفاده می‌کند. Gridsome یک جایگزین Vue برای Gatsby در React.js است.

ویژگی‌های Gridsome

Gridsome تعداد زیادی ویژگی خوب به همراه دارد که ساخت یک وبسایت با آن را تبدیل به یک انتخاب خوب می‌کنند. برخی از ویژگی‌های آن:

• توسعه‌دهی به همراه hot-reloading - در هنگام توسعه‌دهی، تغییرات خود را به صورت realtime ببینید.
• Vue.js برای frontend - فریم‌وورک frontend بسیار سبک و قابل دسترسی.
• لایه داده GraphQL - مدیریت داده متمرکز برای تمام داده‌های شما.
• مسیریابی صفحه خودکار - به سرعت صفحات را به همراه فایل‌ها ساخته، و مدیریت کنید.
• پشتیبانی از تصاویر پیش‌رونده - تصاویر را به طور خودکار تغییر اندازه داده، بهینه‌سازی کرده و lazy load کنید.
• پیش دریافت خودکار صفحه - در جهت مرور سریع‌تر، صفحات در پس‌زمینه بارگذاری شده‌اند.
• کد بهینه‌‌سازی شده به طور خودکار - تقسیم‌بندی کد و بهینه‌سازی دارایی را به طور پیشفرض داشته باشید.
• تولید سایت استاتیک سریع - وبسایت خود را به صورت امن و سریع بر روی هر میزبان سایت استاتیکی مستقر کنید.
• پلاگین‌های منبع داده - داده‌هایی را برای CMSهای headless، APIها یا فایل‌های markdown معروف اضافه کنید.

Gridsome چگونه کار می‌کند؟

Gridsome یک فریم‌وورک وبسایت است که ما را قادر می‌سازد تا وبسایت‌های استاتیک بسیار سریعی را بسازیم. نحوه کار آن به این صورت است که داده‌ها را از منابع داده مانند CMSها، فایل‌های محلی یا APIهای خارجی دریافت کرده، و آن‌ها را در یک دیتابیس محلی ذخیره می‌کند. GraphQL به عنوان یک سیستم مدیریت داده متمرکز عمل می‌کند که داده‌ها را مدیریت کرده، و قابلیت استخراج آن‌ها و استفاده از کامپوننت‌های Vue شما را به شما می‌دهد. Gridsome یک دستور به نام gridsome develop را برای توسعه‌دهی فراهم می‌کند که سرور محلی را به همراه hot-reloading و یک لایه داده GraphQL راه‌اندازی می‌کند. و برای تولید، دستور gridsome build وبسایت مورد نظر را با اتصال و تولید فایل‌های HTML که می‌توانند به هر CDN یا FTP از نوع global توسعه داده شوند، آماده تولید می‌کند.

مقایسه با مولدهای سایت استاتیک دیگر

در کنار Gridsome، برخی مولدهای سایت استاتیک دیگر هم برای ساخت وبسایت خود در دسترس هستند. من Gridsome را با برخی مولدهای سایت استاتیک مانند Gatsby، Nuxt و Vuepress مقایسه خواهم کرد.

ساخت یک سایت Gridsome

پیش‌نیازها

در جهت ادامه دادن با این آموزش، شما باید این موارد را راه‌اندازی کرده باشید:

• Node نسخه 8.0 یا بالاتر
• NPM (این مورد به همراه Node موجود می‌باشد) یا Yarn
• دانش پایه در زمینه JavaScript و Vue

نصب Gridsome

اولین کاری که ما انجام می‌دهیم، بررسی این است که Node و NPM نصب شده باشند.

node --version && npm -v

سپس می‌توانید Gridsome CLI را با اجرای این دستور نصب کنید:

yarn global add @gridsome/cli

// یا

npm install --global @gridsome/cli

قدم بعدی این است که یک پروژه جدید را با استفاده از CLI که نصب کردیم، بسازید:

gridsome create gridsome-site

پس از پایان نصب آن، می‌توانیم وبسایت Gridsome مورد نظر را با استفاده از این دستور اجرا کنیم:

cd gridsome-site && gridsome develop

حال وبسایت Gridsome شما راه‌اندازی شده، و بر روی درگاه ۸۰۸۰ در حال اجراست. Gridsome همچنین یک محیط کار GraphQL برای آزمایش کوئری‌های خود فراهم می‌کند. شما می‌تونید آن را بر روی آدرس http://localhost:8080/___explore بیابید.

ساختار پوشه

ما ساختار پوشه یک وبسایت Gridsome را بررسی خواهیم کرد. در جهت این که درک کنیم Gridsome چه کاری می‌تواند انجام دهد، باید هدف از هر فایل موجود در پروژه خود را به طور کامل درک کنیم..

.
├── package.json
├── gridsome.config.js
├── gridsome.server.js
├── static/
└── src/
    ├── main.js
    ├── layouts/
    │   └── Default.vue
    ├── pages/
    │   ├── Index.vue
    │   └── Blog.vue
    └── templates/
        └── BlogPost.vue

Gridsome در آغاز تمام فایل‌هایی که برای مستقر کردن یک وبسایت نیاز داریم را به همراه دارد. ما می‌توانیم ببینیم که از پیش برخی فایل‌ها در شاخه پروژه ما قرار دارند.

• package.json - این جایی است که تمام dependencyهای پروژه در آن ذخیره خواهند شد.
• gridsome.config.js - این فایل به عنوان یک فایل پیکربندی برای وبسایت Gridsome ما عمل می‌کند، که شما پلاگین‌ها را در آن پیکربندی می‌کنید.
• gridsome.server.js - این فایل اختیاری است و برای وارد شدن به بخش‌های متنوع سرور Gridsome استفاده می‌شود.
• شاخه /src: این پوشه جایی است که اکثر کد شما در آن قرار دارد. ما این فایل‌ها را در آن داریم:

• main.js - این فایل شامل پیکربندی‌ برنامه می‌باشد؛ به گونه‌ای که بخش‌های دیگر برنامه را به اِی‌پی‌آی Gridsome وارد می‌کند.
• Layouts/ - کامپوننت‌های Layout (طرح) برای جمع‌بندی صفحات و قالب‌ها استفاده می‌شوند. کامپوننت layout در پوشه src/layouts قرار دارد و باید به عنوان کامپوننت global نمایش داده شود. این پوشه همچنین شامل کامپوننت slot می‌بلشد که محتویات صفحات و کامپوننت‌های قالب را به layout وارد می‌کنند.
• Pages/ - صفحات، یک سری کامپوننت‌های جداگانه هستند. هر کامپوننت موجود در شاخه pages، مستقیما تبدیل به بخشی بر روی وبسایت می‌شود. هر صفحه مسیر خود را بر پایه موقعیت فایل .vue به دست خواهد آورد. به عبارتی src/pages/Index.vue تبدیل به صفحه خانه شده و src/pages/about هم به عنوان صفحه «درباره ما» رندر خواهد شد.
• Templates/ - قالب‌ها برای viewهای پست تکی به مجموعه‌های GraphQL استفاده می‌شود. برای اضافه کردن یک قالب، یک فایل .vue با نام مشابهی به مانند مجموع GraphQL مورد نظر در شاخه src/templates بسازید.

• شاخه /static: این شاخه می‌تواند برای ذخیره فایل‌هایی که پس از ساخت مستقیما به پوشه dist/ کپی خواهند شد، استفاده شود. برای مثال /static/robot.txt.

پلاگین‌ها

با فعال کردن پلاگین‌ها، شما می‌توانید عملکردهای افزوده‌ای به همراه برنامه Gridsome خود داشته باشید. گزینه‌های پلاگین‌ها، به gridsome.config.js اضافه شده‌اند. در این آموزش، ما یک وبسایت لیست کردن پروفایل خواهیم ساخت و به پلاگین gridsome/source-faker برای کمک در پر کردن داده‌ها به وبسایت نیاز خواهیم داشت. بیایید ادامه داده، و آن را راه‌اندازی کنیم.

پلاگین مورد نظر را با استفاده از این دستور نصب کنید:

yarn add @gridsome/source-faker 

یا

npm install @gridsome/source-faker

این کد را به فایل gridsome.config.js اضافه کنید:

module.exports = {

  siteName: 'Fancy Random Profile',

  siteUrl: '',

  siteDescription: 'A directory listing of random profiles',

  plugins: [

    {

      use: '@gridsome/source-faker',

      options: {

        numNode: 50

      }

    }

  ]

}

راه‌اندازی Bulma برای استایل‌بندی

در این آموزش، من از Bulma برای استایل‌بندی استفاده خواهم کرد و برای راه‌اندازی آن، باید این خطوط را به فایل main.js اضافه کنم. من از Bulma CDN استفاده می‌کنم. تنها کاری که باید انجام دهم، این است که آن را به head‌ فایل HTML تولید شده لینک کنم.

import DefaultLayout from '~/layouts/Default.vue'



export default function (Vue, {router, head, isClient}) {

  // Set default layout as a global component

  Vue.component('Layout', DefaultLayout)

  head.link.push({

    rel: 'stylesheet',

    href: '//cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css'

  })

}

کوئری کردن داده‌ها با GraphQL

با Gridsome، چند راه برای آوردن داده‌ها به سایت خود وجود دارند. Gridsome استفاده از GraphQL را برای مدیریت داده‌ها آسان‌تر می‌کند. حال که ما این پلاگین را نصب کرده‌ایم، بیایید محیط GraphQL و کوئری‌هایی که به آن‌ها دسترسی داریم را بررسی کنیم. دستور yarn develop را بری رفتن به آدرس http://localhost:8080/\_\_\_explore اجرا کنید.

یک سندنگاری برای تمام کوئری‌ها وجود دارد و ما می‌توانیم ببینیم که کوئری‌های faker و allFaker به عنوان نتیجه‌ای از پلاگین gridsome/source-faker که نصب کردیم، اضافه شده‌اند. این داده‌ها برای پر کردن وبسایتی که در حال ساخت آن هستیم، استفاده خواهد شد. حال بیایید یک صفحه پروفایل بسازیم.

نمایش کامپوننت Layout

وبسایتی که ما در حال ساخت آن هستیم، نیاز دارد که دو صفحه بسازیم. اولین صفحه، صفحه‌ای پر از لیست پروفایل‌ها خواهد بود و صفحه دیگر هم یک صفحه «درباره ما»، شامل جزئیاتی درباره وبسایت خواهد بود. پس بیاید یک layout به نام Default.vue بسازیم و این کد را به آن وارد کنیم:

<template>
  <div class="container">
    <header class="header">
      <g-link class="title is-size-3" :to="{ name: 'home'}">{{ $static.metaData.siteName }}</g-link>
      <g-link class="subtitle is-size-3" :to="{ name: 'about' }">About</g-link>
    </header>
    <slot/>
  </div>
</template>

شما می‌توانید داده‌ها را با استفاده از static-query، به این صورت از GraphQL در یک کامپوننت Layout کوئری کنید:

<static-query>
query {
  metaData {
    siteName
  }
}
</static-query>

در فایل Default.vue، ما می‌توانیم دستور static-query را ببینیم. کاری که این دستور انجام می‌دهد، این است که شما را قادر می‌سازد تا داده‌ها را از GraphQL به کامپوننت layout خود بیاورید. حال ما در حال دریافت نام وبسایت از کوئری Metadata بوده، و از آن داخل قالب $static.metaData.siteName استفاده می‌کنیم. ما همچنین با منتقل کردن <slot />، محتویات کامپوننت صفحه را نمایش می‌دهیم.

نمایش کامپوننت Pages

حال در جهت این صفحه مربوط به نمایش پروفایل‌های تصادفی را بسازیم، یک فایل به نام Index.vue داخل شاخه pages می‌سازیم. در این مورد،‌ فایل Index.vue به طور پیشفرض تبدیل به صفحه خانه می‌شود. ما همچنین یک کامپوننت به نام About.vue هم خواهیم ساخت.

<template>
  <Layout>
    <div class="content">
      <div class="card" v-for="edge in $page.allFaker.edges" :key="edge.node.id">
        <div class="card-content columns">
        <div class="column is-2">
          <figure class="image is-128x128">
            <img class="is-rounded" :src="edge.node.avatar">
          </figure>
        </div>
        <div class="column">
          <p class="title"> {{ edge.node.author }}</p>
          <p class="subtitle"> <i class="has-text-dark">Contact Email:</i> {{ edge.node.email.src }}</p>
          <p class="subtitle"> <i class="has-text-dark"> Profile: </i> {{ edge.node.title }}</p>
        </div>
        </div>
      </div>
    </div>
  </Layout>
</template>

page-query همچنین برای کوئری کردن داده‌ها از GraphQL استفاده شده، و آزمایش مشابه به static-query را انجام می‌دهد. تنها تفاوت در اینجاست که این مورد به خصوص برای Pages و Tamplates استفاده می‌شود.

<page-query>
query allFaker {
  allFaker (perPage: 10) {
    edges {
      node {
        email,
        author,
        avatar,
        title,
      }
    }
  }
}
</page-query>

و برای صفحه About، ما در واقع هیج داده‌ای را از GraphQL کوئری نمی‌کنیم. تنها چیزی که ما داریم، یک متن است که موضوع این وبسایت را توصیف می‌کند.

<template>
  <Layout class="content">
    <p class="title is-4">
      Fancy Random Profile is a website listing random people's profile and details.
    </p>
   <a href="https://github.com/lauragift21/scotch-gridsome">GitHub Repo Available here</a>
  </Layout>
</template>
<script>

عالی است! ما وبسایت لیست کردن پروفایل را تمام کردیم، و این وبسایت چنین ظاهری دارد. شما می‌توانید دستور yarn develop را برای راه‌اندازی سرور اجرا کنید.

استقرار

استقرار یک وبسایت Gridsome، معمولا کار سختی نیست؛ زیرا ابزاری مانند Netlify، Zeit Now، GitHub Page و... برای کمک به ما در دسترس هستند. ما از Netlify برای استقرار برنامه‌ای که در این آموزش ساختیم، استفاده خواهیم کرد. برای مستقر کردن وبسایت Gridsome خود بر روی Netlify، به پلتفرم Netlify‌ رفته و یک صفحه وبسایت جدید بسازیم. مخزن پروژه خود را از GitHub، GitLab یا BitBucket انتخاب کنید، و این پیکربندی‌های ساخت را اضافه کنید.

پس از اضافه کردن آن، بر روی دکمه Deploy site کلیک کنید. این کار باید لینکی به وبسایت شما ایجاد کند. شما می‌توانید وبسایت لیست کردن پروفایل ما را در این لینک ببینید.

جمع‌بندی

در این آموزش، شما درک کردید که Gridsome چیست و چگونه با استفاده از آن یک وبسایت استاتیک بسازید. شما همچنین نحوه استفاده از لایه GraphQL را برای کوئری کردن داده‌ها دیدید.

منبع