چگونه پروژه خود را میزبانی کنیم روی GitHub – با مثال توضیح داده شده است

هفت سال پیش، من سفر خود را به سمت توسعه وب با HTML و CSS آغاز کردم. به محض اینکه به جاوا اسکریپت دست یافتم، اولین وب سایت خود را ساختم. هیجان بسیار زیاد بود و من می خواستم آن را با دوستانم و جهان به اشتراک بگذارم.

مانند بسیاری از مبتدیان، من شروع به تحقیق در مورد پلتفرم های هاست کردم، فقط برای اینکه از هزینه دامنه ها و هاستینگ مطلع شوم. آن زمان بود که Git و GitHub را کشف کردم و متوجه شدم که می‌توانم پروژه‌هایم را بدون صرف یک سکه به اشتراک بگذارم.

اگر در یک قایق هستید، در مورد Git و GitHub و روش به اشتراک گذاری پروژه های خود مطمئن نیستید، این مقاله برای شما مناسب است. این راهنمایی است که ای کاش هفت سال پیش داشتم.

برای نشان دادن قدرت Git و GitHub، از یک پروژه دنیای واقعی به عنوان مثال استفاده خواهیم کرد. بیایید پروژه “برنامه ردیاب آدرس IP” را از این آموزش freeCodeCamp بگیریم. شما می توانید کد منبع پروژه را از اینجا دانلود کنید.

اگر این آموزش را دنبال کرده اید و پروژه را ساخته اید، یا اگر پروژه ای دارید که می خواهید به اشتراک بگذارید، این مقاله برای شما مناسب است. ما شما را از طریق مراحل به host پروژه شما روی GitHub، آن را در دسترس جهانیان قرار می دهد.

فهرست مطالب

1. مخاطب
2. دانش پیش نیاز
3. شروع کار با Git و GitHub
   1. گیت چیست؟
   2. GitHub چیست؟
4. روش راه اندازی Git و GitHub
   1. روش نصب Git روی ویندوز
   2. روش نصب Git روی macOS
   3. روش نصب Git روی لینوکس
   4. چگونه یک حساب GitHub ایجاد کنیم
   5. روش پیکربندی Git
5. چگونه یک مخزن Git را راه اندازی کنیم
   1. مرحله 1: پروژه خود را دانلود و باز کنید
   2. مرحله 2: پروژه را باز کنید VS Code
   3. مرحله 3: ترمینال را باز کنید VS Code
   4. مرحله 4: یک مخزن Git را راه اندازی کنید
6. روش ردیابی تغییرات با Git
   1. آماده سازی تغییرات با git add
      1. افزودن فایل های فردی
      2. افزودن همه تغییرات به یکباره
   2. ذخیره تغییرات با git commit
7. چگونه پروژه خود را به GitHub فشار دهید
   1. مرحله 1: یک مخزن جدید ایجاد کنید روی GitHub
   2. مرحله 2: خود را پیوند دهید Local مخزن GitHub
   3. مرحله 3: خود را فشار دهید Local تغییرات در GitHub
   4. مرحله 4: مخزن خود را تأیید کنید روی GitHub
8. چگونه پروژه خود را میزبانی کنیم روی صفحات GitHub
   1. صفحات GitHub چیست؟
   2. روش فعال کردن صفحات GitHub
   3. چگونه URL صفحات GitHub خود را دریافت کنیم
   4. چگونه سایت صفحات GitHub خود را به روز کنیم
9. نتیجه گیری

مخاطب

این راهنما برای توسعه دهندگان مبتدی است که شروع به یادگیری HTML، CSS و جاوا اسکریپت کرده اند و می خواهند یاد بگیرند که چگونه پروژه های خود را با استفاده از Git و GitHub به اشتراک بگذارند.

دانش پیش نیاز

قبل از غواصی، مطمئن شوید که با موارد زیر آشنا هستید:

• اساسی command-line عملیات
• اصول HTML، CSS و جاوا اسکریپت.
• یک ویرایشگر متن مانند VS Code.

