چگونه با ChatGPT وب‌سایت بسازیم: سه روشی که واقعاً جواب می‌دهد

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

آنچه ChatGPT به‌تنهایی می‌تواند و نمی‌تواند انجام دهد

ChatGPT در نوشتن بسیار خوب است: کد، تیتر، متن صفحات و برنامه‌ریزی. اما به‌طور پیش‌فرض یک شرکت میزبانی نیست. به سایت شما نشانی عمومی نمی‌دهد، پایگاه داده اجرا نمی‌کند و فایل‌های سایت را مثل یک ابزار ساخت بین پروژه‌ها نگه نمی‌دارد. هر روشی که در ادامه می‌آید پاسخ متفاوتی به این شکاف است.

روش ۱: ChatGPT کد می‌نویسد، شما میزبانی می‌کنید

این روش کلاسیک است و برای یک سایت ساده و ایستا خوب کار می‌کند: نمونه‌کار شخصی، صفحه فرود، یا صفحه‌ای برای یک عروسی.

گام ۱: یک صفحه کامل و تک‌فایلی بخواهید

محتوا و چیدمان را دقیق توضیح دهید:

یک وب‌سایت کامل تک‌صفحه‌ای به شکل یک فایل HTML بنویس که CSS آن داخل یک تگ style باشد. این سایت برای مایا حدّاد، تصویرگر آزادکار در عمّان است. بخش‌ها: هدری با نام او و عبارت «تصویرسازی برای کتاب و برند»، شبکه‌ای از شش تصویر نمونه‌کار (مسیر تصاویر را به‌صورت جای‌نگهدار بگذار تا بتوانم عوضشان کنم)، یک پاراگراف کوتاه درباره خودش، فهرستی از سه خدمت با قیمت شروع، و بخش تماس با ایمیل او به‌صورت لینک mailto. مدرن و تمیز، فضای سفید زیاد، مناسب گوشی. بدون فریم‌ورک جاوااسکریپت.

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

گام ۲: ذخیره کنید و باز کنید

کد را در یک ویرایشگر متن کپی کنید، با نام index.html ذخیره کنید و در مرورگر باز کنید. اگر چیزی درست نبود، برایش توضیح بدهید: «شبکه تصاویر در دسکتاپ یک ستونی است؛ بالای ۹۰۰ پیکسل آن را سه ستونی کن.»

گام ۳: جای‌نگهدارها را عوض کنید

تصاویر نمونه را با تصاویر خودتان عوض کنید و هر متنی را که ChatGPT اختراع کرده جایگزین کنید. قیمت‌ها، ایمیل‌ها و نام‌ها را با دقت بررسی کنید، چون هوش مصنوعی جاهای خالی را با اطمینان پر می‌کند.

گام ۴: آنلاین کنید

فایل را روی یک میزبان استاتیک رایگان مثل GitHub Pages یا هر میزبان وبی که از قبل پرداخت می‌کنید آپلود کنید. یک نشانی عمومی می‌گیرید. برای استفاده از دامنه اختصاصی، دستورالعمل میزبانتان را دنبال کنید؛ راهنمای ما درباره اتصال دامنه اختصاصی بخش DNS را توضیح می‌دهد.

جایی که روش ۱ متوقف می‌شود

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

روش ۲: ChatGPT برنامه‌ریزی می‌کند، یک ابزار می‌سازد

در این روش ChatGPT فکر و نوشتن را انجام می‌دهد و یک وب‌سایت‌ساز کار ساختن و میزبانی را.

گام ۱: سایت را با ChatGPT برنامه‌ریزی کنید

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

گام ۲: متن را بنویسید

متن هر صفحه را بخواهید، بعد با لحن خودتان بازنویسی کنید. جزئیاتی را که ChatGPT نمی‌تواند بداند اضافه کنید: ساعت کاری، قیمت‌ها، مناطق ارسال، و چیزی که کیک‌های شما را متفاوت می‌کند.

گام ۳: در یک ابزار بسازید

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

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

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

روش ۳: ساخت و انتشار از داخل ChatGPT

جدیدترین گزینه این است که یک وب‌سایت‌ساز را به ChatGPT وصل کنید تا ChatGPT ابزارهای آن را مستقیم استفاده کند. شما در گفتگوی ChatGPT می‌مانید؛ ابزار، پروژه، پیش‌نمایش، پایگاه داده و میزبانی را فراهم می‌کند.

Mythex از طریق برنامه‌اش در ChatGPT (یک کانکتور MCP) همین‌طور کار می‌کند. آن را از بخش تنظیمات حساب در Mythex وصل می‌کنید؛ اتصال در هر پلنی کار می‌کند و ابزارهایی که محیط اجرای پروژه را راه می‌اندازند به Pro نیاز دارند. پس از اتصال، می‌توانید چیزی شبیه این بگویید:

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

سپس ChatGPT پروژه را می‌سازد، کد را می‌نویسد، آن را اجرا می‌کند و وقتی تأیید کنید، در یک نشانی عمومی منتشرش می‌کند. تغییرات فقط پیام‌های بیشتر در همان گفتگو هستند. همین رویکرد کانکتور در Claude، Cursor و Codex هم کار می‌کند. برای پیش‌زمینه درباره نحوه کار و اینکه کدام ابزارها از آن پشتیبانی می‌کنند، ابزارهای ساخت اپلیکیشن با MCP را ببینید.

کدام روش را انتخاب کنید؟

نکات پرامپت که برای هر روشی کار می‌کند

• واقعیت‌ها را از اول بدهید. نام، مکان، خدمات، قیمت‌ها و اطلاعات تماس. جزئیات ساختگی کمتر یعنی پاک‌سازی کمتر.
• بازدیدکننده و هدف را توصیف کنید. «والدینی که دنبال کیک تولد است و باید در نهایت یک درخواست سفارش ثبت کند.»
• چیدمانی که اول برای گوشی است بخواهید. بیشتر بازدیدکنندگان با گوشی می‌آیند.
• وقتی نسخه اول آماده شد، در هر پیام یک تغییر بدهید.
• مبانی سئو را صریحاً بخواهید: یک عنوان و توضیح یکتا برای هر صفحه، سرفصل‌های واقعی و متن جایگزین برای تصاویر. سئو برای وب‌سایت‌های ساخته‌شده با هوش مصنوعی را ببینید.

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

مشکلات رایج و راه‌حل‌ها

• طراحی کلی به نظر می‌رسد. یک مرجع بدهید: «مثل یک کافه‌ی آرام اسکاندیناوی، با فضای سفید زیاد و یک سبز ملایم.»
• کد وسط کار قطع شد. از ChatGPT بخواهید از آخرین خط ادامه دهد، یا صفحه را به بخش‌هایی تقسیم کند و یکی‌یکی بدهد.
• نظرات مشتریان یا آمار را خودش ساخته است. آن‌ها را حذف کنید. نظرات جعلی به اعتماد آسیب می‌زند و در بسیاری از کشورها خلاف قوانین حمایت از مصرف‌کننده است.
• سایت بعد از یک تغییر خراب شد. پیش از چسباندن کد جدید، نسخه کارِ قبلی را نگه دارید. ابزارهایی مثل Mythex نقطه بازیابی نگه می‌دارند تا بتوانید به نسخه قبلی برگردید.

پیش از انتشار

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

پرسش‌ها