السبت - الخميس: 10:00 ص - 10:00 م

من المحلي إلى العالمي: دليل بسيط لنشر موقعك

دليل خطوة بخطوة لنشر أول مشروع ويب لك على الإنترنت مجانًا وبسهولة.

من المحلي إلى العالمي: دليل بسيط لنشر موقعك

من المحلي إلى العالمي: دليل بسيط لنشر موقعك

أنهيت مشروعك الأول؟ حان الوقت لنقله من جهازك إلى الإنترنت ليراه العالم. تعلم كيف تنشر موقعك بسهولة باستخدام أدوات حديثة ومجانية.

ما هو النشر (Deployment)؟

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

الخطوات الأساسية:

  • إعداد المشروع للنشر
  • اختيار منصة النشر
  • رفع الملفات
  • اختبار الموقع
  • تحديث النطاق (اختياري)

لماذا النشر مهم؟

🌍 الوصول العالمي

موقعك متاح للجميع على الإنترنت

📱 متاح دائماً

يعمل 24/7 دون انقطاع

⚡ سرعة عالية

خوادم محسنة للأداء

🔒 أمان

حماية من الهجمات

أنواع النشر:

🆓 مجاني

منصات مجانية للمشاريع الشخصية

  • Netlify
  • Vercel
  • GitHub Pages
  • Firebase Hosting

💰 مدفوع

خدمات مدفوعة للمشاريع التجارية

  • AWS
  • DigitalOcean
  • Heroku
  • Azure

🏠 استضافة تقليدية

خوادم تقليدية

  • Shared Hosting
  • VPS
  • Dedicated Servers

النشر على Netlify:

الطريقة الأولى: السحب والإفلات

  1. اذهب إلى netlify.com
  2. سجل حساب جديد
  3. اسحب مجلد المشروع إلى منطقة "Deploy"
  4. انتظر حتى ينتهي النشر
  5. احصل على رابط الموقع

الطريقة الثانية: ربط GitHub

# 1. ارفع مشروعك إلى GitHub
git init
git add .
git commit -m "First commit"
git remote add origin https://github.com/username/repo.git
git push -u origin main

# 2. في Netlify:
# - اربط حساب GitHub
# - اختر المستودع
# - اضبط إعدادات البناء
# - انشر الموقع

إعدادات البناء:

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "18"

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

النشر على Vercel:

النشر السريع:

  1. اذهب إلى vercel.com
  2. سجل حساب جديد
  3. اضغط "New Project"
  4. اربط GitHub أو ارفع الملفات
  5. اضبط الإعدادات وانشر

النشر من Terminal:

# تثبيت Vercel CLI
npm i -g vercel

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

# نشر المشروع
vercel

# نشر مع إعدادات مخصصة
vercel --prod

إعدادات Vercel:

# vercel.json
{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

النشر على GitHub Pages:

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

  1. أنشئ مستودع جديد على GitHub
  2. ارفع ملفات مشروعك
  3. اذهب إلى Settings > Pages
  4. اختر الفرع المناسب
  5. احفظ الإعدادات

للأوامر:

# إنشاء مستودع جديد
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/username/repo.git
git push -u origin main

# إعداد GitHub Pages
# 1. اذهب إلى Settings
# 2. اختر Pages من القائمة الجانبية
# 3. اختر Source: Deploy from a branch
# 4. اختر Branch: main
# 5. اضغط Save

للأعمال التلقائية:

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2

    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '18'

    - name: Install dependencies
      run: npm install

    - name: Build
      run: npm run build

    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist

النشر على Firebase:

الإعداد:

# تثبيت Firebase CLI
npm install -g firebase-tools

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

# تهيئة المشروع
firebase init hosting

# بناء المشروع
npm run build

# النشر
firebase deploy

إعدادات Firebase:

# firebase.json
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

إعداد المشروع للنشر:

للمشاريع الثابتة:

# package.json
{
  "name": "my-website",
  "version": "1.0.0",
  "scripts": {
    "build": "npm run build:css && npm run build:js",
    "build:css": "sass src/scss:dist/css",
    "build:js": "webpack --mode production"
  }
}

للمشاريع React/Vue/Angular:

# React
npm run build

# Vue
npm run build

# Angular
ng build --prod

# Next.js
npm run build
npm run start

ملف .gitignore:

# Dependencies
node_modules/
npm-debug.log*

# Build outputs
dist/
build/
.next/

# Environment variables
.env
.env.local

# IDE
.vscode/
.idea/

# OS
.DS_Store
Thumbs.db

اختيار النطاق (Domain):

النطاقات المجانية:

  • Netlify: yoursite.netlify.app
  • Vercel: yoursite.vercel.app
  • GitHub Pages: username.github.io
  • Firebase: yoursite.web.app

النطاقات المخصصة:

  1. اشتر نطاق من مزود (GoDaddy, Namecheap)
  2. اضبط DNS records
  3. اربط النطاق بالمنصة
  4. انتظر التفعيل (24-48 ساعة)

إعداد DNS:

# لـ Netlify
CNAME www yoursite.netlify.app
A @ 75.2.60.5

# لـ Vercel
CNAME www cname.vercel-dns.com
A @ 76.76.19.61

أفضل الممارسات:

🚀 الأداء:

  • استخدم ضغط الصور
  • فعل Gzip compression
  • استخدم CDN
  • قلل من حجم الملفات

🔒 الأمان:

  • استخدم HTTPS
  • حدث التبعيات بانتظام
  • استخدم متغيرات البيئة
  • راقب الأخطاء

📊 المراقبة:

  • استخدم Google Analytics
  • راقب سرعة الموقع
  • اختبر على أجهزة مختلفة
  • احتفظ بنسخ احتياطية

أدوات مفيدة:

🌐 Netlify

نشر سهل للمواقع الثابتة

⚡ Vercel

مثالي لمشاريع React/Next.js

🔥 Firebase

خدمات Google للنشر

📦 GitHub Pages

نشر مجاني مع GitHub

مثال تطبيقي:

نشر موقع React:

# 1. إعداد المشروع
npx create-react-app my-website
cd my-website

# 2. بناء المشروع
npm run build

# 3. النشر على Netlify
# - اذهب إلى netlify.com
# - اسحب مجلد build إلى منطقة النشر
# - احصل على رابط الموقع

# 4. النشر على Vercel
npm i -g vercel
vercel login
vercel

# 5. النشر على GitHub Pages
# - ارفع المشروع إلى GitHub
# - فعل GitHub Pages في Settings
# - اضبط إعدادات البناء

الخطوات التالية:

  • جرب منصات مختلفة
  • تعلم CI/CD
  • فهم Docker
  • تعلم إدارة الخوادم
  • ممارسة DevOps

النشر هو الخطوة الأخيرة في رحلة تطوير الويب. ابدأ في نشر مشاريعك اليوم!

تعلم التطوير معنا

تواصل معنا

عبر الماسنجر او الهاتف