كيفية إنشاء موقع مجاني مع اسم المجال المخصص والاستضافة وتشفير SSL؟

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

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

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

سواء كنت تقوم بتسجيل اسم مجال أو استضافة محتويات موقع الويب الخاص بك أو بناء موقع الويب أو تمكين تشفير SSL ، يجب أن تكون جاهزًا لتفريغ جيوبك. ومما يزيد الألم أن بعض هذه النفقات متكررة وتستمر إلى الأبد.

ماذا لو أخبرتك أنه يمكنك إنشاء موقع ويب مجاني أثناء القيام بكل الخطوات الحاسمة المذكورة أعلاه في بناء موقع الويب مجانًا أيضًا؟ وبقدر ما قد يبدو الأمر غريبًا ، يمكنك القيام بكل هذا مجانًا إذا كنت طالبًا.

إذا كنت على دراية بـ GitHub ، فقد تكون على دراية بصفحات GitHub. إنه مجاني لاستخدام الخدمة التي تأتي مع كل حساب على GitHub. تتيح صفحات GitHub لكل مستخدم إنشاء موقع ويب مجاني واستضافته ، ولكن هناك تحذير كبير. تنتهي أسماء النطاقات الخاصة بهذه المواقع المجانية بشكل أساسي بـ github.io ، مما يفسد احترافية موقع الويب الخاص بك.

ما هي حزمة GitHub Student Developer Pack؟

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

يوفر GitHub فرصة للاستفادة من مجموعة رائعة مليئة بالأدوات اليدوية عبر الإنترنت لكل طالب مسجل في دورة شهادة أو دبلوم ، تُعرف باسم GitHub Student Developer Pack. تتضمن الحزمة اشتراكات احترافية وخصومات مذهلة على الأدوات الشائعة مثل Canva و Namecheap و Microsoft Azure و Discord و Name.com و StreamYard ، من بين عدد كبير من الأدوات الأخرى.

في هذه المقالة ، سنستخدم Namecheap لتسجيل مجال مخصص مجاني واستخدام صفحات GitHub لاستضافة موقعنا على الويب. سننظر بعد ذلك في طرق تصميم وتحميل ملفات HTML و CSS وجافا سكريبت إلى صفحات GitHub. في النهاية ، سنعمل أيضًا على تمكين تشفير SSL للموقع ، ولكن أولاً وقبل كل شيء ، نحتاج إلى التسجيل في حزمة Student Developer Pack.

كيف تتقدم بطلب للحصول على GitHub Student Developer Pack؟

تنحصر عملية التسجيل في حزمة Student Developer Pack في الحصول على عنوان بريد إلكتروني للطالب ممنوح من الجامعة. ينتهي عنوان البريد الإلكتروني للطالب عادةً باسم مجال جامعتك ، على سبيل المثال ، [email protected] هناك طرق أخرى للتسجيل في الحزمة ، لكنها تتطلب أوقات مراجعة أكبر بكثير من استخدام البريد الإلكتروني للطالب. إذا كان لديك عنوان البريد الإلكتروني الخاص بالطالب جاهزًا ، فإليك كيفية التسجيل للحصول على الحزمة:

الخطوة 1: انتقل إلى GitHub education وانقر على خيار تسجيل الدخول.

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

انقر فوق خيار إنشاء حساب في نافذة تسجيل الدخول.

الخطوة 2: بعد ذلك ، قم بالتسجيل باستخدام البريد الإلكتروني الخاص بالطالب وإنشاء حساب.

الخطوة 3: عندما يُطلب منك "ما أفضل وصف لحالتك الأكاديمية؟" ، تأكد من تحديد الطالب.

الخطوة 4: الآن املأ المربعات الضرورية بالتفاصيل المتعلقة باسم مدرستك والغرض من استخدام GitHub.

الخطوة 5 : أخيرًا ، أرسل طلبك باستخدام خيار "إرسال معلوماتك".

