ورڈ پریس

لوکل ویب سائٹ کو GitHub اور Vercel پر پبلش اور خودکار اپڈیٹ کرنے کا طریقہ

• • 3 منٹ کی پڑھائی
GitHub اور Vercel کی مدد سے لوکل ویب سائٹ کو آن لائن پبلش کرنے کا طریقہ

لوکل ویب سائٹ کو GitHub اور Vercel کی مدد سے آن لائن پبلش اور خودکار اپڈیٹ کیسے کریں؟

کیا آپ نے کسی AI Coding Tool، جیسے Antigravity، کی مدد سے اپنے کمپیوٹر پر ویب سائٹ تیار کر لی ہے، لیکن اب یہ نہیں جانتے کہ اسے انٹرنیٹ پر کیسے پبلش کیا جائے؟

یا آپ کی ویب سائٹ پہلے سے آن لائن موجود ہے، لیکن ہر چھوٹی تبدیلی کے بعد پوری ویب سائٹ دوبارہ اپلوڈ کرنا پڑتی ہے؟

اس مسئلے کا آسان اور پروفیشنل حل یہ ہے کہ اپنی ویب سائٹ کو پہلے GitHub پر محفوظ کیا جائے اور پھر اسے Vercel کے ساتھ منسلک کر دیا جائے۔

اس طریقے سے:

  • آپ کی ویب سائٹ آن لائن پبلش ہو جائے گی۔
  • آپ کو ویب سائٹ کا قابلِ اشتراک لنک مل جائے گا۔
  • آپ اپنے کمپیوٹر سے ویب سائٹ میں تبدیلی کر سکیں گے۔
  • GitHub پر نئی تبدیلی Push ہوتے ہی Vercel ویب سائٹ کو خودکار طور پر اپڈیٹ کر دے گا۔
  • ہر تبدیلی کے بعد مکمل پروجیکٹ دوبارہ اپلوڈ نہیں کرنا پڑے گا۔

لوکل اور آن لائن ویب سائٹ میں کیا فرق ہے؟

جب آپ Antigravity یا کسی دوسرے Coding Tool سے ویب سائٹ بناتے ہیں تو اس کی تمام فائلیں آپ کے کمپیوٹر کے کسی فولڈر میں محفوظ ہوتی ہیں۔

مثلاً:

Desktop
└── Qamar Academy
    ├── index.html
    ├── style.css
    └── script.js

اس مرحلے پر ویب سائٹ صرف آپ کے کمپیوٹر پر موجود ہوتی ہے۔ دوسرے لوگ اسے انٹرنیٹ پر نہیں دیکھ سکتے۔

ویب سائٹ کو دوسروں کے لیے دستیاب کرنے کے لیے اسے کسی Hosting Platform پر پبلش کرنا ضروری ہوتا ہے۔

اس ٹیوٹوریل میں ہم دو پلیٹ فارم استعمال کریں گے:

  1. GitHub — ویب سائٹ کی فائلیں اور تبدیلیوں کا ریکارڈ محفوظ کرنے کے لیے
  2. Vercel — ویب سائٹ کو انٹرنیٹ پر پبلش کرنے کے لیے

اس پورے طریقۂ کار کو آسان الفاظ میں سمجھیں

ہماری ویب سائٹ کا سفر اس طرح ہوگا:

آپ کا کمپیوٹر
      ↓
GitHub Repository
      ↓
Vercel
      ↓
آن لائن ویب سائٹ

بعد میں جب بھی آپ اپنے کمپیوٹر پر ویب سائٹ میں کوئی تبدیلی کریں گے تو عمل کچھ اس طرح ہوگا:

کمپیوٹر پر تبدیلی
      ↓
GitHub پر Push
      ↓
Vercel پر خودکار Deployment
      ↓
آن لائن ویب سائٹ اپڈیٹ

پہلا مرحلہ: کمپیوٹر پر ویب سائٹ کا پروجیکٹ بنائیں

سب سے پہلے اپنے کمپیوٹر پر ایک نیا فولڈر بنائیں۔

