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

حالا معمولاً بالا آوردن یک وب‌سایت روی اینترنت یه مقدار هزینه داره، چون باید یه پلن هاستینگ از یک شرکت بخریم.
شرکت‌های هاستینگ کامپیوترهاشون رو ۲۴ ساعته و ۷ روز هفته روشن نگه می‌دارن.
و بعد ما فایل‌های وب‌سایتمون از جمله فایل‌های HTML ،  CSS یا تصاویرمون رو رو براشون می‌فرستیم،
و اون‌ها این فایل‌ها رو روی کامپیوترهایی که همیشه روشن هستن، میزبانی می‌کنن.
به این ترتیب، وب‌سایت ما همیشه برای دنیا در دسترسه.

اما در چارچوب این دوره آموزشی، نمی‌خوام شما همین حالا هیچ هزینه‌ای برای هاستینگ پرداخت کنید. بچه ها
درسته، چون هنوز در حال یادگیری هستید.
خوشبختانه، شرکتی به اسم  GitHub وب‌سایت ما رو به صورت رایگان میزبانی می‌کنه.
پس توی این درس، یاد می‌گیریم چطور یک وب‌سایت رو روی اینترنت منتشر کنیم تا برای همه دنیا قابل مشاهده باشه.

برای این درس، این وب‌سایتی که الان دارید می‌بینید رو ، از قبل ساختم.
می‌تونید این وب‌سایت ساده سه‌صفحه‌ای رو از بخش منابع این درس دانلود کنید.
به این ترتیب، حتی اگه وب‌سایتی ندارید که بخواید منتشرش کنید، می‌تونید همین وب‌سایت کوچیک رو تمرینی روی GitHub منتشر کنید.

در نگاه کلی، هدف اینه که تا پایان این درس، یک آدرس یا دامنه توی نوار آدرس داشته باشید که بتونید اون رو کپی کنید و با دوستان، خانواده، همکاران و کل دنیا به اشتراک بذارید.

همون‌طور که احتمالاً حدس زدید، اولین قدم اینه که یک حساب کاربری رایگان توی GitHub بسازید.
پس توی یک تب جدید مرورگرتون، برید به وب‌سایت GitHub.
آدرسش هست github.com و بعدش ثبت‌نام کنید برای یک حساب رایگان.
نیازی نیست اطلاعات کارت بانکی یا پرداختی وارد کنید.
کاملاً رایگانه.
می‌تونید ویدیو رو متوقف کنید تا ثبت‌نام رو انجام بدید و بعدش که ثبت‌نام کردید، برگردید و ویدیو رو ادامه بدید.

وقتی حساب GitHub ساختید، قدم بعدی اینه که برنامه GitHub Desktop رو دانلود کنید.
می‌تونید با جستجوی عبارت GitHub Desktop توی گوگل پیداش کنید یا مستقیم برید به desktop.github.com.
وقتی وارد این صفحه شدید، می‌بینید که نسخه دانلود برای ویندوز یا مک موجوده.
فقط دانلودش کنید و نصبش کنید.
می‌تونید ویدیو رو متوقف کنید تا دانلود و نصب انجام بشه و بعدش برگردید و ادامه بدید.

وقتی برنامه رو نصب و باز کردید، دفعه اول که بازش می‌کنید، یه چیزی شبیه این ظاهر می‌شه و بیاید با استفاده از این دکمه وارد حساب GitHub بشیم.
وقتی روی این دکمه کلیک می‌کنید، یکی از دو حالت ممکنه اتفاق بیفته:
اگه مرورگری که باهاش حساب ساختید باز بشه، ممکنه خودش شما رو اتوماتیک وارد کنه، که عالیه.
یا ممکنه یک مرورگر دیگه روی کامپیوترتون باز بشه.
مثلاً تفاوت بین Chrome، Firefox، Internet Explorer، Safari و غیره.
اگه توی مرورگر دیگه‌ای باز شد، اشکالی نداره.
فقط با نام کاربری و رمز عبوری که چند دقیقه پیش ساختید، وارد بشید.