يجب أن تتلقى رسالة تأكيد بالبريد الإلكتروني بخصوص حزمة المطور إذا تمت الموافقة على طلبك من قبل GitHub. تستغرق العملية عادةً بضعة أيام ، ولكن يمكن أن يختلف الوقت بشكل كبير خلال أوقات الذروة.

كيف تتقدم بطلب للحصول على GitHub Student Developer Pack بدون بريد إلكتروني للطالب؟

يمنحك GitHub أيضًا خيار التقدم بطلب للحصول على الحزمة باستخدام بطاقة هوية طالب صالحة أو أي دليل آخر على حالتك الأكاديمية. التحذيرات الوحيدة هي وقت الانتظار الطويل ونسبة الرفض الأعلى. على أي حال ، إليك كيفية التقدم بطلب للحصول على حزمة الطالب من خلال هذه الطريقة:

الخطوة 1: اتبع الخطوات المذكورة أعلاه لإنشاء حساب عبر بريدك الإلكتروني الشخصي.

الخطوة 2: الآن قم بتحميل إثبات حالتك الأكاديمية باستخدام خيار الكاميرا أو قم بتحميل الصور مباشرة إلى GitHub باستخدام زر التحميل.

الخطوة 3: بعد ذلك ، املأ جميع التفاصيل الضرورية مثل اسم المدرسة والغرض من استخدام GitHub.

الخطوة 4: أرسل طلبك.

كيف تسجل المجال المخصص الخاص بك باستخدام Namecheap؟

أفترض أن لديك حساب GitHub Education قيد التشغيل. تتضمن الخطوات التالية استخدام Namecheap لتسجيل مجالك المخصص المجاني واستضافته من خلال صفحات GitHub. اتبع هذه الخطوات لتسجيل اسم المجال المفضل لديك:

الخطوة 1: قم بتسجيل الدخول إلى حساب GitHub Education وانتقل إلى قسم المزايا.

من المفترض أن ترى Web Dev Kit ومجموعة أدوات أحداث افتراضية.

الخطوة 2: انتقل إلى Virtual Event Kit وانتقل لأسفل للعثور على Namecheap.

يقدم GitHub تسجيل اسم مجال لمدة عام على .me TLD ، والذي يمكنك الوصول إليه بالنقر فوق خيار الحصول على وصول.

الخطوة 3: ستطلب منك النافذة التالية تفويض طلب الاتصال من Namecheap إلى حسابك على GitHub. قم بتفويض Namecheap وانتقل إلى الخطوة التالية.

يجب أن ترى رسالة فورية تقول ، "لقد تحققنا بنجاح من حزمة الطالب الخاصة بك مع GitHub" بعد الحصول على تفويض ناجح.

الخطوة 4: ابحث عن المجال المفضل لديك من خلال شريط البحث وانقر فوق "بحث".

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

الخطوة 5: قم بتسجيل الخروج باستخدام عنوان البريد الإلكتروني لـ GitHub Education وحدد صفحات GitHub كطريقة الاستضافة الخاصة بك أثناء المتابعة.

بعد تسجيل اسم المجال المخصص بنجاح واختيار صفحات GitHub لاستضافتك ، يجب على Namecheap تلقائيًا إنشاء مستودع في حساب GitHub الخاص بك. هذا المستودع فارغ تمامًا ويحتوي فقط على ملف README.md.

يمكنك الوصول إلى هذا المستودع عن طريق تسجيل الدخول إلى حساب GitHub الخاص بك والنقر فوق قسم "مستودعاتك". لا تقدم صفحات GitHub أدوات مرئية وموضوعات مسبقة الصنع لموقع الويب الخاص بك ؛ تحتاج إلى ترميز موقع الويب بالكامل يدويًا وتحميل الملفات ذات الصلة إلى مستودع GitHub الذي تم إنشاؤه حديثًا.

كيفية إنشاء موقع مجاني واستضافته على صفحات جيثب؟

