كيفية استضافة موقع رد فعل ثابت مع أشكال الاتصال مجانا

TLDR: يمكنك إنشاء موقع ويب به أدوات منشئ مواقع الويب الثابتة مثل gatsbyjs ، واستضافته مجانًا على صفحات GitHub أو firebase مع HTTPS ، و CloudFlare بخلاف www www لإعادة توجيه www. يمكن إعداد نموذج جهة الاتصال بسهولة بدون رمز من جانب الخادم Formspree.

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

تقنية

يمكنك فقط استخدام ملفات HTML / CSS / JS الثابتة ، لكنني أوصي باستخدام منشئ موقع الويب الثابت بحيث يمكنك استخدام ميزات أكثر تعقيدًا من خارج الصندوق. هناك الكثير من الخيارات. البعض منهم:

  • gatsbyjs
  • التالي (يحتوي على دعم تصدير ثابت من الإصدار 3.0)
  • nuxt (vue.js)
  • قيثار
  • hexo (إطار المدونة)

تم بناء موقع الويب الشخصي الخاص بي باستخدام gatsbyjs. www.mirokoczka.com (مستودع جيثب)

نموذج الاتصال

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

https://formspree.io/your@email.com

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

         <إدخال نوع = "البريد الإلكتروني" name = "_ replyto">     <إدخال نوع = "إرسال" value = "إرسال">

يمكنك أسلوب ذلك كما تريد. تذكر أن تؤكد عنوان بريدك الإلكتروني أولاً. يمكنك العثور على المزيد من الميزات والوثائق على موقع Formspree.

استضافة

الآن ، سنحتاج إلى استضافة ملفاتنا الثابتة. هذه هي اختيارات الاستضافة الواضحة بالنسبة لي:

  1. Firebase
  2. جيثب الصفحات

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

إعادة توجيه المجال المخصص و HTTPS وغير www إلى www

ربما تريد إعادة توجيه حركة المرور الخاصة بك إلى

https://www.yourwebsite.com

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

وقد تم ذلك. لديك موقع الويب الثابت الخاص بك مع نشر نموذج الاتصال على السحابة وتقديمه عبر https مجانًا. يمكنك حتى إضافة التكامل المستمر لبنيات الإصدار الخاص بك مع Travis-ci أو Circle-ci كما فعلت هنا.

اسمحوا لي أن أعرف في التعليقات ما إذا كنت تريد مني أن أتعمق أكثر في بعض هذه المواضيع ، وإذا كان لديك أي سؤال ، فسأكون سعيدًا بالرد. لا تنسى متابعتي للمزيد من المقالات. (في الغالب حول JavaScript و Angular)