امتیاز

برای پروژه های خودتان نیاز دارید تا طراحی وب سایت استاتیک انجام دهید برای بک اند ؟

هزاران ابزار ساخت وب سایت های استاتیک وجود دارد مانند : JavaScript ، Ruby، Go

در این مقاله ، من قصد دارم پنج ابزار محبوب طراحی وب سایت استاتیک معرفی کنم و ویژگی های اصلی آنها را ذکر کنم ،

 

تولید کننده وب سایت استاتیک چیست؟

 

به عنوان مثال ، یک سیستم مدیریت محتوا (CMS) (مانند سیستم مدیریت محتوا) مانند وردپرس ، صفحه وب را به صورت پویا همانطور که توسط مشتری درخواست می شود ، می سازد.

همه داده ها را از پایگاه داده جمع می کند و محتوا را پردازش می کند. ولی استاتیک به این شکل نیست . دیتا با دیتابیس در ارتباط نیست

 

1. Hugo

 

طراحی وب سایت استاتیک
طراحی وب سایت استاتیک

Hugo یک طراح وب سایت استاتیک بسیار محبوب است که بیش از 32000 ستاره در حال حاضر در GitHub دارد.

این سیستم با زبان Go نوشته شده است و خود را سریعترین چارچوب برای ساختن وب سایت ها تبلیغ می کند.

در حقیقت هوگو بهترین وب سایت برای طراحی وب سایت استاتیک با تعداد مطالب خیلی زیاد است.

کار کردن با هوگو خیلی ساده است و در ضمن یک داکیومنت کامل و جامع و آسان نیز دارد.

در اینجا بهترین ویژگی های هوگو آورده شده است:

  • طراحی و بهینه سازی شده برای سرعت: به عنوان بهترین ابزار برای طراحی با سرعت بالا است.
  • نیازی به نصب افزونه های اضافی برای مواردی مانند صفحه بندی ، تغییر مسیر ، انواع مختلف محتوا و موارد دیگر نیست
  • کد های کوتاه موجود به عنوان گزینه ای برای استفاده از Markdown

 

2. Next.js

 

طراحی وب سایت استاتیک
طراحی وب سایت استاتیک

Next  یک چارچوب همه کاره برای ایجاد برنامه های جاوا اسکریپتی ارائه شده توسط سرور است. توسط Zeit ساخته شده است.

برای نصب Next ، دستور زیر را در ترمینال خود اجرا کنید:

    npm install --save next react react-dom

سپس این اسکریپت را به پرونده pack.json خود اضافه کنید:

    {
      "scripts": {
       "dev": "next",
       "build": "next build",
       "start": "next start"
      }
    }

با این کار ، هر پرونده .js به یک روت تبدیل میشود که قابل شناسایی خودکار است.

Next.js دارای فایل های آموزشی عالی است ، که می توانید در مورد ساخت برنامه های خود اطلاعات بیشتری کسب کنید.

 

بخوانید :   آشنایی با سایت Airtable

چند موردی که Next.js در آن عالی است :

  • رندرهای Next.js به صورت پیش فرض روی سرور قرار می گیرند که برای عملکرد عالی است.
  • بدون نیاز به نصب
  • توسعه پذیری: با Webpack و Babel ، مسیریابی ، تنظیمات خود را شخصی سازی کنید
  • داکیومنت ، آموزش ها ، آزمونها و مثالهای عالی برای اینکه شما را از کاربر مبتدی تا پیشرفته سوق دهد
  • افزونه های رسمی و عمومی در دسترس است
  • ده ها نمونه برنامه برای شروع کار.

 

3. Gatsby

 

طراحی وب سایت استاتیک
طراحی وب سایت استاتیک

 

Gatsby برای مستندات و وبلاگها بسیار عالی عمل می کند ، با React ساخته شده و از GraphQL برای Api  داده ها استفاده می کند.

در اینجا برخی از نکات برجسته Gatsby آورده شده است:

  • با Gatsby می توانید با جدیدترین فن آوری های وب کار کنید. React ، Webpack ، JS مدرن ، CSS ، و غیره
    که همه شما را برای شروع طراحی وب سایت استاتیک خود آماده می کند
  • افزونه های غنی Gatsby به شما امکان می دهد از هر نوع داده ای که ترجیح می دهید از یک یا چند منبع استفاده کنید
  • استقرار آسان و مقیاس پذیری آسان ، که بیشتر به این دلیل است که Gatsby صفحات استاتیک ایجاد می کند ، که به مجموعه های پیچیده ای نیاز ندارند
  • Gatsby تولید کننده برنامه های (PWA) است. شما کد و داده ها را دریافت می کنید.
    Gatsby فقط HTML ، CSS ، داده ها و JavaScript را بارگیری می کند تا سایت شما در سریع ترین زمان ممکن بارگیری کند.
    Gatsby پس از بارگیری ، منابع را برای سایر صفحات اشتراک گذاری می کند ، بنابراین کلیک روی سایت بسیار سریع احساس می شود.
  • تعداد زیادی قالب آماده برای شما در دسترس است تا بتوانید آزادانه و شخصی سازی کنید.

 

4. Nuxt.js

 

طراحی وب سایت استاتیک

Nuxt.js یک چارچوب سطح بالاتر است که با Vue.js ساخته شده است و به شما امکان می دهد وب سایت استاتیک بسازید.