بعدش احتمالاً صفحه‌ای می‌بینید که شبیه اینه، و این فقط GitHub داره ازمون می‌پرسه که آیا می‌خوایم به برنامه رسمی GitHub Desktop اجازه دسترسی به حسابمون بدیم یا نه.
و ما کاملاً به این برنامه اعتماد داریم چون توسط تیم رسمی GitHub ساخته شده.
پس پایین صفحه فقط روی دکمه Authorize Desktop یا Authorize کلیک کنید.
و ممکنه ازتون بپرسه که آیا می‌خواید برگردید به برنامه GitHub Desktop، که باید اجازه بدید.

حالا توی برنامه GitHub Desktop، فقط مطمئن بشید که از فیلدهای نام و ایمیل راضی هستید و بعد روی Continue کلیک کنید.
شخصاً دوست ندارم اطلاعات اضافی بفرستم، پس گزینه “ارسال دوره‌ای آمار استفاده” رو غیرفعال می‌کنم و بعد روی Finish کلیک می‌کنم.

خب، حالا در این مرحله، می‌خوایم یک پروژه جدید بسازیم.
در دنیای Git، به پروژه می‌گیم Repository یا مخزن.
پس روی دکمه‌ای کلیک می‌کنیم که نوشته “Create a new repository on your hard drive”.

حالا باید چند فیلد فرم رو پر کنیم.
برای نام مخزن، بیاید اسمش رو بذاریم my-example-site.
می‌تونید هر اسمی که خواستید بذارید، این فقط مثاله.
توضیحات رو می‌تونیم خالی بذاریم.

مسیر محلی خیلی مهمه.
می‌خوام حواستون باشه که این مسیر به کجا اشاره می‌کنه، چون قراره یک پوشه خالی جدید اونجا ساخته بشه.
و بعد باید فایل‌های وب‌سایتمون رو ببریم داخل اون پوشه.
مثلاً روی ویندوز، یک پوشه جدید توی پوشه Documents به نام GitHub میسازم.
بقیه گزینه‌ها خوب به نظر می‌رسن، پس روی دکمه Create Repository کلیک می‌کنیم.

خب، در این مرحله، اولین پروژه یا مخزنمون رو ساختیم.
حالا فقط باید فایل‌های واقعی وب‌سایتمون رو به این پروژه اضافه کنیم.
مثلاً من این وب‌سایت ساده سه‌صفحه‌ای رو دارم، پس می‌خوام فایل‌های HTML، CSS و تصاویر رو اضافه کنم.

قبل از اینکه فایل‌ها رو منتقل کنیم، باید بدونیم که الان کجای کامپیوترمون قرار دارن.
در مورد من، یک پوشه روی دسکتاپ دارم که شامل همین وب‌سایت سه‌صفحه‌ایه.
اما یادتون باشه که شما فایل zip رو اول درس دانلود کردید، پس احتمالاً توی پوشه Downloads هست.

در نگاه کلی، کاری که قراره انجام بدیم اینه:
اینجا پوشه Documents کامپیوتر منه و اینجا پوشه GitHub که GitHub برام ساخته.
اگه وارد این پوشه GitHub بشیم، اینجا سایت نمونه من رو می‌بینیم.
می‌تونید ده، بیست، سی تا وب‌سایت یا پروژه مختلف داشته باشید و هر کدوم پوشه خودش رو داشته باشه.
پس برای این پروژه خاص، وارد پوشه my-example-site می‌شیم و حالا اینجاست که باید همه فایل‌های HTML، CSS و تصاویرمون رو منتقل کنیم.

اگه در پیدا کردن این پوشه مشکل دارید، می‌تونید اون رو ببندید و توی برنامه GitHub Desktop، از منوی بالا روی Repository کلیک کنید و بعد روی گزینه‌ای مثل Show in Finder یا Show in Windows Explorer کلیک کنید.
این باید شما رو دقیقاً به همون پوشه برسونه.
اینجاست که فایل‌های وب‌سایتمون رو اضافه می‌کنیم.

---

خب، من، فقط می‌خوام این پوشه روی دسکتاپم رو باز کنم،
این پوشه شامل سه فایل HTML برای سه صفحه مختلفه.
یه فایل CSS سفارشی دارم و چند تصویر و عکس مختلف هم داخلشه.
پس فقط می‌خوام همه فایل‌های داخل این پوشه رو انتخاب کنم.

