Com desplegar un lloc web generat per IA a Vercel com a lloc propi i utilitzar el vostre domini personalitzat (Guia d'allotjament web)
Prefaci
Després de crear un lloc amb eines d'IA com ChatGPT, Canva, Gemini Canvas, Claude Artifacts o Sider Web Creator, la següent gran pregunta és com gestionar l'allotjament web a Vercel perquè pugueu visitar el lloc a través del vostre propi domini.
Aquesta guia us guiarà pas a pas a través del procés, des de l'exportació d'un projecte a Sider Web Creator fins a acabar amb un lloc web complet sota el vostre domini personal, alhora que desmitifica tant l'allotjament web com la configuració de Vercel. 🎯 Què aprendreu
Com descarregar i entendre correctament els fitxers del projecte generats per IA abans de triar un servei d'allotjament web de Vercel.
Instruccions pas a pas per desplegar el lloc de forma gratuïta a la plataforma d'allotjament web basada en el núvol de Vercel.
Com comprar i enllaçar el vostre propi domini personalitzat dins del tauler de control de Vercel i connectar-lo als registres DNS d'allotjament web de millors pràctiques.
Consells professionals per fer que el lloc sembli completament professional i fiable un cop la configuració d'allotjament web de Vercel estigui activa.
📥 Pas 1: Descarregueu el vostre lloc des de Sider Web Creator
La majoria de les plataformes d'allotjament web, inclosa Vercel, esperen una carpeta de compilació neta, així que primer heu de reunir els vostres fitxers.
1.1 Descarregueu els fitxers del projecte
Després que Web Creator acabi de generar el lloc, feu clic al botó Descarrega a l'extrem superior dret.
Espereu mentre el sistema empaqueta el vostre projecte.
Rebreu un fitxer .zip llest per a la càrrega d'allotjament web de Vercel.
Extraieu el zip a qualsevol lloc de l'ordinador.
1.2 Entendre l'estructura de fitxers (Important!)
my-website/
├── dist/ ⭐ Aquest és el més important! Compilació de producció del lloc
│ ├── index.html → La pàgina d'inici del vostre lloc
│ ├── assets/ → Estils i scripts
│ └── ...
├── src/ 📝 Carpeta de codi font
├── package.json 📦 Configuració del projecte
└── Altres fitxers de configuració...
Recordatori clau: Molta gent intenta executar fitxers a la carpeta arrel; això és incorrecte! Els continguts dins de dist/ són els que s'executen directament en un navegador o en l'allotjament web de Vercel.
1.3 Prova de vista prèvia local
Entreu a la carpeta dist/.
Feu doble clic a index.html.
El lloc s'obre al vostre navegador.
Verifiqueu que tot funcioni abans de pagar pels complements premium de Vercel.
🚀 Pas 2: Trieu una plataforma de desplegament
A continuació, es mostren opcions d'allotjament web totalment gratuïtes i aptes per a principiants, amb Vercel com a protagonista:
| |
|---|
| Allotjament web totalment gratuït • Desplegament d'arrossegar i deixar anar • HTTPS gratuït • Ràpid i fiable • Dominis personalitzats • Enllaços d'IA natius |
☁ Cloudflare Pages (més ràpid) | Allotjament CDN global • 100% gratuït • Fiabilitat de nivell empresarial |
| IU polida • Allotjament ric en funcions • Comunitat forta |
📤 Pas 3: Desplegueu a Vercel (Guia detallada)
Tot i que Vercel es presenta com una plataforma per a desenvolupadors, penseu-hi com un allotjament web ultramodern amb la comoditat d'un botó.
3.1 Registreu-vos a Vercel
Visiteu vercel.com.
Feu clic a Registra't.
Registreu-vos amb GitHub, Google o correu electrònic.
Es recomana registrar-se amb GitHub; simplifica les futures actualitzacions d'allotjament web de Vercel.
3.2 Desplegueu el lloc
**Mètode A: Càrrega d'arrossegar i deixar anar (millor per a principiants)
Després d'iniciar la sessió, feu clic a Nou projecte.
Trieu Navega per totes les plantilles → Estàtic: perfecte per a l'allotjament web de fitxers estàtics de Vercel.
Arrossegueu la carpeta dist/ a l'àrea de càrrega.
Introduïu un nom de projecte (p. ex., my-awesome-website).
Feu clic a Desplega per activar el flux de treball d'allotjament web de Vercel.
Espereu 2-3 minuts: fet!
**Mètode B: Integració de GitHub (millor per a desenvolupadors)
Envieu tot el projecte a GitHub.
A Vercel, seleccioneu Importa el repositori Git.
Connecteu el vostre repositori; cada enviament es torna a desplegar mitjançant la integració contínua d'allotjament web de Vercel.
Configuració de la compilació:
Ordre de compilació: npm run build
Directori de sortida: dist
Feu clic a Desplega.
3.3 Obteniu l'URL del vostre lloc
Després del desplegament, Vercel us ofereix un domini gratuït com your-project-name.vercel.app servit per la seva capa d'allotjament web de xarxa perimetral.
🌐 Pas 4: Compreu i enllaceu el vostre propi domini
4.1 Compreu un domini
Un domini personalitzat eleva el vostre allotjament web de Vercel de hobby a professional.
Registradors recomanats:
Namecheap – baix cost, tauler de control net que combina bé amb qualsevol pila d'allotjament web i Vercel.
GoDaddy – alt reconeixement de marca, servei sòlid per a les necessitats principals d'allotjament web de Vercel.
Alibaba Cloud – convenient per als usuaris de la Xina continental, s'integra amb els ecosistemes d'allotjament web locals més l'encaminament de Vercel.
Tencent Cloud – econòmic, més nodes locals d'allotjament web CDN que poden apuntar a Vercel.
Consells per a la selecció de dominis:
Triar una extensió .com és l'aposta més segura.
Mantingueu el domini curt i memorable.
Eviteu els guions i els números.
4.2 Afegiu el domini a Vercel
Al vostre projecte de Vercel, feu clic a Dominis.
Introduïu el vostre domini (p. ex., mywebsite.com) per informar la plataforma d'allotjament web de Vercel.
Feu clic a Afegeix.
Vercel mostra els registres DNS necessaris que encaminen el trànsit a la seva vora d'allotjament web.
4.3 Configureu els registres DNS
Al tauler de control del vostre registrador, apunteu els registres al vostre proveïdor d'allotjament web, aquí, Vercel:
Tipus: CNAME
Nom: www
Valor: cname.vercel-dns.com
Tipus: A
Nom: @
Valor: 76.76.19.61
Nota: La propagació del DNS sol trigar entre 10 minuts i 24 hores.
4.4 Verifiqueu l'enllaç de domini
Espereu que el DNS es propagui.
Visiteu el vostre domini: el vostre allotjament web de Vercel ara està actiu!
Vercel emet automàticament HTTPS.
✨ Pas 5: Feu que el lloc sembli professional
Un lloc polit assegura als visitants que la vostra elecció d'allotjament web de Vercel és seriosa.
5.1 Afegiu una favicon personalitzada
Prepareu una icona de 32×32 px.
Anomeneu-la favicon.ico.
Col·loqueu-la a l'arrel dist/ perquè el servidor d'allotjament web de Vercel la pugui trobar.
Torneu a desplegar.
5.2 Inseriu informació meta personalitzada
Editeu dist/index.html:
<meta name="description" content="Your website description">
<meta name="author" content="Your Name">
5.3 Google Analytics (opcional)
Registreu-vos a Google Analytics.
Copieu el fragment de seguiment.
Enganxeu-lo dins de l'etiqueta <head>; la majoria de CDN d'allotjament web de Vercel l'emmagatzemen a la memòria cau de manera eficient.
🔧 Resolució de problemes
P1: El lloc sembla trencat.
Assegureu-vos que heu carregat els continguts de dist/ a l'arrel correcta d'allotjament web de Vercel.
Confirmeu que index.html es troba a l'arrel.
Esborreu la memòria cau del navegador.
P2: El domini no es resol.
Comproveu els registres DNS tant al registrador com al tauler de control d'allotjament web de Vercel.
Permeteu fins a 24 h per a la propagació.
Verifiqueu que el domini no hagi caducat.
Poseu-vos en contacte amb el servei d'assistència del registrador.
P3: Vull editar el contingut.
Torneu a generar a Sider Web Creator.
Descarregueu fitxers nous.
Torneu a desplegar a Vercel o al vostre proveïdor d'allotjament alternatiu.
O modifiqueu el codi font i torneu a compilar.
P4: El lloc se sent lent.
Proveu Cloudflare Pages o un altre CDN d'allotjament global si les regions perimetrals d'allotjament web de Vercel no cobreixen el vostre públic.
Comprimiu les imatges.
Activeu Gzip.
🎉 Resum
Enhorabona! Ara heu:
✅ Descarregat correctament el vostre lloc web generat per IA llest
✅ Desplegat de forma gratuïta a una plataforma d'allotjament web basada en el núvol
✅ Assegurat el vostre propi domini personalitzat
✅ Polit l'entorn d'allotjament web perquè sembli totalment professional
El vostre lloc ara és:
🌐 En línia 24/7, impulsat per una infraestructura d'allotjament web fiable
🏷️ Servit sota un domini professional
🔒 Protegit per xifratge HTTPS
⚡ Globalment ràpid gràcies als nodes perimetrals de CDN
🗝️ Totalment propietat i controlat per vosaltres
💡 Passos següents
Optimització SEO: afegiu paraules clau i meta descripcions orientades per augmentar el rànquing de cerca per a la vostra configuració d'allotjament web
Compartir a les xarxes socials: integreu botons de compartició per a les principals plataformes socials
Anàlisi d'usuaris: instal·leu una eina d'anàlisi de trànsit per entendre el comportament dels visitants al vostre lloc allotjat
Actualitzacions contínues: actualitzeu el contingut regularment per mantenir el lloc viu i rellevant
Les còpies de seguretat importen: programeu còpies de seguretat periòdiques de tots els fitxers al vostre entorn d'allotjament web
Ara sou un veritable propietari de llocs web: compartiu el vostre enllaç i mostreu la vostra creació al món!
