آشنایی با گتسبی - بخش یک

کوتاه و خلاصه بخوام بگم، Gatsby یا همون "گتسبی" یه فریم‌ورک جاوا اسکریپتیه که با react و webpack سر و کار داره و با اتصال به GraphQL، می‌تونه داده‌های مختلف رو به‌طور مستقیم از databse, API, SaaS, File System و حتی از دیگر CMSها بخونه و در نهایت خروجی رو به‌صورت وب‌سایت استاتیک تولید کنه. البته این رو هم باید بگم که با گتسبی سایت‌های فروشگاهی و وب‌اپلیکیشن‌هایی که فانکشنال‌تر هستن هم میشه تولید کرد و تولید هم کردن!

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

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

قدم اول: آماده‌سازی محیط کار

من عادت دارم برای کارهای مختلف از اینوایرمنت مخصوص خودش استفاده کنم که با بقیه کارهام به لحاظ تداخل با پکیج‌های سایر پروژه‌هام به مشکل برنخوردم و هم اینکه توی جابه‌جایی‌های سیستمی که معمولا دارم، دردسرهای متداول کمتری داشته باشم. پس برای اینکه بتونم گتسبی رو نصب کنم، اول از همه باید NodeJS رو نصب کنم که برای NodeJS من از nvm به عنوان ابزار کمکی مدیریت نسخه‌های NodeJS استفاده می‌کنم.

نصب NVM آسونه، کلا نصب کردن همیشه آسونه 😆 توی ترمینال این دستور رو می‌زنیم:

kevin:~$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

بعد از نصب NVM کافیه، ترمینالتون رو ببندید و از نو باز کنید. بعدش nvm رو تایپ کنید تا توضیحات راهنماش رو نشون بده که مطمئن بشید درست نصب شده؛ قدم بعد، نصب یکی نسخه‌های جدید و استیبل Nodejs هست، که من فعلا از نسخه v11.5.0 استفاده می‌کنم. برای نصب این نسخه با nvm کافیه این دستور رو تایپ کنید:

kevin:~$ nvm install 11.5.0

v11.5.0 is already installed.
Now using node v11.5.0 (npm v6.4.1)

بعدش می‌تونید گتسبی یا هر فریم‌ورک و ماژولی که دوست دارید رو با خیال راحت نصب کنید.

نصب گتسبی

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

kevin:~$ npm install --global gatsby-cli

/home/kevin/.nvm/versions/node/v11.5.0/bin/gatsby -> /home/kevin/.nvm/versions/node/v11.5.0/lib/node_modules/gatsby-cli/lib/index.js
+ gatsby-cli@2.4.8
added 2 packages from 1 contributor and updated 6 packages in 17.565s

kevin:~$ gatsby --version
2.4.8

ایجاد پروژه جدید با گتسبی

برای ایجاد سایت و کلا پروژه با گتسبی، تنها کافیه دستور gatsby new و بعدش اسم پروژه که من اینجا از test استفاده کردم، تایپ کنید. چند ثانیه/دقیقه طول می‌کشه تا پکیج‌های پروژه استارتر گتسبی برای شما دانلود و نصب بشه، بعدش می‌تونید فولدرش رو باز کنید و شروع به پیاده‌سازی نیازهاتون کنید.

kevin:~$ gatsby new test
info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-default.git
Cloning into 'test'...
remote: Enumerating objects: 1072, done.
remote: Total 1072 (delta 0), reused 0 (delta 0), pack-reused 1072
Receiving objects: 100% (1072/1072), 1.93 MiB | 4.32 MiB/s, done.
Resolving deltas: 100% (610/610), done.
success Created starter directory layout
Done in 40.96s.

kevin:~$ ls
gatsby-browser.js  gatsby-config.js  gatsby-node.js  gatsby-ssr.js  LICENSE  node_modules  package.json  package-lock.json  README.md  src  yarn.lock

اجرای سایت و گرفتن خروجی

طبق معمول، دوتا دستور develop و build در گتسبی، مثل سایر فریم‌ورک‌ها عمل می‌کنه. وقتی برای اولین‌بار دستور gatsby develop رو اجرا کنید، زمان بیشتری صرف میشه تا یک‌سری کش توسط فریم‌ورد توی فولدر روت پروژه شما ایجاد بشه. درمورد محتوای این فولدر و چیزهای دیگه‌اش بعدا شاید بیشتر بنویسم. اما فعلا این رو بدونید که بعد از دستور دولوپ، گتسبی پورت 8000 رو روی دستگاه شما برای اجرای لوکال استفاده می‌کنه.

kevin:~$ gatsby develop
success open and validate gatsby-configs — 0.010 s
success load plugins — 0.364 s
success onPreInit — 0.337 s
success delete html and css files from previous builds — 0.007 s
success initialize cache — 0.010 s
success copy gatsby files — 0.014 s
success onPreBootstrap — 0.006 s
success source and transform nodes — 0.084 s
success building schema — 0.346 s
success createPages — 0.001 s
success createPagesStatefully — 0.044 s
success onPreExtractQueries — 0.004 s
success update schema — 0.194 s
success extract queries from components — 0.209 s
success run graphql queries — 0.252 s — 8/8 33.24 queries/second
success write out page data — 0.005 s
success write out redirect data — 0.001 s
Generating image thumbnails [==============================] 6/6 0.2 secs 100%

info bootstrap finished - 6.254 s

⠄ onPostBootstrapdone generating icons for manifest
success onPostBootstrap — 0.163 s
 DONE  Compiled successfully in 4154ms                                                                                                                                                                  9:26:08 PM


You can now view gatsby-starter-default in the browser.

  http://localhost:8000/

View GraphiQL, an in-browser IDE, to explore your site's data and schema

  http://localhost:8000/___graphql

Note that the development build is not optimized.
To create a production build, use gatsby build

ℹ ｢wdm｣: 
ℹ ｢wdm｣: Compiled successfully.

بعد از اجرا کافیه توی مرورگرتون آدرس http://localhost:8000 رو باز کنید و بوووومب 💥

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