T10 BLOGS

كيفية إنشاء موقع شخصي باستخدام ChatGPT واستضافته على GitHub Pages

Amine
02/09/2024
AI Tools and Platforms

مقدمة

هل ترغب في إظهار مهاراتك ومشاريعك للعالم؟ إنشاء موقع شخصي هو الخطوة الأولى نحو بناء حضور قوي على الإنترنت. في هذا الدليل الشامل، سنأخذك خطوة بخطوة لإنشاء موقع محفظة احترافي باستخدام HTML و CSS و JavaScript بمساعدة ChatGPT، وسنشرح كيفية نشره بسهولة على GitHub Pages. سواء كنت مطور ويب مبتدئ أو محترف، ستجد هنا كل ما تحتاجه لتبني موقعًا يبرز إبداعاتك ويجذب انتباه أرباب العمل والعملاء.

لماذا تحتاج إلى موقع محفظة شخصي؟

  • يعرض مهاراتك ومشاريعك بشكل منظم واحترافي.
  • يمنحك منصة للتواصل مع أرباب العمل والعملاء المحتملين.
  • يُظهر التزامك وتطويرك المستمر في مجال تطوير الويب.

ابدأ رحلتك اليوم وانضم إلى آلاف المطورين الذين قاموا بإنشاء مواقعهم الشخصية بنجاح!

الجزء 1: إعداد بيئة التطوير

قبل أن نبدأ في كتابة الكود، نحتاج إلى إعداد بيئة تطوير مناسبة لضمان سير العمل بسلاسة وكفاءة. سنستخدم Visual Studio Code كمحرر نصوص قوي ومرن.

الخطوة 1: تثبيت Visual Studio Code

Visual Studio Code هو محرر نصوص مجاني وموثوق يُستخدم على نطاق واسع في تطوير الويب. لتثبيته، اتبع الخطوات التالية:

  • قم بزيارة موقع Visual Studio Code على code.visualstudio.com.
  • اختر نظام التشغيل الخاص بك (Windows أو Mac أو Linux).
  • انقر فوق الزر “Download” واتبع تعليمات التثبيت.
  • بمجرد التثبيت، افتح Visual Studio Code وابدأ في تخصيصه حسب تفضيلاتك.

نصائح:

  • قم بتثبيت الإضافات المفيدة مثل Live Server وPrettier لتحسين تجربة التطوير.
  • استكشف إعدادات Visual Studio Code لتخصيصها بما يتناسب مع احتياجاتك.

الجزء 2: إنشاء هيكل المشروع

بعد إعداد بيئة التطوير، نحتاج إلى إنشاء هيكل مشروعنا. تنظيم الملفات والمجلدات بشكل منظم يسهل عملية التطوير والصيانة لاحقًا.

الخطوة 1: إنشاء المجلدات والملفات

افتح Visual Studio Code، ثم اتبع الخطوات التالية لإنشاء هيكل المشروع:

  • افتح Visual Studio Code وانقر على “Open Folder”.
  • أنشئ مجلدًا جديدًا باسم portfolio.
  • داخل مجلد portfolio، أنشئ المجلدات التالية:
    • css: لتخزين ملفات CSS.
    • js: لتخزين ملفات JavaScript.
    • images: لتخزين الصور المستخدمة في الموقع.
  • أنشئ ملفًا جديدًا داخل مجلد portfolio باسم index.html.
  • أنشئ ملفًا جديدًا داخل مجلد css باسم styles.css.
  • أنشئ ملفًا جديدًا داخل مجلد js باسم script.js.

باتباع هذه الخطوات، ستكون قد أنشأت هيكلًا أساسيًا لمشروعك الشخصي، مما يسهل عليك تنظيم وتطوير موقعك بشكل فعال.

الجزء 3: كتابة الكود باستخدام ChatGPT

الآن بعد أن أنشأنا هيكل المشروع، سنستخدم ChatGPT لمساعدتنا في كتابة الكود الأساسي لموقعنا. سنبدأ بإنشاء كود HTML ثم ننتقل إلى CSS وJavaScript.

الخطوة 1: كتابة HTML باستخدام ChatGPT

استخدم المحادثة التالية في ChatGPT للحصول على كود HTML الأساسي لموقع المحفظة:

المطالبة: “اكتب لي كود HTML لصفحة محفظة شخصية تحتوي على أقسام للرأس، وملف تعريفي شخصي، والمشاريع، والتواصل مع تصميم بسيط.”