مثلاً:

Qamar Academy

اب Antigravity یا اپنے Coding Tool میں اس فولڈر کو پروجیکٹ کے طور پر کھولیں۔

عمومی طریقہ یہ ہوگا:

  1. File کے آپشن پر کلک کریں۔
  2. Create Project یا Open Folder منتخب کریں۔
  3. Desktop منتخب کریں۔
  4. نیا فولڈر بنائیں۔
  5. فولڈر کو مناسب نام دیں۔
  6. اسی فولڈر میں ویب سائٹ تیار کروائیں۔

مثال کے طور پر AI Tool کو یہ Prompt دیا جا سکتا ہے:

Create a modern and responsive English website for a computer academy.
Include a hero section, courses, about section, contact section and footer.

AI Tool ویب سائٹ کی ضروری فائلیں تیار کر دے گا، مثلاً:

  • index.html
  • style.css
  • script.js

ویب سائٹ کو اپنے Browser میں کھول کر پہلے یہ تسلی کر لیں کہ وہ درست کام کر رہی ہے۔

دوسرا مرحلہ: GitHub اکاؤنٹ بنائیں

GitHub ایک ایسا پلیٹ فارم ہے جہاں Developers اپنے Code اور Projects محفوظ کرتے ہیں۔

GitHub استعمال کرنے کے لیے:

  1. GitHub کی ویب سائٹ کھولیں۔
  2. نیا اکاؤنٹ بنائیں یا موجودہ اکاؤنٹ میں Sign In کریں۔
  3. اکاؤنٹ بناتے وقت وہی Email استعمال کریں جس تک آپ کی رسائی موجود ہو۔

اکاؤنٹ بننے کے بعد آپ اپنی ویب سائٹ کے لیے ایک نیا Repository بنائیں گے۔

تیسرا مرحلہ: نیا GitHub Repository بنائیں

GitHub میں لاگ اِن ہونے کے بعد:

  1. اوپر موجود New یا New Repository کے بٹن پر کلک کریں۔
  2. Repository کا نام لکھیں۔

مثلاً:

qamar-academy
  1. Repository کو Public یا Private منتخب کریں۔
  2. Create Repository پر کلک کریں۔

اگر آپ Vercel کے ذریعے ویب سائٹ پبلش کرنا چاہتے ہیں تو Public اور Private دونوں Repository استعمال کی جا سکتی ہیں، بشرطیکہ Vercel کو Repository تک اجازت حاصل ہو۔

چوتھا مرحلہ: ویب سائٹ کی فائلیں GitHub پر اپلوڈ کریں

Repository بننے کے بعد GitHub میں فائل اپلوڈ کرنے کا آپشن نظر آئے گا۔

آپ دو طریقوں سے فائلیں اپلوڈ کر سکتے ہیں۔

طریقہ نمبر 1: فائلیں منتخب کرکے اپلوڈ کرنا

آپ Upload Files پر کلک کرکے فائلیں منتخب کر سکتے ہیں۔

لیکن بعض اوقات پورا فولڈر منتخب کرتے ہوئے اندرونی فائلیں، Subfolders یا Assets درست طریقے سے اپلوڈ نہیں ہوتے۔

طریقہ نمبر 2: Drag and Drop

زیادہ آسان طریقہ یہ ہے کہ:

  1. اپنے کمپیوٹر میں ویب سائٹ کا فولڈر کھولیں۔
  2. فولڈر کے اندر موجود تمام فائلیں منتخب کریں۔
  3. GitHub کی Upload Screen کھولیں۔
  4. تمام فائلیں Drag کرکے GitHub کے Upload Area میں Drop کر دیں۔

اہم بات یہ ہے کہ صرف بیرونی فولڈر اپلوڈ کرنے کے بجائے اس کے اندر موجود اصل فائلیں منتخب کی جائیں۔

مثلاً GitHub Repository کے مرکزی حصے میں یہ فائل موجود ہونی چاہیے:

index.html