یادتون باشه، این همون فایلیه که در ابتدای این درس دانلود کردید،
و حالا فقط می‌خوام اون رو منتقل کنم به همون پوشه‌ای که GitHub Desktop برای پروژه‌مون ساخته.

حالا، به محض اینکه این کار رو انجام بدیم و برگردیم به برنامه GitHub Desktop،
می‌بینید که انواع و اقسام تغییرات ظاهر می‌شن.

این اتفاق می‌افته چون Git داره اون پوشه رو ردیابی می‌کنه.
داره تغییرات فایل‌ها رو زیر نظر می‌گیره.

به‌طور پیش‌فرض، همه فایل‌هایی که اضافه کردیم رو شامل می‌شه.
اما اگه چند فایل وجود داشته باشه که نمی‌خواید داخل پروژه‌تون باشه،
فقط کافیه تیک اون فایل‌ها رو بردارید.

برای مثال، سیستم‌عامل ویندوز فایل‌های کوچیک و تصادفی‌ای به صورت hidden یجاد می‌کنه.
من واقعاً به اون فایل برای وب‌سایتم نیاز ندارم، پس می‌تونم تیک اون فایل رو بردارم و حالا دیگه اون فایل ردیابی یا به مخزنم اضافه نمی‌شه.

در هر صورت، وقتی همه فایل‌های مهم دیگه انتخاب یا اضافه شدن، فقط باید یک خلاصه برای تغییراتمون بنویسیم.
پس توی فیلد خلاصه، من فقط می‌نویسم “اولین کامیت من” — شما می‌تونید هر چیزی بنویسید.
این خیلی مهم نیست، اما حواستون باشه که به‌طور پیش‌فرض مخزن گیت شما عمومی هست.
پس هیچ اطلاعات فوق‌محرمانه یا حساسی رو توی این پیام ننویسید.

و حالا بیاید روی دکمه‌ای کلیک کنیم که نوشته Commit to master.
یا در آینده ممکنه بنویسه Commit to main.
در هر صورت، هدفمون اینه که تغییراتمون رو کامیت کنیم.
پس روی اون دکمه کلیک می‌کنیم.

خب، عالیه!
حالا همه اون فایل‌های مهم دیگه توی بخش تغییرات نمایش داده نمی‌شن.
در این مرحله، فقط می‌خوایم مخزنمون رو به سرورهای GitHub ارسال کنیم.
پس بالا سمت منو گزینه‌ای به نام Publish repository می‌بینیم.
روی اون کلیک کنیم.

من نمی‌خوام این مخزن خصوصی باشه چون می‌خوام این وب‌سایت برای عموم قابل مشاهده باشه.
پس تیک گزینه “Keep this code private” رو برمی‌دارم و بعد روی دکمه Publish repository کلیک می‌کنیم.

خب، عالیه!
ما با موفقیت فایل‌هامون رو به سرورهای GitHub فرستادیم.
حالا برگردیم به مرورگرمون که با حساب GitHub واردش شدیم، فقط باید مخزنمون رو پیدا کنیم.
بالا سمت راست GitHub.com، روی آواتار پروفایلتون کلیک کنید و بعد روی گزینه Repositories کلیک کنید.

حالا باید مخزن جدیدی که همین چند لحظه پیش ساختیم رو ببینید — my-example-site.
روی اون کلیک کنید.

خب، حالا این صفحه نمای کلی پروژه یا مخزن شماست.
و چون انتخاب کردیم که خصوصی نباشه، یعنی کل دنیا می‌تونه این صفحه رو ببینه.
اما این فقط لیستی از فایل‌هامونه.
این هنوز اون وب‌سایت سه‌صفحه‌ای واقعی نیست.

پس فقط یک مرحله دیگه مونده — باید وارد تنظیمات بشیم.
تقریباً اینجا، روی Settings کلیک کنید.

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

می‌بینیم که گزینه Source وجود داره، و به‌طور پیش‌فرض روی None تنظیم شده.
پس فقط روی این منوی کشویی کلیک می‌کنیم و شاخه master رو انتخاب می‌کنیم.
در آینده ممکنه نوشته باشه main branch، اما در هر صورت، ما دنبال master یا main هستیم.
روی اون کلیک کنید.

