Ինչպես ստեղծել կայք ChatGPT-ով. երեք աշխատող եղանակ

ChatGPT-ով կայք ստեղծելու համար կարող ես խնդրել, որ գրի կայքի HTML և CSS, և դրանք հետո ինքդ տեղադրես հոստինգ ծառայության վրա. կամ օգտագործես էջերը պլանավորելու և տեքստը գրելու համար՝ նախքան կայքը կառուցողով պատրաստելը. կամ միացնես AI կառուցող, օրինակ Mythex-ը, ChatGPT-ի ներսում, որպեսզի նույն չաթից կառուցի, հոստավորի և հրապարակի կայքը։ Առաջին եղանակը անվճար է և հարմար է մեկ էջանոց կայքի համար. երրորդը այն է, ինչ հարկավոր է, երբ կայքին պետք են տվյալներ պահող ձևեր, մուտքեր կամ կանոնավոր թարմացումներ։ Այս ուղեցույցը ցույց է տալիս յուրաքանչյուր մեթոդ հրահանգներով և հստակ ասում, թե որտեղ է յուրաքանչյուրն ավարտվում։

Ինչ կարող է և ինչ չի կարող ChatGPT-ն միայնակ

ChatGPT-ն շատ լավ է գրելու մեջ՝ կոդ, վերնագրեր, էջի տեքստ և պլաններ։ Սկզբնական վիճակում նա հոստինգ ընկերություն չէ։ Նա կայքին հանրային հասցե չի տալիս, տվյալների բազա չի աշխատեցնում և կայքի ֆայլերը նախագծից նախագիծ չի պահում այնպես, ինչպես կառուցողը։ Ստորև ներկայացված յուրաքանչյուր մեթոդ այս բացի տարբեր պատասխանն է։

Մեթոդ 1. ChatGPT-ը գրում է կոդը, դու հոստավորում ես այն

Սա դասական մոտեցումն է և լավ է աշխատում պարզ, ստատիկ կայքի համար՝ պորտֆոլիո, վայրէջքի էջ, հարսանեկան էջ։

Քայլ 1. Խնդրիր ամբողջական, մեկ ֆայլով էջ

Նշիր բովանդակությունը և դասավորությունը հստակ.

Գրիր ամբողջական մեկէջանոց կայք որպես մեկ HTML ֆայլ, CSS-ը՝ style թեգի մեջ։ Այն Մայա Հադադի համար է, Ամմանում ազատ աշխատող նկարչուհու։ Բաժիններ՝ վերնագիր իր անունով և «Նկարազարդումներ գրքերի և բրենդների համար» տեքստով, վեց նկարից պորտֆոլիո ցանց (օգտագործիր տեղապահ նկարների ուղիներ, որ կարողանամ փոխարինել), կարճ «Իմ մասին» պարբերություն, երեք ծառայությունների ցանկ սկզբնական գներով և կոնտակտային բաժին՝ իր էլ. փոստով որպես mailto հղում։ Մաքուր, ժամանակակից դիզայն, առատ սպիտակ տարածք, աշխատում է հեռախոսների վրա։ Առանց JavaScript-ի ֆրեյմվորքների։

Մեկ ֆայլ խնդրելը պահպանումը և վերբեռնումը պարզ է դարձնում։

Քայլ 2. Պահիր և բացիր այն

Պատճենիր կոդը տեքստային խմբագրիչի մեջ, պահիր որպես index.html և բացիր բրաուզերում։ Եթե ինչ-որ բան սխալ է թվում, նկարագրիր ChatGPT-ին. «նկարների ցանցը դեսքտոպում մեկ սյունակ է. դարձրու երեք սյունակ 900px-ից լայն էկրանների վրա»։

Քայլ 3. Փոխարինիր տեղապահները

Փոխարինիր տեղապահ նկարները քոնով և ջնջիր ChatGPT-ի հորինած ցանկացած տեքստ։ Ստուգիր գները, էլ. փոստերը և անունները մանրակրկիտ. AI-ն բացերը լցնում է վստահորեն։

Քայլ 4. Տեղադրիր առցանց