اس کے ساتھ دیگر فائلیں بھی موجود ہوں:

style.css
script.js
images
assets

فائلیں اپلوڈ ہونے کے بعد نیچے Commit کا سیکشن آئے گا۔

Commit Message میں لکھیں:

Initial website upload

اس کے بعد:

Commit Changes

پر کلک کریں۔

اب آپ کا پروجیکٹ GitHub پر محفوظ ہو چکا ہے۔

پانچواں مرحلہ: Vercel پر اکاؤنٹ بنائیں

Vercel ویب سائٹس اور Web Applications کو آن لائن Deploy کرنے کا ایک معروف پلیٹ فارم ہے۔

Vercel پر جانے کے بعد:

  1. Sign Up یا Log In پر کلک کریں۔
  2. Continue with GitHub منتخب کریں۔
  3. GitHub سے Login کریں۔
  4. Vercel کو اپنی GitHub Repositories تک مطلوبہ اجازت دیں۔

یہاں Google کے بجائے GitHub کے ذریعے Login کرنا زیادہ مناسب ہے کیونکہ ہمارا پروجیکٹ GitHub Repository سے Import ہونا ہے۔

چھٹا مرحلہ: GitHub پروجیکٹ کو Vercel میں Import کریں

Vercel Dashboard کھلنے کے بعد:

  1. Add New پر کلک کریں۔
  2. Project منتخب کریں۔
  3. آپ کی GitHub Repositories کی فہرست ظاہر ہوگی۔
  4. اپنی مطلوبہ Repository تلاش کریں۔

مثلاً:

qamar-academy
  1. اس کے سامنے موجود Import کے بٹن پر کلک کریں۔

اب Vercel پروجیکٹ کی Deployment Settings دکھائے گا۔

سادہ HTML، CSS اور JavaScript ویب سائٹ کے لیے عموماً کسی خاص Setting کو تبدیل کرنے کی ضرورت نہیں ہوتی۔

صرف:

Deploy

پر کلک کریں۔

ساتواں مرحلہ: ویب سائٹ کا آن لائن لنک حاصل کریں

Deployment مکمل ہونے کے بعد Vercel آپ کو ویب سائٹ کا آن لائن لنک فراہم کرے گا۔

لنک کچھ اس طرح ہو سکتا ہے:

https://qamar-academy.vercel.app

اب آپ یہ لنک:

  • اپنے طلبہ کو بھیج سکتے ہیں۔
  • WhatsApp پر شیئر کر سکتے ہیں۔
  • Facebook پر پوسٹ کر سکتے ہیں۔
  • Client کو دکھا سکتے ہیں۔
  • اپنی Portfolio Website میں شامل کر سکتے ہیں۔

اس مرحلے پر آپ کی لوکل ویب سائٹ کامیابی سے انٹرنیٹ پر پبلش ہو چکی ہے۔

GitHub کو درمیان میں استعمال کرنے کی ضرورت کیوں ہے؟

ایک اہم سوال یہ ہے کہ ویب سائٹ کو براہِ راست Vercel پر اپلوڈ کیوں نہ کر دیا جائے؟

براہِ راست اپلوڈ سے ویب سائٹ پبلش تو ہو سکتی ہے، لیکن بعد میں تبدیلیاں منظم انداز میں کرنا مشکل ہو جاتا ہے۔

فرض کریں آپ نے ویب سائٹ کا Footer تبدیل کرنا ہے۔

اگر ویب سائٹ براہِ راست Upload کی گئی ہو تو ممکن ہے آپ کو:

  1. کمپیوٹر پر تبدیلی کرنی پڑے۔
  2. پرانا Deployment حذف کرنا پڑے۔
  3. پورا پروجیکٹ دوبارہ اپلوڈ کرنا پڑے۔
  4. دوبارہ Deployment مکمل ہونے کا انتظار کرنا پڑے۔