كما ذكرنا أعلاه ، سيتعين عليك إنشاء جميع ملفات HTML و CSS وجافا سكريبت المتعلقة بموقعك على الويب. إذا كنت تستخدم Web Dev وتعرف كيفية الترميز في طريقك ، فأنت جيد لتحميل ملفاتك في مستودع GitHub وتشغيل موقع الويب الخاص بك. يمكنك التمرير إلى قسم هذه المقالة الذي يتعامل مع تحميل رمز موقع الويب إلى صفحات GitHub.

ولكن إذا كنت شخصًا ليس لديه معلومات قليلة أو معدومة عن Web Dev ، فقد قمنا بتغطيتك. يمكنك استخدام الخطوات الواردة أدناه وتصميم موقع الويب الخاص بك باستخدام بعض HTML الأساسي:

الخطوة 1: انتقل إلى HTML5 UP وانتقل إلى تصميم موقع الويب الذي يعجبك. يمكنك اختيار أي موضوع آخر تم إنشاؤه مسبقًا من أي نظام أساسي. لقد اخترت هنا "Massively" من HTML5 UP ، لكن لك مطلق الحرية في تنزيل وتخصيص أي تصميم موقع من اختيارك.

الخطوة 2: قم باستخراج الملف المضغوط الذي تم تنزيله لتصميم موقع الويب المفضل لديك.

يجب أن تشاهد الملفات المسماة index.html و generic.html والمجلدات مثل الأصول والصور في المجلد المستخرج.

الخطوة 3: افتح الآن الملفات المستخرجة باستخدام Visual Studio Code وحدد ملف index.html.

الخطوة 4: قم بتنزيل وتثبيت امتداد "Live Server" في Visual Studio Code إذا لم يكن لديك بالفعل.

الخطوة 5: حدد ملف index.html ، وانقر فوق زر الماوس الأيمن ، وحدد الخيار "فتح في Live Server". يتيح لك هذا الخيار تصور التغييرات في ملف HTML الخاص بك في متصفحك في الوقت الفعلي.

كيف تخصص تصميم موقع الويب الخاص بك؟

لن أصف العملية بعد هذه النقطة بأنها "خطوات" لتخصيص موقع الويب الخاص بك. يعد تخصيص ملفات HTML أمرًا متروكًا تمامًا لتفضيلاتك ، ولكن إليك كيفية تخصيص التصميم "الهائل" من HTML5 UP وتحويله إلى مجموعة. يمكنك اختيار الاستلهام من هذا أو تخصيص موقع الويب الخاص بك بالكامل بنفسك. الخيار لك!

تعديل علامات العنوان والفقرة

في بداية عملية التخصيص الخاصة بي ، قمت بتغيير علامة العنوان "Massively". ستحدد علامة العنوان الخاصة بملف HTML اسمها أثناء فتحها في علامة تبويب المتصفح. يجب أن يكون العنوان الافتراضي لـ Massively "Massively بواسطة HTML5 UP" ، وأوصي بتغييره إلى شيء يشبه موقع الويب الخاص بك.

لقد غيرت علامة العنوان إلى "Samyak Goswami | Tech Content Writer "لأنه يناسب بشكل مثالي ملفي. بعد ذلك ، قمت بتغيير قسم المقدمة في الموقع ، والذي قال: "هذا ضخم" (الوارد في علامة H1) وجعلته "محفظة Samyak" لأسباب واضحة. بعد ذلك ، قمت بتغيير النص أدناه في علامات الفقرة إلى "عرض لمشاريعي وقدراتي."

بالانتقال إلى قسم التنقل (Nav) في ملف الفهرس ، حذفت اثنين من أزرار التنقل الثلاثة الموجودة في علامة القائمة. كنت أرغب في إنشاء موقع ويب من صفحة واحدة يحتوي على جميع التفاصيل في صفحة واحدة ، لكن لك مطلق الحرية في تعديل عدد أزرار التنقل وفقًا لاختيارك.

لقد قمت لاحقًا بتغيير نص "This is Massively" الموجود على زر التنقل إلى "My Articles".

تعديل روابط وأيقونات مواقع التواصل الاجتماعي