می‌بینید که صفحه دوباره بارگذاری شد و GitHub Pages Source ذخیره شد.
و حالا اگه دوباره به همون بخش GitHub Pages پایین صفحه برگردید، یک لینک می‌بینید.
نوشته “سایت شما آماده انتشار است در” و بعد یک آدرس URL می‌ده.

من این لینک رو توی یک تب جدید باز می‌کنم.
و این هم وب‌سایت ما در این آدرس.

این یک دامنه واقعی هست.
پس آدرسش می‌شه: نام کاربری شما در GitHub نقطه github.io و بعد اسم این پروژه یا مخزن خاص.
این URL برای کل سیاره قابل دسترسه.
پس می‌تونید این آدرس رو کپی کنید، برای دوستان، خانواده، همکاران یا هر کسی بفرستید و اون‌ها می‌تونن وب‌سایت شما رو ببینن.

حالا قبل از اینکه این درس رو تموم کنیم، می‌خوام بهتون نشون بدم چطور می‌تونید وب‌سایتتون رو بعد از انتشار روی GitHub به‌روزرسانی کنید.
برای مثال، فرض کنید می‌خوام یک علامت تعجب به انتهای عنوان “وب‌سایت باحال من” اضافه کنم.

اول از همه، باید مطمئن بشید که دارید فایل درست رو ویرایش می‌کنید.
من نمی‌خوام فایل روی دسکتاپم رو ویرایش کنم.
در عوض، می‌خوام فایل داخل پوشه GitHub رو ویرایش کنم.

پس از GitHub Desktop، همیشه می‌تونید روی Repository کلیک کنید و بعد Show in Finder رو انتخاب کنید.
درسته؟
این همون پوشه GitHub داخل پوشه Documents منه و بعد پروژه یا مخزن خاص من.

فقط این پوشه رو توی VS Code باز می‌کنم — می‌تونید کل پوشه پروژه رو بکشید و بندازید توی پنجره VS Code.

و حالا فرض کنیم توی فایل animals.html، شاید حدود خط ۱۱، می‌خوام عنوان “وب‌سایت باحال من” یک علامت تعجب داشته باشه.
پس اون رو ذخیره می‌کنم.

و حالا برگردیم به برنامه GitHub Desktop، می‌بینید که این تغییر توی بخش Changes ظاهر می‌شه.
و اگه روش کلیک کنید، حتی دقیقاً خطی که تغییر دادید رو نشون می‌ده.
خیلی جالبه!

پس من اون فایل HTML رو انتخاب‌شده نگه می‌دارم، اما نمی‌خوام فایل‌های تصادفی Mac OS Store رو اضافه کنم، پس تیک اون‌ها رو برمی‌دارم.
فایل HTML رو نگه می‌دارم و بعد توی فیلد خلاصه می‌نویسم “تغییر عنوان در صفحه حیوانات”.

و بعد، می‌دونم که دکمه کامیت پایین صفحه افتاده، اما گوشه پایین سمت چپ یک دکمه Commit هست.
پس روی اون کلیک کنید.

وقتی کامیت کردید، فقط باید Push یا Publish کنیم.
این همون دکمه‌ایه که اینجاست.
می‌خوایم Push to Origin انجام بدیم.
در اینجا، Origin یعنی سرورهای GitHub.
روی اون کلیک کنید.

ممکنه حدود ۱۰ ثانیه طول بکشه.
اما وقتی تموم شد، توی مرورگرمون، اگه صفحه رو رفرش کنیم، ممکنه فوراً تغییر رو نشون نده.
ممکنه ۳۰ ثانیه طول بکشه.
با جادوی تدوین ویدیو، می‌تونم کمی جلو بزنم، اما اگه فقط کمی صبر کنید و بعد رفرش کنید…

عالیه!

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

وقتی من سال‌ها پیش داشتم HTML، CSS و JavaScript یاد می‌گرفتم، همچین چیزی وجود نداشت.
پس تشویقتون می‌کنم که کدنویسی تمرین کنید، یک صفحه جالب بسازید و بعد اون رو با دوستان یا خانواده‌تون به اشتراک بذارید.