لیکن GitHub اور Vercel کے باہمی رابطے کی صورت میں:

  1. آپ کمپیوٹر پر تبدیلی کریں گے۔
  2. نئی تبدیلی GitHub پر Push کریں گے۔
  3. Vercel خودکار طور پر تبدیلی پہچان لے گا۔
  4. ویب سائٹ دوبارہ Deploy ہو جائے گی۔
  5. وہی پرانا Link نئی تبدیلی کے ساتھ کام کرتا رہے گا۔

اسی وجہ سے GitHub استعمال کرنا زیادہ پروفیشنل اور فائدہ مند طریقہ ہے۔

آٹھواں مرحلہ: GitHub Repository کا لنک حاصل کریں

اب ہمیں اپنے لوکل پروجیکٹ کو GitHub Repository کے ساتھ Connect کرنا ہے۔

GitHub میں اپنی Repository کھولیں۔

اس کے بعد:

  1. سبز رنگ کے Code بٹن پر کلک کریں۔
  2. HTTPS منتخب کریں۔
  3. Repository کا Link Copy کریں۔

لنک کچھ اس طرح ہوگا:

https://github.com/username/qamar-academy.git

یہ Link آپ کے لوکل پروجیکٹ کو GitHub Repository سے جوڑنے کے لیے استعمال ہوگا۔

نواں مرحلہ: لوکل پروجیکٹ کو GitHub کے ساتھ Connect کریں

اپنے Coding Tool میں ویب سائٹ کا وہی فولڈر کھولیں جو آپ نے کمپیوٹر پر بنایا تھا۔

اب AI Tool یا Terminal کی مدد سے پروجیکٹ کو GitHub Repository کے ساتھ Connect کریں۔

AI Tool کو یہ ہدایت دی جا سکتی ہے:

Connect this local project with the following GitHub repository:

https://github.com/username/qamar-academy.git

Commit the existing files and push them to the main branch.

اگر Terminal استعمال کر رہے ہوں تو عمومی Commands یہ ہو سکتی ہیں:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/username/qamar-academy.git
git push -u origin main

اگر Repository پہلے سے فائلوں پر مشتمل ہو تو Commands پروجیکٹ کی حالت کے مطابق مختلف ہو سکتی ہیں۔ اس لیے کسی بھی Command کو چلانے سے پہلے Repository اور لوکل فولڈر کی موجودہ حالت دیکھنا ضروری ہے۔

دسویں مرحلہ: ویب سائٹ میں تبدیلی کریں

اب مثال کے طور پر ویب سائٹ کے Footer کا رنگ تبدیل کرتے ہیں۔

فرض کریں Footer پہلے Dark Grey ہے اور آپ اسے Red کرنا چاہتے ہیں۔

AI Coding Tool کو یہ Prompt دیں:

Change the footer background colour to red. Keep the remaining website unchanged. After making the change, commit it and push it to the connected GitHub repository.

AI Tool فائل میں تبدیلی کرے گا اور اسے GitHub پر Push کر دے گا۔

GitHub Repository میں نئی Commit نظر آ سکتی ہے:

Changed footer background colour

گیارہواں مرحلہ: Vercel پر خودکار تبدیلی دیکھیں

چونکہ Vercel پہلے ہی GitHub Repository کے ساتھ منسلک ہے، اس لیے GitHub پر نئی تبدیلی Push ہوتے ہی Vercel خودکار Deployment شروع کر دے گا۔

Vercel Dashboard میں نئی Deployment کا Status نظر آئے گا۔

چند لمحات بعد اپنی ویب سائٹ کا وہی Link کھولیں:

https://qamar-academy.vercel.app

صفحہ Refresh کرنے پر Footer کا نیا رنگ نظر آئے گا۔

آپ کو:

  • ویب سائٹ دوبارہ Import نہیں کرنی پڑی۔
  • نیا Vercel Project نہیں بنانا پڑا۔
  • پورا فولڈر دوبارہ Upload نہیں کرنا پڑا۔
  • ویب سائٹ کا Link تبدیل نہیں ہوا۔

