جاهز ، جاهز ، ابدأ: إنشاء موقع ثابت باستخدام صفحات GitHub

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

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

ما هي صفحات جيثب؟

GitHub عبارة عن نظام أساسي قائم على الويب لاستضافة مستودعات Git والتعاون في مشاريع البرامج. يوفر أدوات لمشاركة وتتبع تغييرات التعليمات البرمجية وإدارة ومراجعة التعليمات البرمجية والقدرة على فتح ومراجعة طلبات السحب.

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

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

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

ثابت مقابل المواقع الديناميكية

كما رأينا ، توفر صفحات GitHub طريقة لنشر مواقع الويب الثابتة. ولكن ما الفرق بين موقع ويب ثابت وموقع ويب ديناميكي؟

لنبدأ بمناقشة المحتوى على المواقع المذكورة.

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

في المقابل ، المحتوى الديناميكي هو محتوى يتغير بناءً على إجراءات المستخدم - مثل تسجيل الدخول أو التفاعل مع نظام حظر الاشتراك غير المدفوع أو التعليق على منشور - أو عوامل أخرى ، مثل الوقت أو الموقع الحالي.

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

بشكل عام ، يمكننا القول أن موقع الويب ثابتًا إذا كان يحتوي فقط على HTML و CSS وجافا سكريبت على الواجهة الأمامية ، مع عدم وجود تقنيات خادم مثل PHP أو Python تتفاعل مع قاعدة بيانات.

على الرغم من عدم إمكانية إنشاء مواقع ويب ديناميكية باستخدام صفحات GitHub ، إلا أنه يمكنك بسهولة إنشاء مواقع ويب خاصة بك باستخدام CMS مثل WordPress أو مولدات المواقع الثابتة مثل Gatsby أو Hugo.

الميزات الرئيسية لصفحات جيثب

دعنا نرى نقاط قوة صفحات GitHub كخدمة استضافة:

1. سهولة الإعداد والنشر: تجعل صفحات GitHub من السهل البدء ببضع خطوات بسيطة. يمكنك تمكين صفحات GitHub للمستودع الخاص بك وتحديد مصدر ملفات موقع الويب الخاص بك ، وسيقوم GitHub تلقائيًا بنشر موقع الويب الخاص بك وإتاحته على عنوان URL بناءً على اسم المستخدم واسم المستودع.
2. المجالات المخصصة: باستخدام صفحات GitHub ، يمكنك استخدام اسم مجال مخصص لموقع الويب الخاص بك بدلاً من عنوان URL الافتراضي الذي يوفره GitHub. يتيح لك ذلك استخدام علامتك التجارية الخاصة وتسهيل عثور المستخدمين على موقع الويب الخاص بك والوصول إليه.
3. دعم HTTPS: يقدم GitHub Pages دعمًا لـ HTTPS ، والذي يسمح باتصالات آمنة إلى موقع الويب الخاص بك. هذا أمر بالغ الأهمية لبناء ثقة موقعك.
4. دعم Jekyll: يدعم GitHub Pages Jekyll ، وهو مولد موقع ثابت يسمح لك بإنشاء مواقع ويب متطورة باستخدام القوالب والميزات الأخرى. هذا يجعل من السهل إنشاء مواقع ويب ذات مظهر احترافي دون الحاجة إلى كتابة جميع التعليمات البرمجية من البداية.

محددات

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

لا تسمح صفحات GitHub بأن يزيد حجم موقعك عن 1 غيغابايت ، مما يعني أن ملفات المستودع الخاص بك لا يمكن أن تتجاوز هذا المقدار من الذاكرة. في معظم الأحيان ، 1 غيغابايت أكثر من كافية لموقع ثابت ؛ فقط تأكد من ضغط صورك.

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

الإنشاء والنشر باستخدام صفحات GitHub: دليل خطوة بخطوة

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

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

دعنا ندخله!

1. اشترك على جيثب

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

بعد تسجيل الدخول ، يجب أن تكون قادرًا على إنشاء مستودع بعيد.

2. إنشاء مستودع بعيد

المستودع هو دليل حيث تقوم بتخزين جميع التعليمات البرمجية المتعلقة بمشروع معين.

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

هذه الخطوات التالية حاسمة:

1. قم بتعيين اسم المستودع الخاص بك على "yourusername".github.io .
2. تحقق من الزر العام. يجب عليك تعيين المستودع إلى عام لنشر موقعك.
3. أضف الملف التمهيدي.

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

ما لم يكن لديك GitHub Pro ، يمكنك فقط نشر صفحة GitHub إذا كان المستودع عامًا. ضع ذلك في الاعتبار إذا كنت لا تريد مشاركة شفرة مصدر موقعك بشكل عام.

بعد ذلك ، يجب أن يكون لديك شيء مثل ما يلي:

إذا كان لديك بالفعل كود مصدر العمل الخاص بموقعك ، فيمكنك تخطي سير عمل Git المشترك وإفلات الملفات مباشرة في الريبو بدلاً من ذلك.

للقيام بذلك ، انقر فوق قائمة Add file في المستودع الخاص بك ، وحدد الخيار "تحميل الملفات" . ثم حدد ملفات موقع الويب الخاص بك ، باستخدام ملف HTML الرئيسي المسمى index.html . تذكر أن تضع جميع ملفات CSS و JavaScript في المستودع أيضًا.

أخيرًا ، اضغط على زر Commit Changes .

في القسم التالي ، سننشئ موقعًا شخصيًا بسيطًا باستخدام HTML و Bootstrap. ثم سنقوم بتحميله على GitHub وإعداده كصفحة GitHub عامة بنطاق مخصص.

3. بناء موقع شخصي

سنبدأ باستنساخ GitHub repo الذي أنشأناه للتو. للقيام بذلك ، تأكد من تثبيت عميل Git بالفعل على جهاز الكمبيوتر الخاص بك. (إذا لم تقم بذلك ، فقم بإلقاء نظرة على البرنامج التعليمي الخاص بنا على Git و GitHub.)

انتقل إلى علامة code في المستودع الخاص بك وانسخ عنوان URL لـ SSH في خيار SHH .

ثم أطلق محطة أو سطر أوامر. في معظم توزيعات Linux و macOS ، يمكنك استخدام الاختصار Ctrl + Alt + T ، أو البحث في قائمة تطبيقات نظامك عن Terminal . في نظام Windows ، يمكنك استخدام Git BASH المثبت افتراضيًا مع Git أو CMD أو PowerShell أو عميل واجهة المستخدم الرسومية.

على الجهاز الطرفي ، اكتب git clone وعنوان URL الذي نسخته. سيؤدي هذا إلى تنزيل وإنشاء نسخة من المستودع البعيد على جهازك المحلي حتى تتمكن من إنشاء موقع الويب الخاص بك.

ثم أدخل المجلد الجديد المسمى yourusername.github.io مع cd و ls . يجب أن ترى مجلد .git ، الذي يحتوي على التكوين والبيانات الوصفية لمشروعك ، بالإضافة إلى ملف README.md إذا قمت بإنشاء واحد.

افتح محرر النصوص المفضل لديك (مثل Sublime Text) ، ودعنا نبدأ في إنشاء موقع الويب الخاص بك.

في جذر المستودع ، قم بإنشاء ملف باسم index.html (هذا الاسم مطلوب بواسطة GitHub Pages) واكتب بنية كود HTML النموذجية:

 <!DOCTYPE html> <html lang="en"> <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>Kinsta User</title> </head> <body> </body> </html>

كما قلنا سابقًا ، سنستخدم Bootstrap 5.0 ، وهو إطار عمل CSS مفتوح المصدر يساعدنا في بناء مواقع ويب سريعة الاستجابة بسهولة أكبر. كما سترى ، لن نضطر إلى استخدام CSS مخصص لهذا الموقع المحدد.

للحصول على Bootstrap في صفحتنا ، سنحتاج إلى تضمين CSS و JavaScript المترجمين عبر CDN. الصق الكود التالي داخل HTML <head> لتتمكن من استخدام Bootstrap CSS:

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

وبنفس الطريقة ، سنقوم أيضًا بتضمين Devicon CDN حتى نتمكن من استخدام أيقونات SVG للغات وتقنيات البرمجة الشائعة دون الكثير من المتاعب:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">

الآن ، لتضمين JavaScript ، أدخل الكود التالي مباشرة أعلى نهاية علامة </body> :

 <!-- JavaScript: Above --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

سنبدأ الأمور من خلال إنشاء رأس لموقعنا على الويب. سيكون رأسًا داكنًا ، به روابط إلى صفحة الفهرس الخاصة بنا وصفحتين أخريين - "المشاريع" و "سجل القراءة" - والتي يمكنك إنشاؤها لاحقًا:

 <nav class="navbar navbar-dark navbar-expand-lg bg-dark "> <div class="container-fluid"> <div class="mx-4"> <a class="navbar-brand" href="#">Kinsta User</a> </div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Projects</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Reading Log</a> </li> </ul> </div> </div> </nav>

نستخدم غلاف Bootstrap navbar و navbar-expand-lg لإنشاء حاوية سريعة الاستجابة تنهار عندما يكون عرض الشاشة أقل من 992 بكسل. يحدث هذا بسبب خيار الشبكة lg . إذا كنت تريد معرفة المزيد عن خيارات الشبكة ، فقم بإلقاء نظرة على صفحة تخطيط Bootstrap.

