Gatsbyjs چیست و چگونه از آن استفاده کنیم؟
شما در مسیر توسعه با react حتما به سایت reactjs.org مراجعه کرده اید. اگه افزونه Wappalyzer رو روی مرورگرتون نصب داشته باشین ٬ وقتی وارد این سایت میشین gatsby رو به عنوان site generator می بینید . خب ببنیم Gatsby چیه؟
Gatsby یک سایت Generator بر پایه react و GraphQL هست . Gatsby بهترین بخش های React , webpack , react-router, GraphQL و ابزار دیگر front-end رو با هم ادغام کرده تا برای توسعه دهنده محیط توسعه جذابی رو فراهم کنه . شاید static site generator زیبنده Gatsby نباشه . چون Gatsby شبیه به یک فریمورک جدید و قدرتمنده تا یک سایت ساز استاتیک قدیمی .
این ابزار برای ساخت سایت هایی با صفحه های استاتیک ، به خاطر سرعت بی نهایت لود شدنش فوق العادست . Gatsby با استفاده از GraphQL ٬ داده های سایت رو گرد هم میاره تا دسترسی سریعی به اونها داشته باشید.
بالابردن کارایی وب سایت با این ابزار خیلی راحته خوب ببینیم چطور می تونیم ازش استفاده کنیم:
بعد از نصب Node.js با npm می تونید این ابزار رو روی سیستمتون داشته باشین:
|
1 |
npm install --global gatsby-cli |
با وارد کردن این دستور در CMD یا ترمیتال نصب gatsby انجام میشه. برای این که مطمئن شوید که این ابزار رو به درستی نصب کرده اید از کد زیر استفاده کنید:
|
1 |
gatsby --version |
حالا Gatsby برای استفاده آماده هست و شما می تونید اولین وب سایت خود را با Gatsby بسازید.
می تونید starter دانلود کنید که به صورت پیش فرض قالب یک پروژه رو داره و توسعه رو آسون تر می کنه . برای این منظور کد زیر رو وارد کنید:
|
1 |
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world |
بعد کد زیر را وارد کنید:
|
1 |
cd hello-world |
وبعد:
|
1 |
gatsby develop |
خب چی شد؟ با این کد هایی که وارد کردیم تونستیم پروژه Hello world خود را ایجاد کنیم . شما می تونید به جای Hello world از هر پروژه ای در گیت هاب استفاده کنید . بعد وارد پوشه پروژه خودمون شدیم و سرور خودمون رو به صورت لوکال راه اندازی کردیم.
خب مرورگر خودتون رو باز کنین و آدرس رو به رو را وارد کنین http://localhost:8000
تبریک می گم شما تونستید اولین وب سایت Gatsby خودتون رو بسازید. برای یادگیری بیشتر می تونید به سایت خودش مراجعه کنید. البته سعی میکنیم در آینده مقاله کامل تری در این مورد منتشر کنیم . تجربه های قشنگتون رو در کامنت ها با ما به اشتراک بزارین.
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
تفاوت توسعه برنامه های android و ios
بهترین زبان های برنامه نویسی برای هوش مصنوعی
تفاوت زبان های برنامه نویسی و اسکریپت نویسی
تفاوت for in و for of
بهترین فریمورک های UI برای استفاده در 2021
3 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
ممنون از توضیحتون
اگر در بخوایم پروژه ای رو که از قبل ساختیم gatsby بهش اضافه کنیم باید چیکار کنیم تا این کار رو انجام بدیم ؟
با استفاده از gatsby یعنی دیگه نیاز نیست برای بالا اوردن پروژه بنویسیم yarn start یا اینکه npm start ؟
و اینکه این رو با چه سروری به صورت رایگان میشه بالا آورد ؟
سلام محمد عزیز.
من زیاد با gatsby کار نکردم.
میتونی docs رو بخونی و اگر موفق شدی تجربیاتت رو با ما به اشتراک بزاری
https://www.gatsbyjs.org/docs/
برای اینکار بهتره یک پروژه جدا با gatsby بسازید سپس سورس فایل هاتون رو انتقال بدید به این پروژه ، این رو هم در نظر داشته باشید چون gatsby در واقع به عنوان یک cli و Global نصب میشه نمیتونید صرفا با package.json و npm install مایگریت کنید.