شروع کار با Git و GitHub

من قصد ندارم با تفاوت های بین Git و GitHub شما را خسته کنم. من مطمئن هستم که منابع زیادی در وب جهانی وجود دارد که این موضوع را پوشش می دهد، اما از نقطه نظر مبتدیان، اینها چیستند:

گیت چیست؟

Git ابزاری است که به شما کمک می کند تمام تغییراتی که در کد پروژه خود ایجاد می کنید را پیگیری کنید. تصور کنید یک وب سایت در مورد گربه ها بسازید. اگر عنوان وب سایت را از “حقایق گربه” به “همه چیز درباره گربه ها” تغییر دهید، Git این تغییر را به خاطر می آورد. اگر بعداً تصمیم گرفتید که “Cat Facts” را ترجیح می دهید، Git به شما امکان می دهد به راحتی به آن نسخه برگردید.

مانند این است که از هر ویرایش، اضافه و حذفی که در پروژه خود انجام می دهید، یک رکورد داشته باشید، بنابراین همیشه می توانید نسخه های قبلی را مجدداً مشاهده کنید و با اطمینان تغییرات ایجاد کنید.

GitHub چیست؟

GitHub مانند یک اسکرپ بوک مبتنی بر ابر برای کد شما است. این یک رکورد آنلاین است که در آن هر ویرایش، اضافه و حذفی را که در پروژه خود انجام می دهید ذخیره می کنید، بنابراین می توانید از هر کجا به آن دسترسی داشته باشید و آن را با دیگران به اشتراک بگذارید.

تصور کنید که یک کابینت بایگانی دیجیتال داشته باشید که در آن بتوانید نسخه های مختلف وب سایت خود را ذخیره و مدیریت کنید. می توانید از دوستان دعوت کنید تا پروژه شما را ببینند و حتی در انجام پروژه به شما کمک کنند و همکاری را آسان می کند. GitHub تغییرات را ردیابی می کند و همه چیز را مرتب نگه می دارد، بنابراین اگر مشکلی پیش آمد، همیشه می توانید به نسخه قبلی برگردید.

روش راه اندازی Git و GitHub

اکنون که می دانیم Git و GitHub چیست، بیایید آنها را راه اندازی کنیم روی کامپیوتر شما این دستورالعمل های گام به گام را دنبال کنید:

روش نصب Git روی ویندوز

می توانید نصب کننده Git را از اینجا دانلود کنید.

نصب کننده را اجرا کنید و با حفظ تنظیمات پیش فرض، دستورالعمل های راه اندازی را دنبال کنید.

روش نصب Git روی macOS

ترمینال را باز کنید روی مک شما می توانید آن را در Applications > Utilities پیدا کنید یا از Spotlight برای جستجوی آن استفاده کنید.

Git را با استفاده از Homebrew با کپی و چسباندن دستورات زیر نصب کنید:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install git

خروجی:

==> Downloading https://github.com/Homebrew/brew/tarballs/...
==> Installing git
==> Pouring git-2.43.0.mojave.bottle.tar.gz
🍺  /usr/local/Cellar/git/2.30.1: 1,434 files, 43.8MB

روش نصب Git روی لینوکس

ترمینال را باز کنید روی ماشین لینوکس شما سپس از مدیر بسته توزیع خود برای نصب Git استفاده کنید.

به عنوان مثال، روی اوبونتو دستورات زیر را کپی و پیست کنید:

sudo apt-get update
sudo apt-get install git

خروجی:

Reading package lists... Done
Building dependency tree
Reading state information... Done
The following additional packages will be installed:
git-man liberror-perl
Suggested packages:
git-daemon-run git-daemon-sysvinit git-doc git-el git-email git-gui gitk
gitweb git-mediawiki git-arch git-cvs git-svn git-hg
The following NEW packages will be installed:
git git-man liberror-perl
0 upgraded, 3 newly installed, 0 to remove and 0 not upgraded.
Need to get 7,841 kB of archives.
After this operation, 43.8 MB of additional disk space will be used.