الآن ، دعنا ننشئ عمودين متجاوبين داخل حاوية: أحدهما لصورة مجانية من Unsplash والآخر لوصف أنفسنا:

 <div class="container my-4 "> <div class="row justify-content-center"> <div class="col-lg mb-lg-4"> <img src="image.jpg" class="img-fluid" alt=""> </div> <div class="col-lg mx-2 align-self-center"> <div class="my-3"> <h1 class="text-center">I'm a Kinsta User</h1> <p>As a passionate software developer, I am deeply enthusiastic about creating and developing software applications. I am constantly learning and experimenting with new technologies and approaches, and I have a strong desire to create innovative and effective solutions to complex problems. I am driven by my curiosity and love for problem-solving, and I am committed to producing high-quality, well-designed software that meets the needs of users. </p> </div> </div> </div> </div>

كما ترى ، نحن نحصل على صورة من ملف محلي ، لذلك يجب أن تكون في المستودع عندما ندفع تغييراتنا إلى GitHub repo.

أخيرًا ، داخل حاوية Bootstrap الخاصة بنا ، سنستخدم أيقونات SVG من Devicon ، جنبًا إلى جنب مع القليل من CSS الداخلية لإبراز مهاراتنا:

 <!-- Inside the container created above --> <div class="my-4"> <div class="text-center mb-4"> <h1>My Skills</h1> </div> <div class="row "> <style> I { font-size: 4em; } </style> <!-- Skills --> <div class="col"> <div class="text-center"> <h4>WordPress</h4> <i class="devicon-wordpress-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Django</h4> <i class="devicon-django-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Python</h4> <i class="devicon-python-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>GitHub</h4> <i class="devicon-github-original" ></i> </div> </div> </div> </div>

نظرًا لأننا نستخدم علامة <i> HTML ، فيمكننا التعامل معها كخط. لذلك قمنا بتعيين حجم شعاراتنا على 4 em بإعلانها في وسم style .

ها هي النتيجة النهائية لهذا الموقع الشخصي البسيط:

هل تعلم أن أكثر من 50٪ من زيارات موقع الويب تأتي من الأجهزة المحمولة؟ نظرًا لأننا استخدمنا Bootstrap ، فقد وفرنا الكثير من ترميز CSS ، كما حصلنا على موقع ويب سريع الاستجابة ، كما يمكنك تقديره أدناه.

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

يمكنك حتى إرفاق نظام CMS مقطوع الرأس مثل Ghost باستخدام أحد حلول استضافة التطبيقات كاملة الميزات الخاصة بنا. يمكنك الاتصال مباشرة بمستودع GitHub الخاص بك من خلال لوحة معلومات MyKinsta وتشغيل موقعك الجديد في دقائق معدودة.

حان الوقت لدفع ملفاتك. للقيام بذلك ، قم بتشغيل الأوامر التالية على جهازك ، في المستوى الأعلى من مشروعك.

 git add . git commit -m "Added website source code and image" git push

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

4. نشر صفحة مستخدم GitHub

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

سيكون عنوان URL لموقعك مشابهًا لما يلي: https://kinstauser.github.io/

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

5. نشر صفحة GitHub الخاصة بالمستودع

حتى الآن ، قمنا بإنشاء موقع مستخدم ، ولكن ماذا لو أردنا نشر العديد من مواقع GitHub؟ ثم يجب أن نذهب مع موقع المشروع.

كمثال ، سنستخدم موقع تقنية HTML الذي أنشأناه في البرنامج التعليمي Git for Web Development.

أسهل طريقة هي الانتقال إلى علامة التبويب "الإعدادات" في مستودعنا ، ثم إلى خيار الصفحات داخل قسم "الشفرة والأتمتة".

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

بمجرد تحديد الفرع ، حدد المجلد الذي تريد خدمة الملفات منه - عادةً الجذر ( / ) - وانقر فوق حفظ.

مرة أخرى ، انتظر بضع دقائق. يجب أن يكون موقعك متاحًا على "yourusername".github.io/ .

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

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

6. إنشاء مجال مخصص

أسهل طريقة لإعداد مجال مخصص لصفحة GitHub والتأكد من أنها تعمل هي الانتقال إلى مزود DNS الخاص بك وإنشاء أربعة سجلات A لعناوين IP لصفحات GitHub:

 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

يجب عليك أيضًا إعداد سجل CNAME باستخدام yourusername.github.io كهدف. عادةً ما تكون تغييرات DNS بطيئة ، لذا كن صبورًا ، فقد تستغرق يومًا كاملاً.

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

أيضًا ، إذا كان DNS الخاص بك يدعمه ، فحدد مربع Enforce HTTPS لخدمة موقعك عبر HTTPS فقط.

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

أفضل الممارسات لصفحات جيثب

قبل أن نفترق ، إليك بعض أفضل الممارسات التي يجب أن تأخذها في الاعتبار عند نشر موقع GitHub:

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

ملخص

تطوير الويب يزداد تعقيدًا كل يوم. كانت المواقع الثابتة موجودة هنا منذ ظهور الإنترنت ، وهي طريقة رائعة لبدء إنشاء المشاريع.

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

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