انسخ الكود المولد من ChatGPT وضعه في ملف index.html. إليك مثال للكود:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>محفظتي الشخصية</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <!-- قسم الرأس -->
    <header>
        <h1>مرحبًا بك في محفظتي الشخصية</h1>
        <nav>
            <ul>
                <li><a href="#about">حول</a></li>
                <li><a href="#projects">المشاريع</a></li>
                <li><a href="#contact">تواصل</a></li>
            </ul>
        </nav>
    </header>
    <!-- قسم حولي -->
    <section id="about">
        <h2>حولني</h2>
        <p>مرحبًا! أنا مطور ويب شغوف بإنشاء مواقع جميلة وعملية. يمكنك هنا معرفة المزيد عني ورؤية بعض أعمالي الأخيرة.</p>
    </section>
    <!-- قسم المشاريع -->
    <section id="projects">
        <h2>مشاريعي</h2>
        <div class="project">
            <h3>مشروع 1</h3>
            <p>وصف لمشروع 1.</p>
        </div>
        <div class="project">
            <h3>مشروع 2</h3>
            <p>وصف لمشروع 2.</p>
        </div>
        <!-- أضف المزيد من المشاريع حسب الحاجة -->
    </section>
    <!-- قسم التواصل -->
    <section id="contact">
        <h2>تواصل معي</h2>
        <form>
            <label for="name">الاسم:</label>
            <input type="text" id="name" name="name" required>
            <label for="email">البريد الإلكتروني:</label>
            <input type="email" id="email" name="email" required>
            <label for="message">الرسالة:</label>
            <textarea id="message" name="message" required></textarea>
            <button type="submit">إرسال</button>
        </form>
    </section>
    <!-- قسم التذييل -->
    <footer>
        <p>© 2024 محفظتي الشخصية. جميع الحقوق محفوظة.</p>
    </footer>
    <script src="js/script.js"></script>
</body>
</html>

الخطوة 2: إضافة الأنماط باستخدام CSS باستخدام ChatGPT

لإضفاء لمسة جمالية على موقعك، نحتاج إلى تصميمه باستخدام CSS. استخدم المحادثة التالية في ChatGPT للحصول على كود CSS مخصص:

المطالبة: “اكتب لي كود CSS لتصميم صفحة المحفظة الشخصية بحيث تكون متجاوبة مع جميع الأجهزة، مع تصميم حديث وجذاب.”

انسخ الكود المولد من ChatGPT وضعه في ملف styles.css. إليك مثال للكود:


body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f9f9f9;
}
header {
    background: #4CAF50;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}
nav ul {
    list-style: none;
    padding: 0;
}
nav ul li {
    display: inline;
    margin-right: 15px;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}
section {
    padding: 40px 20px;
    max-width: 1200px;
    margin: auto;
}
#about {
    background-color: #fff;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 8px;
}
.project {
    background-color: #e2e2e2;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 8px;
}
form {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
}
label {
    display: block;
    margin: 10px 0 5px;
    font-weight: bold;
}
input, textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
button {
    background-color: #4CAF50;
    color: #fff;
    border: none;
    padding: 12px 25px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
}
button:hover {
    background-color: #45a049;
}
footer {
    text-align: center;
    padding: 15px 0;
    background-color: #333;
    color: #fff;
    position: relative;
    bottom: 0;
    width: 100%;
}
@media (max-width: 768px) {
    nav ul li {
        display: block;
        margin: 10px 0;
    }
}

الخطوة 3: إضافة التفاعلية باستخدام JavaScript باستخدام ChatGPT

لإضافة بعض التفاعلية إلى موقعك، مثل عرض رسالة تأكيد عند إرسال نموذج التواصل، سنستخدم JavaScript. استخدم المحادثة التالية في ChatGPT للحصول على كود JavaScript المطلوب:

المطالبة: “اكتب لي كود JavaScript لإضافة تفاعلية إلى نموذج الاتصال في صفحة المحفظة الشخصية، بحيث يتم عرض رسالة منبثقة عند إرسال النموذج.”

انسخ الكود المولد من ChatGPT وضعه في ملف script.js. إليك مثال للكود:


document.addEventListener("DOMContentLoaded", function() {
    const form = document.querySelector("form");
    
    form.addEventListener("submit", function(event) {
        event.preventDefault();
        alert("شكرًا لك على رسالتك! سنتواصل معك قريبًا.");
        form.reset();
    });
});

الجزء 4: عرض النتائج وتحسين الموقع باستخدام ChatGPT

بعد كتابة الكود الأساسي باستخدام ChatGPT، حان الوقت لاختبار الموقع وتحسينه لضمان تجربة مستخدم مميزة.

الخطوة 1: عرض الموقع في المتصفح

افتح ملف index.html في المتصفح الخاص بك (مثل Google Chrome أو Firefox) لرؤية كيف يبدو موقعك. يجب أن ترى صفحة محفظة شخصية معروضة بشكل منظم وجذاب.

لتسهيل التفاعل، يمكنك تشغيل خادم محلي باستخدام إضافة Live Server في Visual Studio Code:

# تثبيت Live Server (إذا لم يكن مثبتًا)
    # افتح Visual Studio Code وانتقل إلى Extensions وابحث عن "Live Server" ثم قم بتثبيته.
    # بعد التثبيت، افتح ملف index.html وانقر بزر الماوس الأيمن واختر "Open with Live Server"

بمجرد تشغيل Live Server، ستتمكن من رؤية التغييرات في الوقت الفعلي عند تحرير الكود.

كيفية إنشاء موقع شخصي باستخدام ChatGPT واستضافته على GitHub Pages
كيفية إنشاء موقع شخصي باستخدام ChatGPT واستضافته على GitHub Pages

الخطوة 2: تحسين الموقع وتصحيح الأخطاء باستخدام ChatGPT

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

  • “كيف يمكنني تحسين تصميم الموقع ليبدو أكثر احترافية؟”
  • “أريد إضافة تأثيرات تفاعلية إلى عناصر القائمة. كيف يمكنني القيام بذلك باستخدام JavaScript؟”
  • “كيف أجعل الموقع يستجيب بشكل أفضل على الأجهزة المحمولة؟”

بعد الحصول على التوجيهات من ChatGPT، قم بتحديث الكود الخاص بك في index.html أو styles.css أو script.js، ثم عاود عرض الموقع في المتصفح.

الخطوة 3: إعادة عرض النتائج وتحسينها

كرر العملية السابقة من استخدام ChatGPT لتحسين الموقع وعرض النتائج في المتصفح. يمكنك الاستمرار في هذه العملية حتى تصل إلى الشكل النهائي للموقع الذي ترغب به.

بعد القيام بهذه العملية لعدة مرات على الكود تحصلنا على النتيجة التالية:

النتيجة النهائية للموقع الشخصي بعد التحسينات باستخدام ChatGPT

يمكنكم تغيير الطلبات للحصول على نتائج مختلفة وتكرار العملية حتى تصلوا للنتيجة المثالية.

الجزء 5: نشر موقعك على GitHub Pages

بعد الانتهاء من تحسين الموقع، حان الوقت لنشره على GitHub Pages لجعله متاحًا للجميع عبر الإنترنت.

الخطوة 1: إنشاء حساب على GitHub

إذا لم يكن لديك حساب GitHub بالفعل، قم بزيارة github.com واتبع التعليمات لإنشاء حساب جديد.

الخطوة 2: إعداد Git في مجلد المشروع

  • افتح Visual Studio Code وافتح “Terminal” جديد.
  • قم بتهيئة Git في مجلد المشروع باستخدام الأمر: git init.
  • أضف جميع الملفات إلى المستودع باستخدام الأمر: git add ..
  • قم بعمل “commit” للملفات: git commit -m "Initial commit".

الخطوة 3: رفع ملفاتك إلى GitHub

  • انتقل إلى حسابك على GitHub وأنشئ مستودعًا جديدًا.
  • أعط المستودع اسمًا (على سبيل المثال، portfolio).
  • اتبع التعليمات لدفع المستودع المحلي إلى GitHub:
    git remote add origin https://github.com/yourusername/portfolio.git
    git branch -M main
    git push -u origin main
  • انتقل إلى “Settings” في المستودع الجديد على GitHub.
  • مرر لأسفل إلى قسم “GitHub Pages” واختر الفرع “main” أو “master”.
  • سيكون موقعك الآن متاحًا على 
    https://yourusername.github.io/portfolio
    .

يمكنك مشاهدة النتائج النهائية للموقع الذي قمنا بإنشائه من خلال هذا الرابط المباشر.

الخاتمة

تهانينا! لقد أنشأت للتو موقعًا شخصيًا باستخدام HTML و CSS و JavaScript بمساعدة ChatGPT ونشرته على GitHub Pages. هذا الموقع هو انعكاس لمهاراتك وإبداعك، ويُظهر احترافيتك في مجال تطوير الويب.

لا تتوقف هنا! استمر في تحسين موقعك بإضافة مشاريع جديدة، تحديث المحتوى، وتحسين التصميم. يمكنك أيضًا تعلم المزيد عن تقنيات جديدة مثل React أو Vue.js لتعزيز تفاعلية موقعك.

يمكنك تنزيل الكود النهائي من مستودع GitHub ومشاركته مع أصدقائك وزملائك.

إذا واجهت أي مشاكل أو كان لديك أي استفسارات، لا تتردد في ترك تعليق أدناه أو التواصل معنا عبر وسائل التواصل الاجتماعي. نحن هنا لمساعدتك في كل خطوة من خطوات تطوير موقعك الشخصي!

#JavaScript #php #تحسين الأداء #تطوير الويب #تعلم البرمجة
شارك المقال:

التعليقات

اترك تعليقاً