برای تأیید نصب، ترمینال را باز کنید (اگر قبلاً باز نشده باشد) و دستور زیر را برای تأیید نصب تایپ کنید:

git --version

خروجی:

git version 2.43.0

باید نسخه Git نصب شده را مشاهده کنید.

چگونه یک حساب GitHub ایجاد کنیم

• به GitHub بروید و کلیک کنید روی “ثبت نام کنید.”
• دستورالعمل ها را برای ایجاد حساب کاربری خود دنبال کنید، نام کاربری و رمز عبور را انتخاب کنید و ایمیل خود را تأیید کنید.
• پس از راه اندازی حساب کاربری خود، نمایه خود را با بیوگرافی، تصویر نمایه و پیوندهایی به وب سایت شخصی یا رسانه های اجتماعی خود سفارشی کنید.

روش پیکربندی Git

ترمینال را باز کنید و Git را با همان نام کاربری و ایمیل حساب GitHub خود پیکربندی کنید:

git config --global user.name "Your GitHub Username"
git config --global user.email "your.email@example.com"

هیچ خروجی نمایش داده نمی شود، اما Git اعتبار شما را برای استفاده در آینده ذخیره می کند.

چگونه یک مخزن Git را راه اندازی کنیم

اکنون که Git و GitHub را راه اندازی کرده اید، بیایید با مقداردهی اولیه Git در یک پروژه شروع کنیم. شما می توانید از هر پروژه دلخواه خود استفاده کنید یا با استفاده از پروژه “IP Address Tracker” مثال ما را دنبال کنید.

مرحله 1: پروژه خود را دانلود و باز کنید

کد منبع پروژه انتخابی خود را دانلود کنید یا از پروژه “ردیاب آدرس IP” از این لینک استفاده کنید. فایل ZIP دانلود شده را در مکانی استخراج کنید روی کامپیوتر شما این یک مثال عینی برای نشان دادن مفاهیم Git ارائه می دهد.

مرحله 2: پروژه را باز کنید VS Code

باز کنید Visual Studio Code و کلیک کنید روی “File” > “Open Folder” را انتخاب کنید تا پوشه ای را که در آن پروژه را استخراج کرده اید انتخاب کنید.

مرحله 3: ترمینال را باز کنید VS Code

کلیک کنید روی “Terminal” > “New Terminal” برای باز کردن terminal در VS Code، جایی که با استفاده از دستورات با Git تعامل خواهیم داشت.

مرحله 4: یک مخزن Git را راه اندازی کنید

با اجرای دستور زیر یک مخزن Git را راه اندازی کنید:

git init

خروجی:

Initialized empty Git repository in /Users/spruceemmanuel/Documents/IP Address Tracker/.git/

این دستور یک پوشه مخفی جدید به نام ایجاد می کند .git در پوشه پروژه شما، که تغییرات فایل های پروژه ما را ردیابی می کند. وقتی می دوی git init، Git فایل ها و دایرکتوری های لازم را برای شروع نسخه سازی پروژه ما تنظیم می کند. این شامل:

• الف .git پوشه ای که تمام ابرداده ها را برای مخزن شما ذخیره می کند
• یک شاخه اصلی که شاخه پیش فرض مخزن شما است
• یک اشاره گر HEAD، که به شاخه فعلی (در این مورد، اصلی) اشاره می کند.

با مقداردهی اولیه یک مخزن Git، به Git می‌گویید که ردیابی تغییرات فایل‌های پروژه شما را آغاز کند. این به شما امکان می دهد کد خود را نسخه کنید، با دیگران همکاری کنید و سابقه تغییرات را حفظ کنید.

روش ردیابی تغییرات با Git

اکنون که Git را راه اندازی کرده ایم، آماده است تا تغییرات پروژه ما را پیگیری کند.

هشدارهای Git در فایل‌های ما تغییر می‌کند، اما قبل از اینکه بتوانیم این تغییرات را ذخیره کنیم، باید به Git بگوییم که این کار را انجام دهد.

آماده سازی تغییرات با git add

