نشر موقع على Netlify — نشر المواقع والدومينات

نشر موقع على Netlify

Netlify منصة ممتازة لاستضافة المواقع الثابتة والـ JAMstack.

مميزات Netlify

✅ مجاني سخي (100GB bandwidth)

✅ Forms مدمج (بدون backend)

✅ Identity للمستخدمين

✅ Functions (AWS Lambda)

✅ Split Testing (A/B)

✅ Analytics

النشر من GitHub

الخطوات:

1. سجل في netlify.com

2. "New site from Git"

3. اختر GitHub

4. اختر Repository

5. حدد إعدادات البناء:

- Build command: npm run build

- Publish directory: dist أو build

6. Deploy!

النشر من CLI

# التثبيت
npm install -g netlify-cli

# تسجيل الدخول
netlify login

# النشر
netlify deploy

# نشر للـ Production
netlify deploy --prod

# فتح الموقع
netlify open

Drag & Drop

أبسط طريقة:

1. اذهب لـ app.netlify.com

2. اسحب مجلد dist للصفحة

3. انتهى! 🎉

ملف netlify.toml

[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "18"

# Redirects
[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

# Headers
[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"

# Functions
[functions]
  directory = "netlify/functions"

Netlify Forms

<!-- نموذج تواصل بدون backend! -->
<form name="contact" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="contact">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <button type="submit">إرسال</button>
</form>

Netlify Functions

// netlify/functions/hello.js
exports.handler = async (event, context) => {
  const name = event.queryStringParameters.name || 'World';
  
  return {
    statusCode: 200,
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      message: `Hello ${name}!`
    })
  };
};

// الوصول: /.netlify/functions/hello?name=Ahmad

ربط الدومين

1. Site settings → Domain management

2. Add custom domain

3. أضف DNS Records:

A Record:
  Name: @
  Value: 75.2.60.5

CNAME:
  Name: www
  Value: your-site.netlify.app

Environment Variables

# من CLI
netlify env:set API_KEY "your-key"
netlify env:list
netlify env:unset API_KEY

نصائح متقدمة

Preview Deploys

كل Pull Request يحصل على URL خاص للمراجعة.

Deploy Contexts

[context.production]
  command = "npm run build:prod"

[context.deploy-preview]
  command = "npm run build:preview"

[context.branch-deploy]
  command = "npm run build:staging"

Plugins

[[plugins]]
  package = "@netlify/plugin-lighthouse"

[[plugins]]
  package = "netlify-plugin-sitemap"

// ملف: netlify/functions/contact.js
const nodemailer = require('nodemailer');

exports.handler = async (event) => {
  if (event.httpMethod !== 'POST') {
    return { statusCode: 405, body: 'Method Not Allowed' };
  }

  try {
    const { name, email, message } = JSON.parse(event.body);
    
    // إرسال إيميل
    const transporter = nodemailer.createTransport({
      service: 'gmail',
      auth: {
        user: process.env.EMAIL_USER,
        pass: process.env.EMAIL_PASS
      }
    });

    await transporter.sendMail({
      from: email,
      to: 'your@email.com',
      subject: `رسالة من ${name}`,
      text: message
    });

    return {
      statusCode: 200,
      body: JSON.stringify({ success: true })
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error: error.message })
    };
  }
};

// ملف: netlify.toml
// [build]
//   command = "npm run build"
//   publish = "dist"
//   functions = "netlify/functions"