---
title: Use Github Static Pages to Host Your Front End Projects
localeTitle: استخدم Gitub Static Pages لاستضافة مشاريع الواجهة الأمامية
---
**فوائد**

أنا أحب Codepen.io ، إنها أداة رائعة وسهلة الاستخدام لتجربة أمامية بسيطة. ولكن مع ازدياد تعقيد مشاريع لجنة التنسيق الفيدرالية ، أدركت أن الترميز محليًا سيوفر لي مجموعة من الصداع. محرر النص الخاص بي و [combkit](https://incident57.com/codekit/) هي فقط [waaay](https://incident57.com/codekit/) أسرع.

*   الإكمال التلقائي
*   قم بتجميع كل شيء (كان codepen يسحب بالفعل في محاولة لتجميع Jade)
*   تحديث تلقائي أفضل
*   بنيت في كوخ
*   إصدار Git
*   تحسين تجربة العقارات الشاشة

## جيت إلى جيثب

نظرًا لأنني حفظ بالفعل محليًا ، وباستخدام git للتحكم في الإصدار ، فقد أحسست أيضًا بتحميله إلى Github. بالإضافة إلى ذلك ، لدى Github خدمة رائعة مجانية لمشاريع الواجهة الأمامية التي تسمى [Github Pages](https://pages.github.com/) . مجرد تحديث الريبو الخاص بك والتغييرات الخاصة بك على الهواء مباشرة.

كيف يعمل بسيط. يتحقق Github مما إذا كان لدى المستودع فرع يسمى `gh-pages` ويخدم أي رمز يجلس في هذا الفرع. لا توجد أشياء خلفية هنا ، ولكن HTML و CSS و JS تعمل مثل السحر.

## اهم الاشياء اولا

دعونا نجعل مجلد جديد لمشروعك. [سأستخدم](http://www.freecodecamp.com/challenges/stylize-stories-on-camper-news) مشروع [Camper News](http://www.freecodecamp.com/challenges/stylize-stories-on-camper-news) كمثال لي.

حصلت على دليل عملك وجعل واحدة جديدة. يمكنك القيام بذلك في المحطة (أو لا).

![دليل المشروع](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2e3faaa2752657c592a9991ceed29a0200f332e6.png)

الآن ، انتقل إلى دليل المشروع ، و (بالتأكيد في المحطة الطرفية هذه المرة) استخدم الأمر `git init` . ملاحظة ، يفترض هذا البرنامج التعليمي [لديك git مثبتة](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) .

حسنًا ، رائع. نحن الآن على استعداد للعمل.

## الخطوات التالية

قم بإنشاء بعض الملفات في دليل campNews الخاص بك. لا أعلم ، ربما index.html وربما app.css و app.js ، أو أيًا من اصطلاحات التسمية التي تفضلها. ضع التعليمات البرمجية الخاصة بك في هذه الملفات. حسنًا ، نحن الآن جاهزون لالتزامنا الأول. يستغرق **خطوتين** .

1.  سوف `git add -A` الإعدادية كل هذه الملفات الجديدة والرمز الجديد داخلها
2.  `git commit -m 'relevant message'` بكل العمل الذي قمت به للفرع الذي تتواجد فيه حاليًا ("master" بشكل افتراضي)

## المفتاح لهذا الأمر كله

حسنا ، حتى الآن ما زلنا المحلية. هناك بعض الأشياء التي يجب فعلها لأخذ عملنا وتحريكه إلى جيثب. في هذه المرحلة ، أحب تبديل الفروع. تذكر - github يخدم فقط من صفحات gh ، وإذا كنت قد تبعت حتى الآن ، يسمى فرعك "الرئيسي". دعونا نجعل فرع جديد من صفحات gh (محلية).

ستقوم `git checkout -b gh-pages` بإنشائه ، قم بنسخ كل الأعمال من الرئيسية إلى صفحات gh وقم بتحويلي إلى الفرع. تفو.

سيتخلص `git branch -d master` من الفرع الرئيسي. يبدو مجنونا وأنا أعلم ، ولكن ماذا نحتاج إليه؟ ما عليك سوى التفكير في صفحات gh باعتبارها الفرع الرئيسي الجديد.

الآن ، `git add -A` و `git commit -m 'relevant message'` مرة أخرى ، فقط في حالة. وكن مستعدًا لمغادرة المحرر والمطاريف والدخول إلى الإنترنت لأول مرة.

الذهاب إلى ملفك الشخصي github وإنشاء الريبو الجديد. سمّها شيئًا ملائمًا ، مثل campNews.

![ريبو جديد](//discourse-user-assets.s3.amazonaws.com/original/2X/3/3f113af87b94fcd649c78d5f6d36463795671e7b.png)

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

![استنساخ رابط](//discourse-user-assets.s3.amazonaws.com/original/2X/a/a0f3da26ba0802342d7d6f7890763a2bca32b62a.png)

## ضع كل شيء معا

ويمكنك ترك العالم عبر الإنترنت. العودة إلى المحطة! دعونا ربط مشروعنا المحلي لهذا الريبو جيثب. كل ما يتطلبه الأمر هو أمر واحد.

`git remote add origin <server>` فقط استبدل الخادم بعنوان URL HTTPS الذي نسخته للتو. لذا تبدو قيادتي هكذا:

`git remote add origin https://github.com/gkobilansky/campNews.git` .

حسنًا ، لقد قمنا حتى الآن بما يلي:

1.  خلق مشروعنا
2.  إصدارها في بوابة
3.  ارتكز بعض التغييرات
4.  حولته إلى فرع "gh-pages"
5.  توصيله إلى جيثب

## اخر خطوة!

دفع لك مشروع لجيثب. مرة أخرى ، بسيطة:

`git push origin gh-pages`

سيتأكد هذا الأمر من تحميل آخر تعهدات لك إلى github. بمجرد الانتهاء من ذلك مرة واحدة على الأقل ، يجب أن يكون مشروعك متاحًا http: // _username_ .github.io / _repository_ ، لذلك بالنسبة لي فهو [http://gkobilansky.github.io/campNews](http://gkobilansky.github.io/campNews) .

بمجرد الانتهاء من كل هذا ، فإن العملية تكرر نفسها فقط:

1.  `git add -A`
2.  `git commit -m 'relevant message'`
3.  `git push origin gh-pages`

منحني ، منحنى التعلم أكثر انسيابية من codepen.io ، ولكن أسرع وأكثر مرونة بمجرد الحصول على تعليق منه.

الترميز سعيدة!

PS. بفضل [هذا الدليل من](http://rogerdudler.github.io/git-guide/) قبل روجر دادلر للحفاظ على الأمور بسيطة.