صرف GitHub پر Code Push کیا گیا اور Vercel نے ویب سائٹ خودکار طور پر اپڈیٹ کر دی۔

Commit، Push اور Deploy کا مطلب

ابتدا میں یہ تین اصطلاحات مشکل محسوس ہو سکتی ہیں، لیکن ان کا مطلب بہت آسان ہے۔

Commit

Commit کا مطلب ہے اپنی تبدیلی کو ایک نام اور ریکارڈ کے ساتھ محفوظ کرنا۔

مثلاً:

Updated homepage heading

یا:

Changed footer colour

Push

Push کا مطلب ہے اپنے کمپیوٹر کی نئی تبدیلی GitHub پر بھیجنا۔

Deploy

Deploy کا مطلب ہے Code کو ایک حقیقی آن لائن ویب سائٹ کی صورت میں پبلش کرنا۔

اس طرح:

Commit = تبدیلی محفوظ کرنا
Push = تبدیلی GitHub پر بھیجنا
Deploy = تبدیلی آن لائن ویب سائٹ پر دکھانا

GitHub استعمال کرنے کے اہم فوائد

1. ویب سائٹ کی Backup Copy محفوظ رہتی ہے

اگر آپ کے کمپیوٹر سے پروجیکٹ Delete ہو جائے تو Code GitHub پر موجود رہتا ہے۔

2. ہر تبدیلی کا ریکارڈ محفوظ ہوتا ہے

آپ دیکھ سکتے ہیں کہ:

  • کون سی تبدیلی کی گئی؟
  • کب کی گئی؟
  • کس فائل میں کی گئی؟
  • کس شخص نے کی؟

3. پرانی تبدیلی بحال کی جا سکتی ہے

اگر نئی تبدیلی سے ویب سائٹ خراب ہو جائے تو پرانے Version کی طرف واپس جانا ممکن ہوتا ہے۔

4. ٹیم کے ساتھ کام کرنا آسان ہوتا ہے

ایک سے زیادہ Developers ایک ہی Project پر کام کر سکتے ہیں۔

5. Vercel کے ساتھ خودکار Deployment ہوتی ہے

ہر Push کے بعد ویب سائٹ خود بخود Update ہو جاتی ہے۔

عام غلطیاں اور ان کا حل

Repository کے اندر ایک اضافی فولڈر بن جانا

کبھی ایسا ہوتا ہے کہ فائلیں Repository کے مرکزی حصے کے بجائے ایک اضافی Folder کے اندر چلی جاتی ہیں۔

غلط Structure:

qamar-academy
└── qamar-academy
    ├── index.html
    ├── style.css
    └── script.js

بہتر Structure:

qamar-academy
├── index.html
├── style.css
└── script.js

سادہ HTML ویب سائٹ میں index.html کا Repository کے Root میں ہونا بہتر ہے۔

خالی فولڈر اپلوڈ کرنے کی کوشش

Git عام طور پر مکمل طور پر خالی فولڈر محفوظ نہیں کرتا۔ فولڈر کے اندر کم از کم ایک فائل موجود ہونی چاہیے۔

Google کے ذریعے Vercel Login کرنا

Google سے Login ممکن ہے، لیکن GitHub Project Import کرنے کے لیے GitHub Account کو بعد میں Connect کرنا پڑے گا۔

آسان طریقہ یہ ہے کہ ابتدا ہی میں Continue with GitHub استعمال کریں۔

غلط Repository Link استعمال کرنا

Repository کے Page کا عام Browser Link اور Clone Link مختلف مقاصد کے لیے استعمال ہو سکتے ہیں۔

لوکل Project Connect کرنے کے لیے عموماً HTTPS Clone Link استعمال کیا جاتا ہے:

https://github.com/username/repository-name.git

تبدیلی کے بعد Push نہ کرنا

صرف کمپیوٹر پر فائل تبدیل کرنے سے آن لائن ویب سائٹ Update نہیں ہوگی۔

تبدیلی کو:

  1. Save
  2. Commit
  3. Push

کرنا ضروری ہے۔

