Com fer una web amb ChatGPT: tres maneres que funcionen

Per fer una web amb ChatGPT, pots demanar-li que escrigui l'HTML i el CSS del lloc i després posar aquests fitxers en un servei d'allotjament tu mateix; també pots usar-lo per planificar les pàgines i escriure el text abans de construir-ho en un constructor web, o connectar un constructor d'IA com Mythex dins ChatGPT perquè construeixi, allotgi i publiqui el lloc per a tu des del mateix xat. La primera manera és gratuïta i serveix bé per a una web d'una sola pàgina; la tercera és la que vols quan el lloc necessita formularis que desin dades, inicis de sessió o actualitzacions regulars. Aquesta guia mostra cada mètode amb indicacions i explica amb claredat on s'acaba cadascun.

Què pot fer ChatGPT per si sol i què no

ChatGPT és molt bo escrivint: codi, titulars, text de pàgines i plans. De sèrie no és una empresa d'allotjament. No dona una adreça pública al teu lloc, no executa una base de dades i no conserva els fitxers del lloc entre projectes com ho fa un constructor. Cada mètode següent és una resposta diferent a aquesta mancança.

Mètode 1: ChatGPT escriu el codi, tu l'allotges

Aquest és l'enfocament clàssic i funciona bé per a un lloc estàtic senzill: un portafoli, una pàgina de destinació, una pàgina de casament.

Pas 1: Demana una pàgina completa en un sol fitxer

Sigues específic amb el contingut i la distribució:

Escriu un lloc web complet d'una sola pàgina en un únic fitxer HTML amb el CSS dins d'una etiqueta style. És per a Maya Haddad, una il·lustradora autònoma d'Amman. Seccions: una capçalera amb el seu nom i «Il·lustració per a llibres i marques», una graella de sis imatges de portafoli (usa rutes d'imatge de marcador que pugui substituir), un paràgraf breu sobre ella, una llista de tres serveis amb preus de sortida i una secció de contacte amb el seu correu com a enllaç mailto. Net, modern, amb molt espai en blanc, que funcioni en mòbils. Sense frameworks de JavaScript.

Demanar un sol fitxer ho manté senzill per desar-lo i pujar-lo.

Pas 2: Desa'l i obre'l

Copia el codi en un editor de text, desa'l com a index.html i obre'l al navegador. Si alguna cosa no es veu bé, descriu-ho a ChatGPT: «la graella d'imatges és d'una columna a l'escriptori; fes-la de tres columnes per sobre de 900 px d'amplada».

Pas 3: Substitueix els marcadors

Canvia les imatges de marcador per les teves i substitueix qualsevol text que ChatGPT hagi inventat. Revisa amb cura els preus, els correus i els noms; la IA omple els buits amb molta seguretat.

Pas 4: Posa-la en línia

Puja el fitxer a un allotjament estàtic gratuït com GitHub Pages, o a qualsevol allotjament web que ja paguis. Tindràs una adreça pública. Per usar el teu propi domini, segueix les instruccions del teu allotjament; la nostra guia sobre com connectar un domini propi explica la part del DNS.

On s'acaba el mètode 1

• Formularis que desen dades. Un formulari de contacte necessita un lloc on enviar les respostes. Necessitaràs un servei de formularis o un servidor.
• Inicis de sessió i àrees de socis. Això necessita un backend i una base de dades.
• Moltes pàgines. Mantenir els capçaleres i menús coherents en deu fitxers enganxats a mà és tediós.
• Actualitzacions. Cada canvi vol dir demanar codi nou, enganxar-lo i tornar a pujar-lo.

Mètode 2: ChatGPT planifica, un constructor construeix

Aquí ChatGPT fa la feina de pensar i escriure, i un constructor web fa la de construir i allotjar.

Pas 1: Planifica el lloc amb ChatGPT

Dirigeixo una petita pastisseria familiar a Manchester que accepta comandes de pastissos. Suggereix les pàgines que necessita el meu lloc web, què ha de dir cada pàgina i l'única acció que vull que facin els visitants a cada una. Limita-ho a cinc pàgines o menys.

Pas 2: Escriu el text

