Linux Server Deployment & SSH Mastery · درس

استضافة المواقع الثابتة

اضبطوا خادم الويب الذي اخترتموه لتقديم ملفات HTML وCSS وJavaScript الثابتة، وإتاحة موقعكم الأول.

استضافة المواقع الثابتة درس مجاني في Linux Server Deployment & SSH Mastery على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Linux Server Deployment & SSH Mastery، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Linux Server Deployment & SSH Mastery 4 دروس في المجموع.

ما المواقع الثابتة؟

مرحبًا! سنتعلم في هذا الدرس كيفية إتاحة موقع الويب البسيط الخاص بك عبر الإنترنت.

يتكون موقع الويب الثابت من ملفات مثل HTML وCSS وJavaScript، وتُرسل هذه الملفات إلى متصفح المستخدم تمامًا كما هي مخزنة على الخادم.

لا توجد معالجة من جانب الخادم، مثل PHP أو Python.
سريع وآمن وسهل الاستضافة.
مثالي لملفات الأعمال والمدونات أو المواقع المعلوماتية البسيطة.

إنشاء ملف HTML الأول

لننشئ ملف index.html بسيطًا جدًا. سيكون هذا الملف الصفحة الرئيسية لموقع الويب الثابت.

عادةً ما تنشئ هذا الملف على خادمك، باستخدام محرر نصوص مثل nano أو vim.

<!DOCTYPE html>
<html>
<head>
  <title>My First Static Site</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello CoddyKit!</h1>
  <p>This is my awesome static website.</p>
  <script src="script.js"></script>
</body>
</html>

إضافة CSS وJavaScript

يشير ملف HTML الخاص بنا إلى style.css وscript.js. لننشئ هذين الملفين أيضًا لإكمال موقعنا الأساسي.

سيكون هذان الملفان في الدليل نفسه الذي يوجد فيه index.html.

/* style.css */
body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  text-align: center;
}
h1 {
  color: #333;
}

// script.js
document.addEventListener('DOMContentLoaded', () => {
  console.log('Website loaded!');
  alert('Welcome to my site!');
});

إعداد دليل الويب الخاص بك

نحتاج إلى مكان مخصص على خادمنا لتخزين ملفات موقع الويب هذه. ومن المواقع الشائعة لذلك ما يقع ضمن /var/www/.

أنشئ أولًا دليلًا لموقع الويب الخاص بك. ثم انسخ ملفات index.html وstyle.css وscript.js إليه.

sudo mkdir -p /var/www/mywebsite
sudo cp index.html /var/www/mywebsite/
sudo cp style.css /var/www/mywebsite/
sudo cp script.js /var/www/mywebsite/

# Set proper permissions
sudo chown -R www-data:www-data /var/www/mywebsite
sudo chmod -R 755 /var/www/mywebsite

Nginx: أساسيات كتلة الخادم

يستخدم Nginx كتل الخادم، المشابهة للمضيفات الافتراضية في Apache، لتعريف إعدادات مواقع ويب محددة.

تستمع كل كتلة خادم إلى الطلبات على منفذ، مثل المنفذ 80 لـ HTTP، وتستجيب بناءً على اسم النطاق.

توجد عادةً في /etc/nginx/sites-available/.
يتم تفعيلها من خلال إنشاء رابط رمزي إلى /etc/nginx/sites-enabled/.

Nginx: توجيها root وindex

تخبر توجيهان أساسيان داخل كتلة الخادم Nginx بمكان العثور على ملفاتك:

root: يحدد المسار المطلق لملفات موقع الويب. وهذا هو المكان الذي سيبحث فيه Nginx عن المحتوى.
index: يحدد الملف الافتراضي الذي يجب على Nginx تقديمه عند طلب دليل، مثلما يحدث عندما يزور شخص ما yourdomain.com/، إذ يبحث Nginx عن index.html.

Nginx: إعداد كامل لموقع ثابت

إليك إعدادًا كاملًا لكتلة خادم Nginx لموقعنا الثابت. احفظه باسم /etc/nginx/sites-available/mywebsite.conf.

