Com desplegar un lloc web generat per IA a Netlify com a lloc propi i utilitzar el teu 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 Netlify perquè puguis visitar el lloc a través del teu propi domini.
Aquesta guia et porta pas a pas a través del procés, des d'exportar un projecte a Sider Web Creator fins a acabar amb un lloc web complet sota el teu domini personal, tot desmitificant l'allotjament web i la configuració de Netlify al llarg del camí. 🎯 Què aprendràs
Com descarregar i entendre correctament els fitxers del projecte generats per IA abans de triar un servei d'allotjament web de Netlify.
Instruccions pas a pas per desplegar el lloc de forma gratuïta a la plataforma d'allotjament web basada en el núvol de Netlify.
Com comprar i vincular el teu propi domini personalitzat dins del tauler de control de Netlify i connectar-lo als registres DNS d'allotjament web de bones pràctiques.
Consells professionals per fer que el lloc sembli completament professional i fiable un cop la configuració d'allotjament web de Netlify estigui activa.
📥 Pas 1: Descarrega el teu lloc des de Sider Web Creator
La majoria de plataformes d'allotjament web, inclosa Netlify, esperen una carpeta de compilació neta, així que primer has de reunir els teus fitxers.
1.1 Descarrega els fitxers del projecte
Després que Web Creator acabi de generar el lloc, fes clic al botó Descarrega a l'extrem superior dret.
Espera mentre el sistema empaqueta el teu projecte.
Rebràs un fitxer .zip llest per a la càrrega d'allotjament web de Netlify.
Extreu el zip a qualsevol lloc del teu ordinador.
1.2 Comprendre l'estructura de fitxers (Important!)
el-meu-lloc-web/
├── dist/ ⭐ Això és el més important! Compilació de producció del lloc
│ ├── index.html → La pàgina d'inici del teu 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 Netlify.
1.3 Prova de previsualització local
Entra a la carpeta dist/.
Fes doble clic a index.html.
El lloc s'obre al teu navegador.
Verifica que tot funcioni abans de pagar per complements premium de Netlify.
🚀 Pas 2: Tria una plataforma de desplegament
A continuació, es mostren opcions d'allotjament web completament gratuïtes i fàcils d'utilitzar per a principiants, amb Netlify com a protagonista:
| |
|---|
🌟 Netlify (el més amigable) | IU polida • Allotjament web ric en funcions • HTTPS gratuït • Ràpid i fiable • Dominis personalitzats • Enllaços d'IA natives |
☁ Cloudflare Pages (el més ràpid) | Allotjament CDN global • 100% gratuït • Fiabilitat de grau empresarial |
✨ Vercel (orientat a desenvolupadors) | CI/CD amb botó • Ideal per a frameworks avançats |
📤 Pas 3: Desplega a Netlify (Guia detallada)
Tot i que Netlify és conegut per les seves funcions amigables per a desenvolupadors, pots tractar-lo com un allotjament web ultramodern amb la comoditat d'un botó.
3.1 Registra't a Netlify
Visita netlify.com.
Fes clic a Afegeix un lloc nou o Comença de forma gratuïta.
Registra't amb GitHub, GitLab, Bitbucket o correu electrònic.
Es recomana iniciar sessió amb GitHub; agilitza les futures actualitzacions d'allotjament web de Netlify.
3.2 Desplega el lloc
**Mètode A: Càrrega d'arrossegar i deixar anar (millor per a principiants)**
Després d'iniciar sessió, fes clic a Llocs → Afegeix un lloc nou → Desplega manualment.
Arrossega la carpeta dist/ a l'àrea de càrrega, perfecte per a l'allotjament web de fitxers estàtics de Netlify.
Espera 1-2 minuts fins que la barra de progrés arribi al 100%.
Netlify assigna un subdomini temporal com adoring-yalow-12345.netlify.app: el teu lloc està en directe!
**Mètode B: Integració de Git (millor per al desplegament continu)**
Puja tot el projecte a GitHub.
A Netlify, selecciona Llocs → Afegeix un lloc nou → Importa un projecte existent.
Tria el teu repositori; cada pujada es torna a desplegar mitjançant la integració contínua d'allotjament web de Netlify.
Configuració de la compilació:
Ordre de compilació: npm run build
Directori de publicació: dist
Fes clic a Desplega el lloc.
**Mètode C: Netlify CLI (scriptable i avançat)**
npm install -g netlify-cli # instal·lació única
netlify init # crea el lloc i enllaça la carpeta local
netlify deploy # URL de previsualització
netlify deploy --prod # URL de producció
La CLI agrupa, carrega i retorna un URL d'allotjament web de Netlify en directe.
3.3 Aconsegueix l'URL del teu lloc
Després del desplegament, Netlify et proporciona un domini gratuït com el-nom-del-teu-lloc.netlify.app servit per la seva capa d'allotjament web de xarxa perimetral.
🌐 Pas 4: Compra i vincula el teu propi domini
4.1 Compra un domini
Un domini personalitzat eleva el teu allotjament web de Netlify d'afició a professional.
Registradors recomanats:
Namecheap – baix cost, tauler de control net que combina bé amb qualsevol pila d'allotjament web i Netlify.
GoDaddy – alt reconeixement de marca, servei sòlid per a les necessitats principals d'allotjament web de Netlify.
Alibaba Cloud – convenient per als usuaris de la Xina continental, s'integra amb els ecosistemes d'allotjament web locals i l'encaminament de Netlify.
Tencent Cloud – econòmic, a més de nodes d'allotjament web CDN locals que poden apuntar a Netlify.
Consells per a la selecció de dominis:
Triar una extensió .com és l'aposta més segura.
Mantén el domini curt i memorable.
Evita els guions i els números.
4.2 Afegeix el domini a Netlify
Al tauler de control del teu lloc de Netlify, fes clic a Configuració del domini → Afegeix un domini personalitzat.
Introdueix el teu domini (p. ex., elmeullocweb.com) per informar la plataforma d'allotjament web de Netlify.
Fes clic a Verifica i després a Afegeix domini.
Netlify mostra els registres DNS necessaris que encaminen el trànsit a la seva vora d'allotjament web.
4.3 Configura els registres DNS
Al tauler de control del teu registrador, apunta els registres a Netlify:
Tipus: CNAME
Nom: www
Valor: el-nom-del-teu-lloc.netlify.app
Tipus: ALIAS / ANAME
Nom: @
Valor: apex-loadbalancer.netlify.com
Nota: La propagació del DNS sol trigar entre 10 minuts i 24 hores.
4.4 Verifica la vinculació del domini
Espera que es propagui el DNS.
Visita el teu domini: el teu allotjament web de Netlify ara està actiu!
Netlify emet i renova automàticament els certificats HTTPS.
✨ Pas 5: Fes que el lloc sembli professional
Un lloc polit assegura als visitants que la teva elecció d'allotjament web de Netlify és seriosa.
5.1 Afegeix un favicon personalitzat
Prepara una icona de 32 × 32 px.
Anomena-la favicon.ico.
Col·loca-la a l'arrel dist/ perquè el servidor d'allotjament web de Netlify la pugui trobar.
Torna a desplegar.
5.2 Insereix informació meta personalitzada
Edita dist/index.html:
<meta name="description" content="Your website description">
<meta name="author" content="Your Name">
5.3 Anàlisi (opcional)
Activa Netlify Analytics al tauler de control o registra't a Google Analytics.
Copia el fragment de seguiment.
Enganxa'l dins de l'etiqueta <head>; la majoria de CDN d'allotjament web de Netlify l'emmagatzemen a la memòria cau de manera eficient.
🔧 Resolució de problemes
| |
|---|
404 després del desplegament | Assegura't que el Directori de publicació sigui dist, no l'arrel del projecte. |
| Utilitza Git CI o la CLI netlify deploy (sense límit de 50 MB). |
El domini encara mostra Netlify 404 | Espera el TTL del DNS o buida la memòria cau local; verifica els valors CNAME/ALIAS. |
🎉 Resum
Enhorabona! Ara has:
✅ Descarregat correctament el teu lloc web generat per IA llest per a l'allotjament web de Netlify
✅ Desplegat de forma gratuïta a una plataforma d'allotjament web de Netlify basada en el núvol
✅ Assegurat el teu propi domini personalitzat
✅ Polit l'entorn d'allotjament web de Netlify perquè sembli totalment professional
El teu lloc ara és:
🌐 En línia 24/7, impulsat per una infraestructura d'allotjament web de Netlify fiable
🏷️ Servit sota un domini professional
🔒 Protegit per xifratge HTTPS
⚡ Globalment ràpid gràcies als nodes perimetrals de la CDN
🗝️ Totalment propietat i controlat per tu
💡 Següents passos
Optimització SEO: afegeix paraules clau i meta descripcions dirigides per augmentar el rànquing de cerca de la teva configuració d'allotjament web de Netlify
Compartir a les xarxes socials: integra botons de compartició per a les principals plataformes socials
Anàlisi d'usuaris: instal·la una eina d'anàlisi de trànsit per entendre el comportament dels visitants al teu lloc allotjat
Actualitzacions contínues: actualitza el contingut regularment per mantenir el lloc viu i rellevant
Les còpies de seguretat són importants: programa còpies de seguretat periòdiques de tots els fitxers al teu entorn d'allotjament web de Netlify
Ara ets un veritable propietari d'un lloc web: comparteix el teu enllaç i mostra la teva creació al món!