يجب أن تشاهد أيضًا أيقونات الوسائط الاجتماعية المختلفة على الخادم المباشر مثل Twitter و Facebook و Instagram و GitHub. قررت حذف Twitter و Facebook والاحتفاظ بـ Instagram و LinkedIn لحالة الاستخدام الخاصة بي.

يمكنك تعديل أيقونات الوسائط الاجتماعية وروابطها من خلال الانتقال إلى قسم التنقل (Nav) والتمرير إلى قائمة العلامات باستخدام Twitter و Instagram والمزيد مكتوبًا بداخلها.

لاحظ عدم وجود روابط مرفقة بأيقونات الوسائط الاجتماعية هذه حيث تُترك علامة href فارغة. يمكنك إضافة روابط إلى وسم href باستبدال "#" بالرابط المفضل لديك.

تعديل محتويات الصفحة الرئيسية

أولاً ، قمت بتغيير علامة H2 وجعلتها "اسمي Samyak Goswami" ثم بعد ذلك غيرت علامة Paragraph إلى "أنا متحمس للتكنولوجيا ...". أود أن أقترح عليك تغيير علامة H2 بشيء يطابق محتويات صفحتك الرئيسية وعلامة الفقرة التي تشرحها.

نحن الآن نتوصل إلى الجزء الأكثر أهمية في هذا التخصيص ؛ تعديل محتويات مربعات المادة.

للقيام بذلك ، انتقل إلى قسم المنشورات في ملف الفهرس ، وسترى العديد من مقتطفات التعليمات البرمجية المضمنة في علامات المقالات. يمكنك إضافة روابط إلى قصصك عن طريق تعديل قسم href كما فعلنا أثناء إضافة روابط إلى أيقونات الوسائط الاجتماعية.

يمكنك لاحقًا تغيير اسم المقالات عن طريق تعديل المحتويات داخل علامات H2. يمكنك أيضًا إضافة وصف لمقالاتك باستخدام علامة الفقرة.

كرر العملية لكل مقال عن طريق إضافة روابط وتغيير الأسماء وإضافة وصف لجميع مقالاتك.

إضافة الصور إلى مواقع الويب الخاصة بك

يجب أن تكون قد لاحظت أن المعاينة تبدو مختلفة جدًا عن الصور الموجودة على موقع HTML5 UP. هذا بسبب الصور الطائرة واللطيفة في الملف القابل للتخصيص. دعونا نجعل موقعنا على الإنترنت من خلال إضافة صور مخصصة إليه.

للقيام بذلك ، انتقل إلى المجلد حيث سبق لك استخراج ملف مضغوط "Massively". افتح المجلد المستخرج وانتقل إلى مجلد الصور. يجب أن تشاهد صورًا مختلفة باسم bg و pic01 و pic02 وما إلى ذلك. هذه هي الصور المرتبطة بمقالاتنا في علامة المقالة.

يمكنك إما إضافة صور مخصصة وتعديل ملف الفهرس بأسماء هذه الصور أو إضافة الصور وتسميتها على غرار الصور الافتراضية. إن إعطائنا أسماء متطابقة للصور يوفر علينا الكثير من الوقت لاحقًا.

أقترح عليك تصحيح وتعديل أقسام أخرى غير مهمة في موقع الويب الخاص بك. هذه هي المحفظة التي قمت بإنشائها باستخدام الخطوات التي ذكرتها أعلاه: samyakgoswami.me.

كيف تقوم بتحميل كود موقع الويب الخاص بك إلى صفحات جيثب؟

بعد ترميز موقع الويب الخاص بك وتصميمه أخيرًا ، حان الوقت لتحميله على صفحات GitHub ونشره على الإنترنت.

إليك كيفية تحميل موقع الويب الخاص بك على صفحات GitHub:

الخطوة 1: قم بتسجيل الدخول إلى حساب GitHub الخاص بك وانتقل إلى قسم مستودعاتي.

