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 خودتون رو بسازید. برای یادگیری بیشتر می تونید به سایت خودش مراجعه کنید. البته سعی میکنیم در آینده مقاله کامل تری در این مورد منتشر کنیم . تجربه های قشنگتون رو در کامنت ها با ما به اشتراک بزارین.
پاسخی بگذارید