إنشاء موقع تجريبي

إنشاء موقع لعرض الأعمال باستخدام NextJS

June 22, 2024

nextjs

كيفية إنشاء ونشر ملف أعمال فنان المؤثرات البصرية (بدون تكلفة)

سيساعدك هذا الدليل على إنشاء موقع ويب احترافي لعرض أعمالك باستخدام Next.js، وتصميمه باستخدام Tailwind CSS، ونشره على منصة Vercel. لا تقلق إن لم تكن لديك خبرة تقنية، فقط اتبع هذه الخطوات!

الخطوة 1: إعداد بيئة التطوير الخاصة بك

قم بتثبيت Node.js:
- انتقل إلىnodejs.orgقم بتنزيل إصدار LTS وتثبيته. يتيح لك Node.js تشغيل الأوامر اللازمة على جهاز الكمبيوتر الخاص بك.
قم بتثبيت برنامج Visual Studio Code (VS Code):
- قم بالتنزيل والتثبيتفيجوال ستوديو كود، محرر أكواد يسهل تعديل موقعك الإلكتروني.

الخطوة الثانية: إنشاء مشروع Next.js جديد

افتح برنامج VS Code:
- افتح برنامج VS Code ثم افتح نافذة طرفية جديدة بالانتقال إلىعرض > الميكانيكا.
ابدأ مشروعًا جديدًا:
- في الطرفية، اكتب:
  npx create-next-app@latest my-portfolio --typescript --tailwind
- اتبع التعليمات:
- - سمِّ مشروعك:محفظتي.
  - اختر "نعم" لـ TypeScript و "نعم" لـ Tailwind CSS.
- سيؤدي هذا إلى إنشاء مشروع Next.js جديد باستخدام TypeScript و Tailwind CSS.
انتقل إلى مشروعك:
- في الطرفية، اكتب:
  قرص مضغوط لمحفظتي

الخطوة الثالثة: تشغيل موقعك الإلكتروني محلياً

ابدأ تشغيل خادم التطوير:
- في الطرفية، اكتب:
  npm run dev
- افتح متصفح الويب الخاص بك وانتقل إلىhttp://localhost:3000لرؤية موقعك.

الخطوة الرابعة: إنشاء صفحة رئيسية أساسية مصممة باستخدام Tailwind-CSS

افتح ملف الصفحة الرئيسية:
- في برنامج VS Code، ابحث عن الملف وافتحه.app/page.tsx.
أضف محتواك:
- استبدل المحتوى الحالي بالبنية الأساسية التالية:

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>My VFX Portfolio</title>
        <meta name="description" content="Showcasing my VFX work" />
      </Head>
      <main className="min-h-screen bg-gray-900 text-white flex flex-col justify-center items-center">
        <h1 className="text-5xl font-bold mb-4">Welcome to My VFX Portfolio</h1>
        <p className="text-xl mb-8">Showcasing my best work in visual effects.</p>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <img src="/images/work1.jpg" alt="Work 1" className="rounded shadow-lg" />
          <img src="/images/work2.jpg" alt="Work 2" className="rounded shadow-lg" />
        </div>
      </main>
    </>
  );
}

الخطوة 5: انشر موقعك الإلكتروني على فيرسل

أنشئ حساب فيرسل:
- انتقل إلىvercel.comوقم بالتسجيل للحصول على حساب مجاني.
انشر مشروعك:
- قم بربط حسابك على GitHub بـ Vercel إذا لم تكن قد فعلت ذلك بالفعل.
- انقر على زر "مشروع جديد" واستورد مشروعكمحفظتيمستودع.
- اتبع التعليمات، وسيقوم Vercel تلقائيًا بإنشاء موقعك ونشره.
الوصول إلى موقعك المباشر:
- بمجرد التثبيت، ستزودك Vercel بعنوان URL (على سبيل المثال،https://my-portfolio.vercel.appيمكنك مشاركة هذا الرابط مع العملاء أو أصحاب العمل المحتملين.

اللمسات الأخيرة

تحسين محركات البحث: ال رأسالمكون فيصفحة.tsxهنا يمكنك إضافة العلامات الوصفية والأوصاف والكلمات الرئيسية لتحسين محركات البحث لموقعك.
التخصيصتسهّل مكتبة Tailwind CSS تعديل التصميم. على سبيل المثال، يمكنك تغيير الألوان والخطوط والتخطيطات عن طريق تعديل فئات Tailwind.
استمر في التحديثقم بتحديث ملف أعمالك بانتظام عن طريق إضافة أعمال جديدة وتحسين التصميم.

موقعك الإلكتروني لعرض أعمالك أصبح جاهزًا الآن! باتباع هذه الخطوات، أنشأتَ موقعًا بسيطًا وأنيقًا لعرض أعمالك في مجال المؤثرات البصرية. نتمنى لك عرضًا موفقًا!

CompStart