نطاق غير محدود واستضافة ويب مجانية مع صفحات GitHub و Cloudflare

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

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

لماذا المحتوى الثابت؟

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

بناء واجهة مستخدم معقدة؟

مع ظهور أطر عمل الواجهة الأمامية ، مثل React وأقاربها ، يمكنك إنشاء تجارب سحرية باستخدام HTML / CSS و JavaScript. سيتعين عليك فصل منطقك الخلفي عن واجهتك الأمامية ، ولكن حتى Ruby on Rails يأتي مع وضع API الآن.

عندما يتم التعاقد معي لإنشاء موقع ويب ، فإنني أفكر فيما إذا كان الموقع الثابت كافيًا أم لا لتلبية احتياجات عميلي ، وفي كثير من الحالات ، يكون كذلك.

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

مواقع الكتيبات

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

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

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

تطبيقات صفحة واحدة

هل تستعرض تطبيقًا جديدًا رائعًا ورائعًا يعتمد على أطر أمامية حديثة؟

تطبيقك ثابت في الغالب بالفعل. اتخذ بضع خطوات إضافية لعزل أي منطق من جانب الخادم في تطبيق منفصل ، واحصل على الفائدة الكاملة من تقديم تطبيقك بالكامل من ذاكرة التخزين المؤقت لـ Cloudflare.

سيكون تطبيقك متاحًا في جميع الأوقات.

المدونات

هذا بيع صعب من الصعب إقناع الناس بإمكانية توظيف المواقع الثابتة في المدونات ، لكن اقرأ لي - لم أذهب بعيدًا عن العمق.

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

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

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

في الواقع ، أنا أستخدم Stackedit لتأليف هذا المنشور الآن!

أيضًا ، إذا كنت تريد تعليقات على منشورات مدونتك ، يمنحك Disqus نظام تعليق قويًا عن طريق إدراج مقتطف من JavaScript.

هذه الصفحة التي تقرأها تستخدم Disqus أيضًا.

صفحات جيثب

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

النشر في صفحات GitHub.

كفى كلامًا ، دعنا نراه في العمل!

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

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

يتم تقديم صفحات GitHub من فرع يسمى gh-pages لذلك دعونا ننشئ واحدة لمشروعي.

 $ git checkout -b gh-pages Switched to a new branch 'gh-pages'

ودعنا نرفع الموقع:

 $ git remote add origin [email protected]:amingilani/price-check.git $ git push -u origin gh-pages Counting objects: 27, done. Delta compression using up to 8 threads. Compressing objects: 100% (25/25), done. Writing objects: 100% (27/27), 28.67 KiB | 0 bytes/s, done. Total 27 (delta 3), reused 0 (delta 0) remote: Resolving deltas: 100% (3/3), done. To github.com:amingilani/price-check.git * [new branch] gh-pages -> gh-pages

وانتهينا! في هذه المرحلة ، سيكون موقع الويب متاحًا على https://amingilani.github.io/price-check مع SSL مجاني:

أشياء مهمة يجب ملاحظتها:

• تعرض صفحات GitHub ملف index.html في فرع gh-pages في مشروعك
• يتم تقديم الموقع على USERNAME.github.io/REPOSITORY-NAME

تخصيص اسم المجال.

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

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

 $ echo 'pricecheck.gilani.me' > CNAME $ git add . $ git commit -m 'Add a custom domain' ... $ git push ...

ثانيًا ، دعنا نشير CNAME الفرعي إلى DNS الخاص بـ GitHub على USERNAME.github.io :

تحذير: لا تستخدم هذا لمجال رئيسي! ستؤدي إضافة سجل CNAME إلى الجذر إلى تعطيل سجلات MX و TXT . استخدم هذا فقط للمجال الفرعي الخاص بك. نوقشت المجالات Apex فيما بعد.

في هذه المرحلة ، يجب أن يعمل موقعنا على مجالنا المخصص على HTTP:

أشياء مهمة يجب ملاحظتها:

• يتم تقديم المجال الافتراضي *.github.io من خلال HTTPS.
• يتم تقديم اسم المجال المخصص الخاص بنا من خلال بروتوكول HTTP غير الآمن.
• لا تستخدم سجل CNAME على نطاقك الرئيسي إلا إذا كنت تريد قتل رسائل البريد الإلكتروني الخاصة بك.

حدود صفحات GitHub:

• يجب أن يكون حجم ملفات إعادة الشراء أقل من 1 جيجابايت.
• يجب أن يكون حجم ملفات مواقع الويب أقل من 1 غيغابايت.
• حد النطاق الترددي الشهري 100 جيجا بايت. سنتجاوز هذا لاحقًا.

استخدام مجال رئيسي كمجال مخصص لك

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

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

لا ANAME ؟ الخيار الأخير هو التغيير إلى مزود DNS يدعم ذلك: أدخل Cloudflare. يوفر Cloudflare تسوية CNAME على المجالات الرئيسية ، وهو ما يعادل سجل ANAME . من الأفضل إجراء التبديل الآن لأننا سنغطي Cloudflare في القسم التالي.