الخطوة 2: يجب أن ترى مستودعًا باسم your_username.github.io. اذهب إلى هذا المستودع.

الخطوة 3: يجب أن ترى خيارًا لإنشاء ملفك الخاص أو تحميل الملفات إلى مستودع GitHub.

الخطوة 4: حدد جميع الملفات والمجلدات الخمسة ؛ الأصول والصور والعناصر والعامة والفهرس واسحبها وإفلاتها في المستودع.

بعد تحميل الملفات ، قم بتنفيذ الكود وانتظر حتى يعالج GitHub ملفاتك.

الخطوة 5: انتقل إلى الإعدادات> صفحات GitHub لمعرفة حالة موقع الويب الخاص بك. يجب أن ترى المطالبة "تم نشر موقع الويب الخاص بك على your_custom_domain."

يمكنك الآن الانتقال إلى عنوان الويب الخاص بك والتحقق من الموقع بنفسك. تذكر أن موقع الويب قد يستغرق بعض الوقت قبل بدء البث المباشر.

كيفية تمكين تشفير SSL في صفحات جيثب؟

HTTP طريقة غير آمنة لإدارة طلبات المستخدم على موقع الويب الخاص بك. يمكن لأي شخص لديه نية ضارة ومعرفة تقنية سليمة أن يعترض التفاعلات بين المستخدم وموقع الويب الخاص بك. من ناحية أخرى ، يوفر HTTPS لجميع زوار موقعك جلسة تصفح أكثر أمانًا. تقدم صفحات GitHub تشفير HTTPS مجانًا ، وإليك كيفية الاستفادة منه:

قم بالتمرير إلى قسم الصفحات في المستودع.

يجب أن ترى خيار "Enforce HTTPS" في نهاية النافذة. يجب أن يبدأ تشغيل تشفير SSL بمجرد تحديد مربع الاختيار Enforce HTTPS.

في حالة العثور على خيار Enforce HTTPS غير متاح لنطاقك ، يمكنك تمكين تشفير SSL باستخدام الخطوات أدناه:

الخطوة 1 : قم بتسجيل الدخول إلى حساب Namecheap الخاص بك وانتقل إلى قسم "قائمة المجال".

الخطوة 2: انتقل الآن إلى إدارة المجال ثم انتقل بعد ذلك إلى قسم "DNS المتقدم".

يجب أن تشاهد بعض سجلات CNAME و A.

أضف سجلات A التالية مع المضيف كـ "@" وعنوان IP كـ "185.199.108.153". التالي مع اسم المضيف "@" وعنوان IP كـ "185.199.109.153".

اتبع الاتجاه حتى يكون لديك 4 سجلات A تصل إلى عنوان IP "185.199.111.153".

قم بإزالة كافة سجلات A السابقة.

الخطوة 3: بعد ذلك ، أضف سجل CNAME مع المضيف كـ “www” والقيمة كاسم مستخدم GitHub (نقطة) github (نقطة) io.

قم بإزالة سجلات CNAME السابقة. في النهاية ، يجب أن تحتوي إعدادات DNS الخاصة بك على 4 سجلات A وسجل 1 CNAME.

الخطوة 4: انتقل الآن إلى صفحات GitHub في قسم الإعدادات. يجب أن يكون خيار فرض HTTPS متاحًا الآن لنطاقك.

تلخيص لما سبق

يوفر GitHub فرصة رائعة لكل طالب لإنشاء موقع ويب مجاني وإدارته. على الرغم من أنه لا يمكنك استخدام صفحات GitHub لاستضافة أحمال مرور ضخمة ، إلا أنها تحدد كل خانة اختيار لموقع ويب ثابت صغير الحجم. اسم المجال المخصص المجاني والاستضافة وتشفير SSL يجعل الحصول عليها أكثر روعة.

يمكنك الآن قراءة "كيفية اختيار مضيف ويب لموقعك الجديد على الويب."

فيما يلي بعض أدوات مراقبة سرعة الصفحة لإعلامك عندما يتعطل موقع الويب الخاص بك.