Բեռնվիր ֆայլը անվճար ստատիկ հոստի վրա, օրինակ GitHub Pages, կամ ցանկացած վեբ հոստինգ, որի համար արդեն վճարում ես։ Կստանաս հանրային հասցե. սեփական դոմեյնի համար հետևիր հոստի հրահանգներին. մեր ուղեցույցը սեփական դոմեյնի միացման մասին բացատրում է DNS-ի մասը։

Որտեղ է Մեթոդ 1-ը ավարտվում

• Տվյալներ պահող ձևեր։ Կոնտակտային ձևը պետք է ունենա տեղ, որտեղ ուղարկել ներկայացումները։ Հարկավոր է ձևերի ծառայություն կամ սերվեր։
• Մուտքեր և անդամների տարածքներ։ Դրանց համար պետք է բեքենդ և տվյալների բազա։
• Շատ էջեր։ Վերնագրերը և մենյուները տասը ձեռքով կպցրած ֆայլերում միանման պահելը ձանձրալի է դառնում։
• Թարմացումներ։ Յուրաքանչյուր փոփոխության համար նոր կոդ ես խնդրում, կպցնում և նորից բեռնում։

Մեթոդ 2. ChatGPT-ը պլանավորում է, կառուցողը կառուցում է

Այստեղ ChatGPT-ն անում է մտածելու և գրելու աշխատանքը, իսկ կայքի կառուցողը՝ կառուցելու և հոստավորելու։

Քայլ 1. Պլանավորիր կայքը ChatGPT-ով

Մանչեսթերում փոքր ընտանեկան հացի խանութ եմ վարում, որը տորթերի պատվերներ է ընդունում։ Առաջարկիր, թե ինչ էջեր են պետք իմ կայքին, ինչ պետք է ասի յուրաքանչյուր էջ և այն մեկ գործողությունը, որ ուզում եմ, որ այցելուն կատարի յուրաքանչյուր էջում։ Պահիր հինգ էջից քիչ։

Քայլ 2. Գրիր տեքստը

Խնդրիր յուրաքանչյուր էջի տեքստը, ապա վերագրիր քո սեփական ձայնով։ Ավելացրու իրական մանրամասներ, որոնք ChatGPT-ը չի կարող իմանալ՝ աշխատանքային ժամեր, գներ, առաքման տարածքներ, ինչով են քո տորթերը տարբերվում։

Քայլ 3. Կառուցիր կառուցողի մեջ

Պլանը և տեքստը կպցրու կայքի կառուցողի մեջ։ Drag-and-drop գործիքում տեքստը տեղադրում ես ձևանմուշի մեջ. AI կառուցողում կարող ես ամբողջ պլանը տալ մեկ հաղորդագրությամբ, և այն կկառուցի էջերը. օրինակ Mythex կայքի կառուցողում՝

Կառուցիր կայք Մանչեսթերի ընտանեկան հացի խանութի համար՝ օգտագործելով այս պլանը և տեքստը. [կպցրու]։ Ներառիր պատվերի հայտի ձև, որ պահի յուրաքանչյուր հայտ (անուն, հեռախոս, տորթի տեսակ, պահանջվող ամսաթիվ, հաղորդագրություն), որպեսզի կարողանամ դրանք տեսնել միայն ինձ մուտք ունեցող ադմին էջում։ Ջերմ, տնային տեսք, աշխատում է հեռախոսների վրա։

Այստեղ պատվերի ձևը պահում է իրական տվյալների բազայում, ինչ չէր կարող անել կպցրած HTML ֆայլը։ Այս ուղու մասին ավելին՝ տե՛ս ինչպես ստեղծել կայք AI-ով։

Մեթոդ 3. Կառուցիր և հրապարակիր ChatGPT-ի ներսից

Ամենաթարմ տարբերակն է կառուցող միացնել ChatGPT-ին, որպեսզի ChatGPT-ն կարողանա անմիջապես օգտագործել կառուցողի գործիքները։ Դու մնում ես ChatGPT-ի չաթում. կառուցողը ապահովում է նախագիծը, նախադիտումը, տվյալների բազան և հոստինգը։