TLDR : قم بالتبديل إلى DNS المجاني الخاص بـ Cloudflare وقم بتعيين CNAME على المجال الرئيسي الخاص بك. يفعلون شيئًا مميزًا باستخدام CNAME الخاص بهم مما يجعله يعمل.

SSL و Cloudflare

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

بصفتك مسؤول ويب حديثًا ، يُتوقع منك توفير طبقة المقابس الآمنة على الأقل على موقع الويب الخاص بك ، مع عدم وجود محتوى مختلط .

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

لحسن الحظ ، لدينا الآن Let's Encrypt.

إنها سلطة مصدق (CA) غير ربحية ومؤتمتة بالكامل تتيح لك إصدار شهادات SSL قصيرة الأجل لمدة 90 يومًا بشكل برمجي لأي نطاقات تتحكم فيها. إنه سهل الاستخدام ؛ مفتوح المصدر والمشروع مدعوم من قبل عدد كبير من الشركات ، بما في ذلك Mozilla و Electronic Frontier Foundation.

استخدام Cloudflare جيدًا

Cloudflare هي خدمة حماية DNS و CDN و DDoS.

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

علاوة على ذلك ، تقدم Cloudflare خدمة تسمى Universal SSL حيث تصدر لك شهادة SSL مجانية من شركائها في CA ، لذلك تحصل على HTTPS مجانًا ... إلى الأبد.

لماذا Cloudflare؟

أعرف ما تفكر فيه: جيلاني ، لقد أخبرتني للتو كم هو رائع Let's Encrypt. لماذا تتحدث عن Cloudflare؟ حسنًا ، كل هذا يعود إلى البساطة.

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

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

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

إعداد Cloudflare SSL

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

بعد ذلك ، ضمن Crypto ، اضبط مستوى SSL على "كامل".

فرض "إعادة كتابة HTTPS التلقائية" لإيقاف تحذيرات المحتوى المختلط.

في هذه المرحلة ، سيعمل موقعنا على كل من HTTP و HTTPS. دعنا نفرض HTTPS لكل شيء في مجالنا.

كله تمام. يجب أن يتم تحميل موقعنا الإلكتروني دائمًا عبر HTTPS بتصنيف أخضر "آمن" في Chrome.

الكلمات النهائية والاعتبارات الأمنية

هناك بعض الأشياء التي لم تناقشها أعلاه ، وأود أن أتوقف لحظة لتوضيح بعض النقاط.

سيشير الأذكياء بينكم إلى أن هناك عددًا قليلاً من مشكلات الأمان الصارخة في هذا الإعداد ، وهي عدم وجود رؤوس HTTP آمنة مثل:

• Content-Security-Policy : تحميل البرامج النصية والأصول من القائمة البيضاء للمضيفين ، ويمكن أن تمنع js المضمنة.
• X-Frame-Options : تعطيل تحميل موقع الويب الخاص بك في إطار iframe.

وأنت على حق. لا تسمح لك صفحات GitHub وحتى Cloudflare بتخصيص رؤوس HTTP الخاصة بك . ومع ذلك ، يمكنك تعيين CSP باستخدام علامة HTML meta .

ما عليك سوى إدخال هذا في صفحة الويب الخاصة بك:

 <meta http-equiv="Content-Security-Policy" content="default-src https:">

ومع ذلك ، في الوقت الحالي ، لا توجد طريقة عملية لتعيين رأس X-Frame-Options على صفحات GitHub ، مما يعني أنه يمكن للمهاجم تحميل صفحة الويب الخاصة بك في إطار iframe مصمم خصيصًا وتنفيذ هجوم XSS. إذا كنت مخلصًا ، فيمكنك حل هذه المشكلة عن طريق مطالبة المستخدمين بتأكيد كلمة المرور الخاصة بهم أو رمز 2FA عند كل إجراء حساس ، أو عن طريق تمرير رمز CSRF عند كل طلب مصادق عليه.

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

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

تحجيم ، تحجيم غير محدود

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

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

صنع لعبة جديدة مثيرة على شبكة الإنترنت ؟! تحقق من GameSparks ، وأنت على ما يرام.

الملخص والاعتراف والروابط

في هذه المقالة ، جعلت الأمر يبدو كما لو أنني قمت بنشر تطبيق React يدويًا gh-pages . لم أفعل شيئا كهذا. لقد عملت على المستوى master وعندما حان وقت النشر ، قمت بتشغيل npm run deploy الذي أطلق برنامج نصي ودفع الإنشاء إلى gh-pages . يرجى الاطلاع على الفرع master من المستودع الخاص بي لمعرفة كيفية عمله.

الوجبات الجاهزة

الايجابيات:

• النشر الفوري
• تعاون سهل
• بيئة استضافة آمنة

تحفظات:

• لا يمكن الوصول إلى رؤوس HTTP
• سهولة تنزيل نسخة من الموقع
• مطلوب معرفة GitHub
• يعتمد على بائعي التكنولوجيا

الروابط:

• ستجد الكود المصدري لتطبيقي في amingilani / price-check
• هذا التطبيق متاح في pricecheck.gilani.me ويجب أن يكون متاحًا إلى أجل غير مسمى.