Vercel Deployment ناکام ہونا

Deployment ناکام ہونے کی چند عام وجوہات یہ ہو سکتی ہیں:

  • index.html غلط جگہ موجود ہے۔
  • Build Command غلط ہے۔
  • Project Framework غلط منتخب ہوا ہے۔
  • کسی فائل کا نام غلط لکھا گیا ہے۔
  • JavaScript میں Error موجود ہے۔
  • مطلوبہ Environment Variables شامل نہیں ہیں۔

Vercel کے Deployment Logs میں اصل Error دیکھی جا سکتی ہے۔

سادہ ویب سائٹ اور مکمل Management System میں فرق

HTML، CSS اور JavaScript پر مشتمل Static Website آسانی سے Vercel پر پبلش ہو سکتی ہے۔

لیکن اگر ویب سائٹ میں یہ چیزیں موجود ہوں:

  • User Login
  • Admin Panel
  • Database
  • Form Data Storage
  • Online Payments
  • File Upload
  • API Keys
  • Membership System

تو صرف فائلیں اپلوڈ کرنا کافی نہیں ہوگا۔

ایسے پروجیکٹ کے لیے Database، Environment Variables اور Backend Services بھی Configure کرنا ہوں گی۔

مثلاً:

  • Supabase
  • Firebase
  • PostgreSQL
  • MongoDB
  • Serverless Functions
  • External APIs

اس کے باوجود GitHub اور Vercel کا بنیادی Workflow تقریباً وہی رہتا ہے۔

مکمل Workflow کا خلاصہ

اپنی ویب سائٹ کو آن لائن پبلش اور خودکار طور پر اپڈیٹ کرنے کے لیے یہ Steps مکمل کریں:

  1. کمپیوٹر پر ویب سائٹ کا فولڈر بنائیں۔
  2. Antigravity یا کسی Coding Tool سے ویب سائٹ تیار کریں۔
  3. GitHub اکاؤنٹ بنائیں۔
  4. نیا Repository بنائیں۔
  5. ویب سائٹ کی تمام فائلیں GitHub پر اپلوڈ کریں۔
  6. Vercel میں GitHub کے ذریعے Login کریں۔
  7. GitHub Repository کو Import کریں۔
  8. Deploy پر کلک کریں۔
  9. ویب سائٹ کا آن لائن Link حاصل کریں۔
  10. GitHub Repository کا HTTPS Link لوکل پروجیکٹ کے ساتھ Connect کریں۔
  11. کمپیوٹر پر مطلوبہ تبدیلی کریں۔
  12. تبدیلی Commit اور Push کریں۔
  13. Vercel کو ویب سائٹ خودکار طور پر Update کرنے دیں۔

نتیجہ

ویب سائٹ تیار کرنا صرف پہلا مرحلہ ہے۔ اصل مہارت یہ ہے کہ اسے درست اور منظم طریقے سے انٹرنیٹ پر پبلش کیا جائے اور مستقبل کی تبدیلیوں کے لیے ایک قابلِ اعتماد Workflow بنایا جائے۔

GitHub آپ کے Code کو محفوظ کرتا ہے، تبدیلیوں کا ریکارڈ رکھتا ہے اور لوکل پروجیکٹ کو آن لائن Repository کے ساتھ جوڑتا ہے۔

Vercel اسی Repository کو ایک حقیقی ویب سائٹ میں تبدیل کرتا ہے اور ہر نئی Push کے بعد اسے خودکار طور پر Update کر دیتا ہے۔

اس پورے نظام کا بنیادی اصول یہ ہے:

لوکل پروجیکٹ میں تبدیلی کریں،
GitHub پر Push کریں،
اور Vercel کو خودکار Deployment کرنے دیں۔

ایک مرتبہ یہ Workflow درست طریقے سے قائم ہو جائے تو ویب سائٹ کو بار بار دستی طور پر اپلوڈ کرنے کی ضرورت ختم ہو جاتی ہے۔

متعلقہ خبریں

تبصرہ کریں