Mythex-ը աշխատում է այս կերպ իր ChatGPT հավելվածի (MCP կապիչ) միջոցով։ Միացնում ես Mythex-ի Հաշվի կարգավորումներից. միացումը աշխատում է ցանկացած պլանով, իսկ ծրագրի սենդբոքսը աշխատեցնող գործիքները պահանջում են Pro։ Միանալուց հետո կարող ես ChatGPT-ին խնդրել մի բան այսպես.

Օգտագործելով Mythex-ը, ստեղծիր նոր կայք իմ խանութի համար՝ գլխավոր էջով, տորթերի և գների ցանկի էջով և պատվերի ձևով, որը պահում է տվյալների բազայում։ Ցույց տուր նախադիտումը և հրապարակիր, երբ ասեմ, որ լավն է։

Մեկ ChatGPT-ն այնուհետև ստեղծում է նախագիծը, գրում կոդը, աշխատեցնում այն և, երբ հաստատես, հրապարակում է հանրային հասցեով։ Փոփոխությունները նույն չաթում նոր հաղորդագրություններ են։ Նույն կապիչի մոտեցումը աշխատում է նաև Claude-ից, Cursor-ից և Codex-ից։ Այս աշխատանքի և այն մասին, թե որ կառուցողներն են աջակցում դրան, տե՛ս AI հավելվածների կառուցողները MCP-ով։

Որ մեթոդը ընտրել

Հուշումների խորհուրդներ, որոնք աշխատում են ցանկացած մեթոդով

• Տուր իրական փաստեր սկզբից։ Անուն, վայր, ծառայություններ, գներ, կոնտակտային տվյալներ։ Քիչ հորինված մանրամասներ նշանակում է քիչ մաքրում։
• Նկարագրիր այցելուին և նպատակը։ «Ծնողը, որը փնտրում է ծննդյան տորթ և պետք է ուղարկի պատվերի հայտ»։
• Խնդրիր հեռախոսի առաջին դասավորություն։ Այցելուների մեծ մասը օգտագործում է հեռախոս։
• Փոխիր մեկ բան մեկ հաղորդագրությամբ, երբ առաջին տարբերակը գոյություն ունի։
• Խնդրիր SEO-ի հիմունքները հստակ. եզակի վերնագիր և նկարագրություն յուրաքանչյուր էջի համար, իրական վերնագրեր, alt տեքստ նկարների համար։ Տե՛ս SEO AI-ով կառուցված կայքերի համար։

Մեր ուղեցույցը հուշումներ գրելու մասին AI հավելվածների կառուցողների համար ավելի շատ օրինակներ ունի։

Սովորական խնդիրներ և լուծումներ

• Դիզայնը ընդհանուր է թվում։ Տուր հղում. «ինչպես հանգիստ սկանդինավյան սրճարան, շատ սպիտակ և մեկ մշուշոտ կանաչ»։
• Կոդը կտրվեց։ Խնդրիր ChatGPT-ին շարունակել վերջին տողից կամ բաժանել էջը մասերի և տալ մեկ-մեկ։
• Հորինել է վկայություններ կամ վիճակագրություն։ Հեռացրու դրանք։ Կեղծ գնահատականները վնասում են վստահությանը, և շատ տեղերում դրանք հակասում են սպառողների պաշտպանության կանոններին։
• Կայքը փչանում է փոփոխությունից հետո։ Նոր կոդ կպցնելուց առաջ պահիր վերջին աշխատող տարբերակի պատճենը։ Mythex-ի նման կառուցողները պահում են կետեր, որ կարողանաս հետ գլորել։

Նախքան հրապարակելը

Կարդա յուրաքանչյուր էջի յուրաքանչյուր բառ։ Ստուգիր, որ կոնտակտային տվյալները աշխատում են։ Բացիր կայքը հեռախոսի վրա։ Համոզվիր, որ նկարները քոնն են կամ պատշաճ լիցենզավորված։ Ապա հրապարակիր և կիսվիր այնտեղ, որտեղ արդեն կան քո այցելուները։ Եթե ամբողջ բանը ցանկանում ես անվճար պահել, ինչպես ստեղծել կայք անվճար ավելի մանրամասն ներկայացնում է անվճար հոստինգի տարբերակները։

Հարցեր