برای اینکه تغییرات خود را آماده ذخیره کنیم، از git add فرمان در اینجا روش کار آن آمده است:

افزودن فایل های فردی

اگر می‌خواهید فایل‌های خاصی مانند index.html، script.js یا styles.css اضافه کنید، می‌توانید از git add و به دنبال آن نام فایل استفاده کنید. به عنوان مثال:

git add index.html

افزودن همه تغییرات به یکباره

اگر می‌خواهید همه فایل‌های اصلاح‌شده در پروژه را به قسمت مرحله‌بندی اضافه کنید، از:

git add .

ذخیره تغییرات با git commit

هنگامی که از git add استفاده کردیم، از git commit برای ذخیره تغییرات خود استفاده می کنیم. در اینجا روش انجام آن آمده است:

git commit -m "Describe your changes here"

به جای «تغییرات خود را در اینجا شرح دهید» توضیح مختصری از آنچه تغییر داده‌اید، کنید. به عنوان مثال:

git commit -m "Update index.html with new content"

خروجی:

[master (root-commit) be9b1cd] Update index.html with new content
3 files changed, 386 insertions(+)
create mode 100644 index.html
create mode 100644 script.js
create mode 100644 styles.css

با استفاده از git add و git commit، به Git دستور می دهید نسخه های خاصی از پروژه شما را ردیابی و ذخیره کند. این به شما کمک می کند تا تغییرات را مدیریت کنید، با دیگران همکاری کنید و سابقه پیشرفت خود را حفظ کنید.

چگونه پروژه خود را به GitHub فشار دهید

اکنون که تغییرات خود را به صورت محلی ردیابی و انجام داده ایم، زمان آن رسیده است که پروژه خود را در GitHub آپلود کنیم تا بتوانیم آن را با جهان به اشتراک بگذاریم.

مرحله 1: یک مخزن جدید ایجاد کنید روی GitHub

• به GitHub بروید و وارد حساب کاربری خود شوید.
• روی نماد “+” در گوشه سمت راست بالا کلیک کنید و “مخزن جدید” را انتخاب کنید.

• نام مخزن را پر کنید (به عنوان مثال: “ip-address-tracker”)، و در صورت تمایل یک توضیح اضافه کنید.
• انتخاب کنید که مخزن عمومی باشد یا خصوصی.
• مخزن را با a مقداردهی اولیه نکنید README، gitignore، یا مجوز (از آنجایی که ما قبلاً یک مخزن محلی راه اندازی کرده ایم).
• روی “ایجاد مخزن” کلیک کنید.

مرحله 2: خود را پیوند دهید Local مخزن GitHub

برای اتصال مخزن محلی خود با مخزن جدید GitHub، باید یک منبع راه دور اضافه کنید. این مراحل را دنبال کنید:

• URL مخزن جدید GitHub خود را کپی کنید. باید چیزی شبیه به این باشد: https://github.com/yourusername/ip-address-tracker.git
• ترمینال را باز کنید Visual Studio Code و دستور زیر را اجرا کنید:

git branch -M main
git remote add origin https://github.com/yourusername/ip-address-tracker.git

مرحله 3: خود را فشار دهید Local تغییرات در GitHub

اکنون، تعهدات محلی خود را به مخزن GitHub فشار دهید:

git push -u origin main

خروجی:

Enumerating objects: 8, done.
Counting objects: 100% (8/8), done.
Compressing objects: 100% (4/4), done.
Writing objects: 100% (6/6), 645 bytes | 645.00 KiB/s, done.
Total 6 (delta 2), reused 0 (delta 0)
To https://github.com/yourusername/ip-address-tracker.git
* [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

مرحله 4: مخزن خود را تأیید کنید روی GitHub

به مخزن GitHub خود برگردید page. شما باید تمام فایل های خود را ببینید و تاریخچه commit را به صورت آنلاین در دسترس قرار دهید.

چگونه پروژه خود را میزبانی کنیم روی صفحات GitHub

اکنون که پروژه شما با Git مقداردهی اولیه شده و به GitHub منتقل شده است، بیایید host آن را روی صفحات GitHub. GitHub Pages یک سرویس رایگان است که به شما امکان می دهد پروژه های وب را مستقیماً از یک مخزن GitHub منتشر کنید.

صفحات GitHub چیست؟

صفحات GitHub مخزن GitHub شما را به یک وب سایت تبدیل می کند. این یک راه آسان برای نمایش پروژه های خود بدون نیاز به یک سرویس میزبانی جداگانه است. شما می توانید وب سایت های ثابت را مستقیماً از مخازن خود ایجاد کنید.

روش فعال کردن صفحات GitHub

• در یک مرورگر وب به مخزن GitHub خود بروید.
• کلیک کنید روی برگه “تنظیمات”.
• به بخش “صفحات” در منوی سمت چپ بروید.
• تحت “Source”شاخه ای را که می خواهید از آن منتشر کنید (معمولا اصلی یا اصلی) انتخاب کنید و آن را انتخاب کنید root پوشه

• روی “ذخیره” کلیک کنید.

چگونه URL صفحات GitHub خود را دریافت کنیم

پس از فعال کردن صفحات گیت هاب، گیت هاب آدرس اینترنتی را در اختیار شما قرار می دهد که سایت شما در آن منتشر شده است. معمولاً از این فرمت پیروی می کند:

https://<username>.github.io/<repository-name>

مرورگر خود را باز کنید و URL را برای مشاهده وب سایت زنده خود جایگذاری کنید.

چگونه سایت صفحات GitHub خود را به روز کنیم

هر بار که تغییرات را به شاخه انتخاب شده در مخزن خود فشار دهید، GitHub Pages به طور خودکار سایت زنده شما را به روز می کند. در اینجا یک یادآوری سریع است روی چگونه تغییرات را تحت فشار قرار دهیم:

• در فایل های پروژه خود تغییراتی ایجاد کنید.
• تغییرات خود را اضافه و انجام دهید:

git add .
git commit -m "Your commit message"

• تغییرات را به GitHub فشار دهید:

git push origin main

با این مراحل، پروژه خود را با موفقیت میزبانی کرده اید روی صفحات GitHub. تبریک می گویم! پروژه شما اکنون زنده و در دسترس جهانیان است.

نتیجه گیری

همین چند سال پیش، من به جای شما بودم – در مورد ساختن اولین وب سایت خود هیجان زده بودم، اما مطمئن نیستم که چگونه آن را با جهان به اشتراک بگذارم. امروز، شما نه تنها یاد گرفته اید که Git و GitHub چیست، بلکه روش استفاده از آنها را نیز یاد گرفته اید host پروژه خودت

هیجان خود را در زمان اجرای پروژه خود تصور کنید، و می توانید آن را با دوستان، خانواده و جامعه جهانی به اشتراک بگذارید. اکنون Git را راه اندازی کرده اید، یک حساب GitHub ایجاد کرده اید، یک مخزن Git را راه اندازی کرده اید و پروژه خود را میزبانی کرده اید. روی صفحات GitHub. هر مرحله شما را به تبدیل شدن به یک توسعه دهنده با اعتماد به نفس و توانمندتر نزدیک کرده است.

این تازه شروع کار است. Git و GitHub دارای ویژگی های بسیار بیشتری هستند که می توانید آنها را کشف کنید. همانطور که به ساختن و به اشتراک گذاری پروژه ها ادامه می دهید، راه های جدیدی برای همکاری و بهبود گردش کار خود کشف خواهید کرد.

به آزمایش کردن ادامه دهید، به یادگیری ادامه دهید و مهمتر از همه، به کدنویسی ادامه دهید. دنیا منتظر است ببیند در آینده چه چیزی خلق می کنید!

اگر سوالی دارید، در صورت تمایل به من مراجعه کنید روی توییتر در @sprucekhalifaو فراموش نکنید که برای راهنمایی ها و به روز رسانی های بیشتر من را دنبال کنید. کد نویسی مبارک!