با Nuxt می توانید یکی از موارد زیر را انتخاب کنید:

  • ارائه سمت سرور برای وب سایت شما ، به این حالت isomorphic می گویند . Nuxt از یک سرور Node برای ارائه HTML بر اساس مؤلفه های Vue استفاده می کند
  • وب سایت استاتیک : با استفاده از Nuxt می توانید بر اساس برنامه Vue خود وب سایت استاتیک بسازید
  • برنامه های تک صفحه ای (SPA). Nuxt به شما پیکربندی و چارچوبی برای ساخت SPA مبتنی بر Vue می دهد.
  • ایجاد وب سایتهای مبتنی بر Nuxt می تواند خیلی سریع انجام شود.
بخوانید :   بهترین ابزارهای دیجیتال مارکتینگ در سال ۲۰۲۰

در اینجا برخی از ویژگی های Nuxt.js آورده شده است:

  • عملکرد عالی: برنامه های مبتنی بر Nuxt  بهینه شده اند
  • ماژولار: Nuxt با استفاده از یک ساختار ماژولار قدرتمند ساخته شده است. بیش از 50 ماژول وجود دارد که می توانید برای سرعت بخشیدن به توسعه خود انتخاب کنید
  • منحنی یادگیری نسبتاً آسان. Nuxt مبتنی بر Vue است ، که چارچوبی است که باعث می شود آن را سریع و بدون دردسر شروع کنید
  • پیوند ES6 / ES7
  •  بهینه سازی JS & CSS
  • پیش پردازنده: Sass، Less، Stylus و غیره.

 

5. VuePress

 

طراحی وب سایت استاتیک
طراحی وب سایت استاتیک

VuePress یک تولید کننده وب سایت استاتیک با قابلیت Vue است.استفاده اصلی آن برای نوشتن داکیومنت فنی بهینه شده است ،

یک سایت VuePress به عنوان یک برنامه یک صفحه (SPA) کار می کند که قدرت Vue ، Vue Router و Webpack را افزایش می دهد.

برای نصب VuePress به صورت سراسری در سیستم خود ، فقط این دستور را در ترمینال خود اجرا کنید:

    npm install -g vuepress

سپس ، یک پرونده علامت گذاری ، اجرا کنید:

    echo '# Hello VuePress' > README.md

برای شروع نوشتن ، اجرا کنید:

    vuepress dev

برای طراحی وب سایت خود ، اجرا کنید:

    vuepress build 

در اینجا چند ویژگی عالی که VuePress ارائه کرده است آورده شده است:

  • راه اندازی سایت مستقر در VuePress سریع است و می توانید مطالب خود را با استفاده از Markdown بنویسید
  • VuePress با Vue ساخته شده است ، به این معنی که می توانید از تجربه وب Vue ، Webpack ، امکان استفاده از مؤلفه های Vue در پرونده های Markdown و توسعه تم های سفارشی با Vue لذت ببرید.
  • تجربه بارگیری سریع: سایت های استاتیک VuePress از فایل های HTML از قبل ارائه شده ساخته شده و به محض بارگیری در مرورگر ، به عنوان SPA اجرا می شوند
  • پشتیبانی چند زبانه به طور پیش فرض با i18n. تنظیم زبانهای دیگر با افزودن یک locales  بهthemeConfig در پرونده config.js پروژه مبتنی بر VuePress نیز کاملاً ساده است.
بخوانید :   نوه تبدیل سایت وردپرس خود به یک اپلیکیشن ، مرحله به مرحله

Nuxt.js یا VuePress؟

هر دو Nuxt.js و VuePress در بالای Vue.js ساخته شده اند و به شما امکان می دهند وب سایتهای استاتیک ایجاد کنید.

بنابراین ، کدام یک بر دیگری ارجح است؟

باید بگوییم که Nuxt.js می تواند همه کارهایی را انجام دهد که VuePress انجام می دهد.

با این حال ، در اصل ، Nuxt برای ساخت اپلیکیشن ها مناسب ترین است.

از طرف دیگر VuePress برای ایجاد وب سایتهای مستند سازی استاتیک که محتوای نوشته شده در Markdown را نمایش می دهند ایده آل است.

به طور خلاصه ، اگر همه آنچه شما نیاز دارید یک سایت اسناد یا یک وبلاگ بسیار ساده است بهتر است از Vue.js استفاده کنید.

 

نحوه انتخاب یک تولید کننده وب سایت استاتیک

 

با این همه گزینه ی مناسب برای ساخت وب سایت استاتیک حق دارید که گیج شوید.

اگر پروژه شما به قابلیت های پویا زیادی نیاز دارد ، Hugo و Gatsby می توانند انتخاب خوبی باشند.

به نظر می رسد هوگو محبوب تر است ، به خصوص اگر وب سایت شما دارای محتوای زیادی باشد.

آیا پروژه شما یک وبلاگ است یا یک وب سایت شخصی؟ در این حالت ، هوگو و گتسبی می توانند گزینه های عالی باشند ، در حالی که برای یک وب سایت اسناد ساده VuePress بسیار مناسب است.

نکته دیگری که ممکن است بخواهید در نظر بگیرید آشنایی شما با هر یک از زبانهای SSG است.

اگر در برنامه بروید ، به احتمال زیاد هوگو گزینه مورد نظر شماست.

با توجه به مواردی مانند مستندات عالی ، جامعه قدرتمند و پشتیبانی ، همه تولید کنندگان سایت استاتیک که من ذکر کردم ، در بین محبوب ترین ها قرار دارند

 

آیا از یک مولد سایت استاتیک برای یک پروژه استفاده کرده اید؟

کدام یک؟

تجربه خود را دوست داشتید؟

در پایین برای ما کامنت بگذارید تا از دیگاه های شما بقیه ی افراد نیز استفاده کنند.

image_pdfدانلود فایل PDFimage_printپرینت از مطلب

0 Reviews

Write a Review