ChatGPT-ээр вебсайт хэрхэн хийх: ажилладаг гурван арга

ChatGPT-ээр вебсайт хийхдээ сайтынхаа HTML болон CSS-ийг бичүүлээд өөрөө хостинг үйлчилгээнд байршуулж болно, эсвэл вебсайт builder-т орохоосоо өмнө хуудсуудаа төлөвлүүлж, текстээ бичүүлж болно, эсвэл ChatGPT дотроос Mythex шиг AI builder холбож, нэг чатаас сайтыг бүтээж, хостлож, нийтлүүлж болно. Эхний арга үнэгүй бөгөөд нэг хуудастай сайтад тохиромжтой; гурав дахь нь сайтад өгөгдөл хадгалдаг маягт, нэвтрэлт эсвэл байнгийн шинэчлэлт хэрэгтэй үед хэрэгтэй. Энэ заавар арга бүрийг загвартай нь харуулж, хаана хязгаартайг нь тодорхой заана.

ChatGPT өөрөө юу хийж чадах, юу чадахгүй вэ

ChatGPT бичих ажилд маш сайн: код, гарчиг, хуудасны текст, төлөвлөгөө. Гэхдээ энгийн байдлаар бол вебхостинг компани биш. Сайтад нийтийн хаяг өгдөггүй, өгөгдлийн сан ажиллуулдаггүй, builder шиг төслөөс төсөлд файлаа хадгалдаггүй. Доорх арга бүр энэ зөрүүг нөхөх өөр хариу юм.

1-р арга: ChatGPT код бичнэ, та хостлоно

Энэ бол уламжлалт арга бөгөөд энгийн static сайтад сайн тохирно: портфолио, landing хуудас, хуримын хуудас.

1-р алхам: Бүрэн, нэг файлтай хуудас гуйна

Агуулга болон байршлыг тодорхой бичээрэй:

Бүх CSS-ээ style таг дотор оруулсан, нэг HTML файл хэлбэртэй бүрэн нэг хуудасны вебсайт бич. Энэ нь Амман хотын фриланс зураач Майя Хаддадад зориулагдсан. Хэсгүүд: нэр болон «Номд болон брэндэд зориулсан зураг» гэсэн толгойтой header, зургийн зургаан портфолио хүрээ (солиход хялбар placeholder зургийн зам ашигла), товч танилцуулга, үнэ заасан үйлчилгээний гурван жагсаалт, мөн имэйлээ mailto холбоосоор харуулсан холбоо барих хэсэг. Цэвэр, орчин үеийн загвартай, цагаан зай ихтэй, утсанд тохирсон. JavaScript фреймворкгүй.

Нэг файл гуйвал хадгалж, байршуулахад хялбар байна.

2-р алхам: Хадгалаад нээнэ

Кодыг текст редактор руу хуулж index.html нэрээр хадгалаад браузерээрээ нээнэ. Ямар нэг зүйл буруу харагдвал ChatGPT-д тайлбарла: «зургийн хүрээ десктоп дээр нэг баганатай байна; 900px-ээс өргөн үед гурван багана болго».

3-р алхам: Placeholder-уудаа солино

Placeholder зургуудыг өөрийнхөөрөө солиж, ChatGPT-ийн зохиосон текстийг засна. Үнэ, имэйл, нэрийг анхааралтай шалга; AI дутууг итгэлтэйгээр бөглөдөг.

4-р алхам: Интернетэд байршуулна

Файлаа GitHub Pages гэх мэт үнэгүй static хостинг эсвэл аль хэдийн төлбөр төлдөг вебхостинг дээр хуулна. Танд нийтийн хаяг гарна. Өөрийн домэйн ашиглахын тулд хостингийнхээ заавар дагана; DNS-ийн талаар өөрийн домэйн холбох гарын авлагад тайлбарласан.

Энэ аргын хязгаар

• Өгөгдөл хадгалдаг маягт. Холбоо барих маягт илгээлтээ хаашаа илгээхээ мэдэх ёстой. Маягтын үйлчилгээ эсвэл сервер хэрэгтэй.
• Нэвтрэлт болон гишүүдийн хэсэг. Эдгээрт backend болон өгөгдлийн сан хэрэгтэй.
• Олон хуудас. Гараар хуулсан арван файл дээр толгой, цэсийг нэг мөр байлгах нь төвөгтэй.
• Шинэчлэлт. Өөрчлөлт бүрт шинэ код гуйж, буулгаж, дахин байршуулах хэрэгтэй.

2-р арга: ChatGPT төлөвлөнө, builder барина

Энд ChatGPT бодох, бичих ажлыг хийж, вебсайт builder барих, хостлох ажлыг хийнэ.

1-р алхам: ChatGPT-ээр сайтаа төлөвлөнө

Би Манчестер хотод захиалгаар бялуу авдаг жижиг гэр бүлийн бялуун дэлгүүртэй. Миний вебсайтад хэрэгтэй хуудсуудыг санал болгож, хуудас бүр юу гэж хэлэх ёстойг, мөн зочин хуудас бүр дээр хийх нэг үйлдлийг дурдаарай. Таваас илүүгүй хуудастай байг.

2-р алхам: Текстээ бичнэ

Хуудас бүрийн текстийг гуйж, дараа нь өөрийн хэв маягаар дахин бич. ChatGPT-ийн мэдэж чадахгүй жинхэнэ мэдээллээ нэм: ажлын цаг, үнэ, хүргэлтийн бүс, бялуунууд тань юугаараа онцлог вэ.

3-р алхам: Builder дээр барина