Demana el text de cada pàgina i després reescriu-lo amb la teva pròpia veu. Afegeix detalls reals que ChatGPT no pot saber: horaris d'obertura, preus, zones de lliurament, què fa diferents els teus pastissos.

Pas 3: Construeix-ho en un constructor

Enganxa el pla i el text en un constructor web. En una eina d'arrossegar i deixar anar, col·loques el text dins d'una plantilla. En un constructor d'IA pots donar tot el pla en un sol missatge i ell construeix les pàgines; per exemple, al constructor web de Mythex:

Construeix un lloc web per a una pastisseria familiar a Manchester usant aquest pla i aquest text: [enganxa]. Inclou un formulari de sol·licitud de comanda que desi cada sol·licitud (nom, telèfon, tipus de pastís, data necessària, missatge) perquè la pugui veure en una pàgina d'administració només accessible per a mi. Disseny càlid i acollidor, que funcioni en mòbils.

El formulari de comandes aquí es desa en una base de dades real, cosa que un fitxer HTML enganxat no podria fer. Per saber més sobre aquesta via, consulta com fer una web amb IA.

Mètode 3: Construeix i publica des de dins de ChatGPT

L'opció més nova és connectar un constructor a ChatGPT perquè ChatGPT pugui usar directament les eines del constructor. Et quedes dins de la conversa de ChatGPT; el constructor aporta el projecte, la vista prèvia, la base de dades i l'allotjament.

Mythex funciona així a través de la seva aplicació per a ChatGPT (un connector MCP). La connectes des de la configuració del compte a Mythex; connectar-la funciona en qualsevol pla, i les eines que executen el sandbox del projecte necessiten Pro. Un cop connectada, pots demanar a ChatGPT una cosa com:

Usant Mythex, crea un lloc web nou per a la meva pastisseria amb una pàgina d'inici, una pàgina de carta amb pastissos i preus, i un formulari de sol·licitud de comanda que es desi en una base de dades. Mostra'm la vista prèvia i publica-ho quan digui que està bé.

Després ChatGPT crea el projecte, escriu el codi, l'executa i el publica en una URL pública quan l'aproves. Els canvis són més missatges dins del mateix xat. El mateix enfocament de connector també funciona des de Claude, Cursor i Codex. Per saber com funciona això i quins constructors ho admeten, consulta constructors d'apps d'IA amb MCP.

Quin mètode triar?

Consells d'indicacions que funcionen per a qualsevol mètode

• Dona fets reals des del principi. Nom, ubicació, serveis, preus, dades de contacte. Menys detalls inventats vol dir menys neteja.
• Descriu el visitant i l'objectiu. «Un pare que busca un pastís d'aniversari, que hauria d'acabar enviant una sol·licitud de comanda».
• Demana distribucions pensades primer per al mòbil. La majoria de visitants usen el telèfon.
• Canvia una cosa per missatge quan ja existeixi la primera versió.
• Demana explícitament les bases del SEO: un títol i una descripció únics per pàgina, encapçalaments reals, text alternatiu a les imatges. Consulta SEO per a webs construïdes amb IA.

La nostra guia sobre com escriure indicacions per a constructors d'apps amb IA té més patrons.

Problemes habituals i solucions

• El disseny sembla genèric. Dona una referència: «com una cafeteria escandinava tranquil·la, molt blanc i un verd apagat».
• El codi s'ha tallat. Demana a ChatGPT que continuï des de l'última línia, o que divideixi la pàgina en seccions i te les doni d'una en una.
• Ha inventat testimonis o estadístiques. Elimina-los. Les ressenyes falses malmeten la confiança i, en molts llocs, van contra les normes de protecció del consumidor.
• El lloc es trenca després d'un canvi. Guarda una còpia de l'última versió que funcionava abans d'enganxar codi nou. Constructors com Mythex guarden punts de control perquè puguis tornar enrere.

Abans de publicar

Llegeix cada paraula de cada pàgina. Comprova que els contactes funcionen. Obre el lloc en un mòbil. Assegura't que les imatges són teves o tenen la llicència adequada. Després publica'l i comparteix-lo on ja són els teus visitants. Si vols que tot això no costi res, com fer una web gratis explica amb més detall les opcions d'allotjament gratuït.

Preguntes