كيفية إنشاء موقع مجاني ثابت باستخدام صفحات GitHub في 10 دقائق

أصبحت المواقع الثابتة في غاية الغضب ، ولسبب وجيه - فهي سريعة للغاية ، ومع عدد متزايد من خدمات الاستضافة المدعومة ، من السهل جدًا إعدادها.

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

أولاً ، أريدك أن تعرف أنني أكتب هذا لأكبر عدد ممكن من الجمهور ؛ لا تحتاج إلى أي معرفة برمجية لمتابعة ذلك ، ولكن بعض الإلمام بسطر الأوامر و Git سيساعدان كثيرًا.

إذن كيف يمكنك إنشاء موقع ثابت باستخدام GitHub في 10 دقائق؟

سنعمل باستخدام أداتين محددتين: صفحات GitHub ، المصممة خصيصًا لخدمة المحتوى الثابت ، ومولد محتوى ثابت يسمى Jekyll.

Jekyll هي جوهرة Ruby لإنشاء مواقع ثابتة بسهولة ، لذلك ستحتاج إلى تثبيت Ruby على جهاز الكمبيوتر الخاص بك إذا كنت تريد استخدام Jekyll. إذا كان لديك OSX ، فمن المرجح أن يكون لديك بالفعل إصدار من Ruby (على الرغم من أنك قد تحتاج إلى تحديثه). إذا لم تقم بذلك ، أو إذا كنت تستخدم جهاز كمبيوتر يعمل بنظام Windows ، فيمكنك معرفة المزيد حول تثبيته هنا: تثبيت Ruby.

بعد ذلك ، افتح نافذة أرملة جديدة واكتب gem install bundler jekyll. سيؤدي هذا إلى تثبيت Bundler (أداة إدارة حزم Ruby) و Jekyll.

بمجرد تثبيت هذه الأحجار الكريمة (حزم روبي) ، اكتب Jekyll new my-static-site(سمها كما تريد) والتي ستعمل منشئ Jekyll لإنشاء مشروعك في دليل جديد. بعد إنشاء موقعك ، انتقل إلى دليل الموقع الذي تم إنشاؤه حديثًا عن طريق الكتابة cd my-static-site(أو cdأيًا كان ما يسمى مشروعك).

افتح مشروعك في محرر نصوص وسترى العديد من الملفات والمجلدات التي أنشأها Jekyll لك. في الوقت الحالي ، ما عليك سوى أن تشغل نفسك بـ Gemfile (وليس Gemfile.lock). Gemfile هو ملف Ruby يدير جميع حزم Ruby المرتبطة اللازمة لتشغيل المشروع.

سيحتوي الملف على سطر بإصدار Jekyll ، قم بالتعليق عليه:

#gem "jekyll", "~> 4.0.0" 

ثم أضف هذا السطر:

gem "github-pages", group: :jekyll_plugins 

يمكن أن يكون هناك الكثير من المشاكل عند تثبيت جوهرة صفحات GitHub - في بعض الأحيان تكون الجواهر التي تعتمد عليها قديمة أو الأحجار الكريمة التي قمت بتثبيتها محليًا حديثة جدًا بالنسبة لصفحات GitHub.

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

gem "jekyll", "~> 3.8.5" gem "github-pages","~> 202" , group: :jekyll_plugins group :jekyll_plugins do gem "jekyll-feed", "~> 0.11.0" end 

بفضل Alex Waibel على StackOverflow لهذا التكوين الأخير.

لرؤية موقعك في العمل ، قم بتشغيله bundle exec Jekyll serveفي سطر الأوامر. سيبدأ هذا الخادم ويمكنك رؤية موقعك عن طريق كتابة "localhost: 4000" في شريط URL الخاص بالمستعرض.

هاهو! لقد قمت بإنشاء موقع ثابت باستخدام Jekyll وأنت في دليل المشروع. لقد أتممت حوالي 50٪.

لنحصل على هذا عبر الإنترنت

انتقل إلى GitHub.com وقم بالتسجيل ، أو إذا كان لديك حساب بالفعل ، فحدد الزر "جديد" وأنشئ مستودعًا. من المهم أن تسمي المستودع الخاص بك بعد الرابط الذي سيقدمه حساب صفحات GitHub الخاص بك ، وهو your_username.github.io. على سبيل المثال ، اسم المستخدم الخاص بي على GitHub هو tfantina ومدونتي هي tfantina.github.io ، لذلك تم تسمية مستودع GitHub الخاص بي: "tfantina.github.io".

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

git init git remote add origin [email protected]:/.git git commit -am “Setting up Jekyll!” git push -u origin master 

(عند استبدال اسم المستخدم واسم المشروع ، لا تحتاج إلى فتح وإغلاق).

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

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

ستلاحظ أيضًا أنه يمكنك بسهولة تغيير المظهر الخاص بك من هنا أيضًا. يوفر GitHub بعض السمات الافتراضية لـ Jekyll ، ولكن بالطبع يمكنك أيضًا إنشاء سماتك الخاصة.

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

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

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

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

مرة أخرى في محرر النصوص الخاص بك ، افتح مجلد "_posts". يوجد بالفعل منشور يرحب بك في مدونتك الجديدة. قم بإنشاء ملف markdown جديد وحفظه باسم بهذا التنسيق: YEAR-MONTH-DAY-TITLE.markdown (انظر أدناه):

يحتوي منشور Jekyll على قسمين: الجزء الأمامي والجسم.

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

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

هناك الكثير الذي يمكنك القيام به مع المقدمة ، ولكن لنبدأ بمثال عام.

تبدو الواجهة الافتراضية كما يلي:

— layout: post title: "Welcome to Jekyll!" date: 2019-11-09 18:07:11 -0600 categories: jekyll update — 
  • يخبر Layout Jekyll بالتخطيط الذي تريد عرض المحتوى عليه. يمكن أن يكون لديك تخطيطات متعددة لصفحات مختلفة أو أنواع منشورات مختلفة.
  • عنوان الوظيفة
  • تاريخ آخر
  • الفئات ، وهي في الأساس علامات. يمكنك إضافة عدد قليل أو كثير كما تريد مفصولة بمسافات.

بعد المقدمة ، يمكن كتابة منشورك في Markdown ، مما يمنحك الكثير من المرونة في كتابة محتوى المنشور.

بمجرد الانتهاء من المنشور ، احفظه وافتح نافذة المحطة الطرفية.

git commit -am “Publishes first post git push

بعد دقيقة (وربما تحديث) ، ستتمكن من رؤية منشورك.

نأمل أن يكون لديك الآن موقع ثابت يعمل على صفحات GitHub التي تم إنشاؤها باستخدام Jekyll! إذا كان لديك أي مشاكل أو أسئلة ، يرجى إرسال تغريدة علىtfantina ، أو يمكنك مراسلتي عبر البريد الإلكتروني على [email protected]