تذكر استبدال your_domain.com بنطاقك الفعلي أو عنوان IP الخاص بخادمك.

server {
  listen 80;
  listen [::]:80;

  server_name your_domain.com www.your_domain.com;

  root /var/www/mywebsite;
  index index.html index.htm;

  location / {
    try_files $uri $uri/ =404;
  }
}

Apache: ما يعادل المضيف الافتراضي

إذا كنت تستخدم Apache، فالمفهوم مشابه باستخدام المضيفات الافتراضية. ستنشئ ملف إعداد، مثل /etc/apache2/sites-available/mywebsite.conf.

التوجيهات الأساسية هي DocumentRoot، الذي يماثل root في Nginx، وDirectoryIndex، الذي يماثل index في Nginx.

<VirtualHost *:80>
  ServerAdmin webmaster@localhost
  ServerName your_domain.com
  ServerAlias www.your_domain.com

  DocumentRoot /var/www/mywebsite
  DirectoryIndex index.html index.htm

  <Directory /var/www/mywebsite>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
  </Directory>

  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

تفعيل الخادم وإعادة تحميله

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

بالنسبة إلى Nginx: أنشئ رابطًا رمزيًا ثم أعد تحميل الخدمة.
بالنسبة إلى Apache: فعّل الموقع ثم أعد تحميل الخدمة.

# For Nginx:
sudo ln -s /etc/nginx/sites-available/mywebsite.conf /etc/nginx/sites-enabled/
sudo nginx -t # Test config syntax
sudo systemctl reload nginx

# For Apache:
sudo a2ensite mywebsite.conf
sudo apache2ctl configtest # Test config syntax
sudo systemctl reload apache2

اختبار موقع الويب المنشور

أحسنت! من المفترض أن يصبح موقع الويب الثابت متاحًا الآن.

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

يجب أن ترى رسالتك "Hello CoddyKit!"!

تحقق سريع: توجيهات Nginx

ضع في اعتبارك مقطع كتلة خادم Nginx التالي:

server {
  listen 80;
  server_name example.com;
  root /var/www/html/blog;
  index landing.html index.htm;

  location / {
    try_files $uri $uri/ =404;
  }
}

إذا انتقل مستخدم إلى http://example.com/، فما الملف الذي سيحاول Nginx تقديمه أولًا؟

مراجعة: استضافة المواقع الثابتة

لقد تعلمت بنجاح استضافة موقع ويب ثابت!

تناولنا ما يلي:

إنشاء ملفات HTML وCSS وJS أساسية.
إعداد دليل مخصص لمحتوى موقع الويب.
إعداد كتل خادم Nginx، أو المضيفات الافتراضية في Apache، باستخدام root/DocumentRoot وindex/DirectoryIndex.
تفعيل خادم الويب وإعادة تحميله.
اختبار موقع الويب المنشور في متصفح.

سنستكشف بعد ذلك إعداد المضيفات الافتراضية لاستضافة عدة مواقع ويب على خادم واحد!

الأسئلة الشائعة

هل درس «استضافة المواقع الثابتة» مجاني؟

نعم — نص درس «استضافة المواقع الثابتة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Linux Server Deployment & SSH Mastery، انتقل إلى CoddyKit PRO. تتضمن دورة Linux Server Deployment & SSH Mastery 4 دروس في المجموع.

ماذا ستتعلم في «استضافة المواقع الثابتة»؟

اضبطوا خادم الويب الذي اخترتموه لتقديم ملفات HTML وCSS وJavaScript الثابتة، وإتاحة موقعكم الأول. تتمرن على Linux Server Deployment & SSH Mastery مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Linux Server Deployment & SSH Mastery؟

لا تُشترط خبرة سابقة. Linux Server Deployment & SSH Mastery على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «استضافة المواقع الثابتة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Linux Server Deployment & SSH Mastery هذا؟

نعم. كل درس في Linux Server Deployment & SSH Mastery يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Linux Server Deployment & SSH Mastery