إنشاء وتشغيل مشروع VitePress

ما هو VitePress؟

VitePress هو مولد مواقع ثابتة يعتمد على Vite، مصمم لكتابة الوثائق. يقوده Vue مع سرعة بناء وتجربة تطوير فائقة. يقدم VitePress واجهة برمجية بسيطة وقوية، مما يجعل إنشاء وصيانة الوثائق أمرًا سهلًا للغاية.

الميزات والفوائد الرئيسية لـ VitePress

• تجربة تطوير سريعة: يستخدم VitePress أداة البناء Vite مما يوفر تحديثات ساخنة وسرعة بناء فائقة.
• إعداد بسيط: من خلال ملفات إعداد بسيطة، يمكن للمستخدمين بسرعة إعداد وتخصيص مواقع وثائقهم.
• توسيع قوي لـ Markdown: يدعم مكونات Vue وإضافات Markdown المخصصة، مما يجعل كتابة الوثائق أكثر مرونة وقوة.
• تحسين السيو المدمج: يولد خريطة موقع تلقائيًا وهيكل HTML محسن، مما يحسن من صداقة محركات البحث.
• حجم حزمة صغير جدًا: باستخدام تقنية Tree-shaking، تكون الملفات الثابتة الناتجة صغيرة جدًا وسرعة التحميل فائقة.

استخدام VitePress يمكن أن يساعد المطورين على إنشاء مواقع وثائق عالية الأداء بسرعة.

استخدام ServBay لإنشاء وتشغيل مشروع VitePress

في هذه المقالة، سنستخدم بيئة Node.js المقدمة من ServBay لإنشاء وتشغيل مشروع VitePress. سنستخدم خاصية 'Host' من ServBay لإعداد خادم ويب، وتنفيذ الوصول إلى المشروع من خلال الوكيل العكسي وخدمة الملفات الثابتة.

إنشاء مشروع VitePress

1. تهيئة المشروع

   أولًا، تأكد من أنك قد قمت بتثبيت بيئة Node.js المقدمة من ServBay. ثم، استخدم الأوامر التالية لتهيئة مشروع VitePress جديد:

   cd /Applications/ServBay/www
   mkdir servbay-vitepress-app
   cd servbay-vitepress-app
   npm add -D vitepress
   npx vitepress init

   اتبع التعليمات وأدخل معلومات المشروع واختر الخيارات الأخرى حسب الحاجة:

    ┌  Welcome to VitePress!
    │
    ◇  Where should VitePress initialize the config?
    │  ./docs
    │
    ◇  Site title:
    │  ServBay VitePress Demo
    │
    ◇  Site description:
    │  A ServBay VitePress Demo Site
    │
    ◇  Theme:
    │  Default Theme
    │
    ◇  Use TypeScript for config and theme files?
    │  Yes
    │
    ◇  Add VitePress npm scripts to package.json?
    │  Yes
    │
    └  Done! Now run npm run docs:dev and start writing.

تعديل محتوى مشروع VitePress

1. تعديل ملف docs/index.md

   افتح ملف docs/index.md وقم بتعديل المحتوى ليخرج "Hello ServBay!"

   # Hello ServBay!
   
   مرحبًا باستخدام ServBay لتشغيل موقع وثائق VitePress.

الدخول في وضع التطوير

1. تشغيل خادم التطوير

   ابدأ خادم التطوير وحدد المنفذ (على سبيل المثال: 8585):

   npm run docs:dev -- --port 8585

   سيقوم هذا بتشغيل خادم تطوير محلي وعرض المنفذ 8585.

2. إعداد وكيل عكسي لـ ServBay Host

   استخدم خاصية 'Host' من ServBay للوصول إلى خادم التطوير عبر الوكيل العكسي. في إعدادات 'Host' من ServBay، أضف وكيل عكسي جديد:

   • الاسم: My first VitePress dev site
   • النطاق: servbay-vitepress-test.dev
   • نوع المضيف: وكيل عكسي
   • IP: 127.0.0.1
   • المنفذ: 8585

   لمزيد من التفاصيل، راجع إضافة مواقع Nodejs التطويرية.

3. الوصول إلى وضع التطوير

   افتح المتصفح وقم بزيارة https://servbay-vitepress-test.dev لرؤية المشروع في الوقت الفعلي. بفضل دعم ServBay للنطاقات المخصصة وشهادات SSL المجانية، ستحصل على مستوى أمان أعلى.

بناء النسخة الإنتاجية

1. بناء النسخة الإنتاجية

   بعد اكتمال التطوير، استخدم الأمر التالي لبناء النسخة الإنتاجية:

   npm run docs:build

   بعد اكتمال البناء، ستجد الملفات الثابتة المنتجة في مجلد docs/.vitepress/dist.

2. إعداد خدمة الملفات الثابتة

   استخدم خاصية 'Host' من ServBay للوصول إلى النسخة الإنتاجية عبر خدمة الملفات الثابتة. في إعدادات 'Host' من ServBay، أضف موقعًا ثابتًا جديدًا:

   • الاسم: My first VitePress production site
   • النطاق: servbay-vitepress-test.prod
   • نوع المضيف: ثابت
   • جذر الموقع: /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

3. الوصول إلى وضع الإنتاج

   افتح المتصفح وقم بزيارة https://servbay-vitepress-test.prod لرؤية النسخة الإنتاجية. بفضل دعم ServBay للنطاقات المخصصة وشهادات SSL المجانية، سيكون موقعك أكثر أمانًا وثقة.

تشغيل في وضع URL نظيف

إذا كان VitePress الخاص بك يعمل في وضع URL نظيف (أي cleanUrls: true)، يرجى القيام بالإعدادات التالية في 'Host' من ServBay

• الاسم: My first VitePress production site
• النطاق: servbay-vitepress-test.prod
• إعدادات مخصصة: قم بالتفعيل
• إعدادات Caddy:

encode zstd gzip
import set-log servbay-vitepress-test.prod

tls internal

try_files {path} {path}/ {path}.html

root * /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

file_server

بعد الحفظ، يمكنك الوصول إلى VitePress بدون .html. على سبيل المثال https://servbay-vitepress-test.prod/path

بفضل الخطوات أعلاه، قمت بإنشاء وتشغيل مشروع VitePress، واستخدمت ميزات ServBay لإدارة والوصول إلى مشروعك.