Төлөвлөгөө болон текстээ вебсайт builder-т буулгана. Drag-and-drop хэрэгслээр текстээ загварт байрлуулна. AI builder-т бүх төлөвлөгөөгөө нэг мессежээр өгөхөд хуудсуудыг нь барьдаг; жишээ нь Mythex вебсайт builder дээр:

Манчестерт байрлах гэр бүлийн бялуун дэлгүүрт зориулж, энэ төлөвлөгөө болон текстээр вебсайт бүтээ: [буулгах]. Захиалгын маягтыг оруулаад, захиалга бүрийг (нэр, утас, бялуун төрөл, хүссэн огноо, мессеж) хадгалдаг байг, ингэснээр зөвхөн надад нэвтрэх боломжтой админ хуудаснаас харж болно. Дулаан, гэрийн мэдрэмжтэй загвар, утсанд тохирсон.

Энд захиалгын маягт жинхэнэ өгөгдлийн санд хадгалагддаг бөгөөд буулгасан HTML файл үүнийг хийж чаддаггүй. Энэ замын талаар AI-р вебсайт хэрхэн бүтээх вэ гарын авлагаас илүү үзнэ үү.

3-р арга: ChatGPT дотроосоо бүтээж, нийтлэх

Хамгийн шинэ арга бол builder-ийг ChatGPT-д холбож, ChatGPT builder-ийн хэрэгслүүдийг шууд ашиглах явдал. Та ChatGPT-ийн яриандаа үлдэнэ; builder нь төсөл, урьдчилан харалт, өгөгдлийн сан, хостингийг хангана.

Mythex энэ байдлаар ажилладаг бөгөөд ChatGPT app-аараа (MCP connector) дамжуулан. Mythex-ийн Account settings-ээс холбоно; холболт ямар ч төлөвлөгөөтэй ажиллана, харин төслийнхөө sandbox-ыг ажиллуулах хэрэгслүүд Pro шаардана. Холбосны дараа ChatGPT-д ингэж хэлж болно:

Mythex ашиглан бялуун дэлгүүрт зориулсан шинэ вебсайт үүсгэ: нүүр хуудас, бялуу болон үнийн жагсаалттай цэсний хуудас, мөн өгөгдлийн санд хадгалдаг захиалгын маягт. Урьдчилан харахыг үзүүл, би зөвшөөрөх үед нийтэд нээлттэй хаяг дээр нийтэл.

Дараа нь ChatGPT төслийг үүсгэж, код бичиж, ажиллуулж, та зөвшөөрөх үед нийтэд нээлттэй URL дээр нийтэлнэ. Өөрчлөлтүүд нь ижил чатанд нэмэлт мессеж болж үргэлжилнэ. Ижил connector арга Claude, Cursor болон Codex дээр ч ажилладаг. Энэ хэрхэн ажилладаг, аль builder-үүд дэмждэгийн талаар MCP-тэй AI app builder-ууд гарын авлагаас үзнэ үү.

Аль аргыг сонгох вэ?

Ямар ч аргад хэрэглэх зөвлөмж

• Эхнээсээ жинхэнэ баримтаа өг. Нэр, байршил, үйлчилгээ, үнэ, холбоо барих мэдээлэл. Хуурамч мэдээлэл цөөн байх тусам цэвэрлэх ажил бага болно.
• Зочин болон зорилгоо тодорхойло. «Төрсөн өдрийн бялуу хайж буй эцэг эх, захиалгын хүсэлт илгээх ёстой».
• Утсанд эхэлсэн байрлалыг гуй. Ихэнх зочид утсаар орж ирдэг.
• Анхны хувилбар гарсны дараа нэг мессежид нэг л өөрчлөлт хий.
• SEO-ийн үндсийг тодорхой гуй: хуудас бүрт өвөрмөц title, description, жинхэнэ гарчиг, зураг дээр alt текст. Үзэх: AI-р бүтээсэн вебсайтын SEO.

Манай AI app builder-т prompt бичих арга гарын авлагад илүү олон загвар байна.

Түгээмэл асуудал ба засвар

• Загвар ерөнхий харагдаж байна. Жишээ өг: «тайван Скандинавын кафе шиг, ихэвчлэн цагаан, нэг бүдэг ногоон өнгөтэй».
• Код дундуур нь таслагдсан. ChatGPT-ээс сүүлийн мөрөөс үргэлжлүүлэхийг гуй, эсвэл хуудсыг хэсгүүдэд хуваагаад нэг нэгээр нь гуй.
• Сэтгэгдэл эсвэл статистик зохиосон. Устга. Хуурамч сэтгэгдэл итгэлийг эвдэж, олон оронд хэрэглэгчийн хамгаалалтын дүрмийг зөрчинө.
• Өөрчлөлтийн дараа сайт эвдэрсэн. Шинэ код буулгахаасаа өмнө сүүлд ажилласан хувилбараа хадгал. Mythex зэрэг builder-ууд checkpoint хадгалдаг тул буцааж болно.

Нийтлэхээсээ өмнө

Хуудас бүрийн текстийг бүгдийг нь уншаарай. Холбоо барих мэдээлэл ажилладаг эсэхийг шалга. Сайтыг утсан дээр нээ. Зургууд нь таных эсвэл зөв лицензтэй эсэхийг шалга. Дараа нь нийтэлж, зочдоо байдаг газартаа хуваалц. Бүхэлдээ үнэгүй байлгахыг хүсвэл вебсайтыг үнэгүй хэрхэн хийх вэ гарын авлага үнэгүй хостингийн сонголтуудыг илүү дэлгэрэнгүй тайлбарласан.

Асуултууд