Com desplegar un lloc web generat per IA a Heroku 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 Heroku 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, alhora que desmitifica tant l'allotjament web com la configuració d'Heroku pel camí. Com que Heroku s'executa a la infraestructura global d'Amazon i admet l'escalat automàtic, obtens l'elasticitat del núvol amb un flux de treball amigable per al front‑end.
🎯 Què aprendràs
Com descarregar i entendre correctament els fitxers de projecte generats per IA abans de triar l'allotjament web d'Heroku.
Instruccions pas a pas per desplegar el lloc de forma gratuïta a la plataforma d'allotjament web basada en el núvol d'Heroku.
Com comprar i vincular el teu propi domini personalitzat dins del tauler de control d'Heroku 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 d'Heroku estigui activa.
📥 Pas 1: Descarrega el teu lloc des de Sider Web Creator
La majoria de plataformes d'allotjament web, incloent-hi Heroku, 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 pujar a Heroku. Extreu el zip a qualsevol lloc del teu ordinador.
1.2 Entén l'estructura de fitxers (Important!)
el-meu-lloc-web/
├── dist/ ⭐ Compilació de producció del lloc per a Heroku
│ ├── index.html → 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 d'Heroku.
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 d'Heroku.
🚀 Pas 2: Tria una plataforma de desplegament
A continuació, es mostren opcions d'allotjament web completament gratuïtes i aptes per a principiants, amb Heroku com a protagonista:
| |
|---|
| Nivell totalment gratuït • Desplegament basat en Git • HTTPS gratuït • Dominis personalitzats • Suport de back‑end dinàmic |
| Allotjament CDN global • 100% gratuït • Funcions d'avantguarda |
| IU polida • Allotjament ric en funcions • Comunitat forta |
Consell: fins i tot si finalment migres, dominar Heroku primer et proporciona una base sòlida com una roca.
📤 Pas 3: Desplega a Heroku (Guia detallada)
Tot i que Heroku es comercialitza com una plataforma per a desenvolupadors, pensa en ella com un allotjament web ultramodern amb la comoditat de prémer un botó.
3.1 Instal·la la CLI d'Heroku i inicia la sessió
# macOS
brew tap heroku/brew && brew install heroku
heroku login # obre el navegador per a l'autenticació
La CLI enllaça ordres Git locals a la plataforma Heroku.
3.2 Crea una aplicació Heroku
git init # si encara no està sota Git
heroku apps:create el-meu-lloc-impressionant # crea l'aplicació i el remot "heroku"
Heroku assigna automàticament un subdomini *.herokuapp.com aleatori.
3.3 Desplega el lloc
Mètode A: Càrrega de Buildpack estàtic (millor per a principiants)
heroku buildpacks:set heroku-buildpack-static
# Assegura't que el buildpack pugui trobar els teus fitxers
echo '{"root":"dist"}' > static.json
git add . && git commit -m "Commit inicial"
git push heroku main
Mètode B: Flux de treball Git estàndard (millor per a desenvolupadors)
# mantén la teva estructura de projecte habitual
# Heroku detecta automàticament Node, Python, Ruby, etc.
git add . && git commit -m "Commit inicial"
git push heroku main
En 2–3 minuts, Heroku crea el projecte i el serveix globalment.
3.4 Aconsegueix l'URL del teu lloc
Després del desplegament, Heroku et proporciona un domini gratuït com el-meu-lloc-impressionant.herokuapp.com servit per la seva capa de xarxa d'avantguarda.
🌐 Pas 4: Compra i vincula el teu propi domini
4.1 Compra un domini
Un domini personalitzat eleva el teu desplegament d'Heroku d'afició a professional. Registradors recomanats: Namecheap, GoDaddy, Alibaba Cloud, Tencent Cloud.
4.2 Afegeix el domini a Heroku
Al teu tauler de control d'Heroku, obre l'aplicació → Configuració → Dominis i certificats → Afegeix domini. Introdueix el teu domini (p. ex., elmeullocweb.com). Heroku mostra l'objectiu DNS necessari.
4.3 Configura els registres DNS
Al teu registrador, crea un registre CNAME per a www (o ALIAS/ANAME a l'àpex) que apunti a l'objectiu DNS d'Heroku. La propagació del DNS sol trigar entre 10 minuts i 24 hores.
4.4 Verifica la vinculació del domini
Espera que el DNS es propagui, després visita el teu domini: el teu allotjament web d'Heroku ara està actiu! Heroku emet automàticament HTTPS mitjançant la gestió automatitzada de certificats.
✨ Pas 5: Fes que el lloc sembli professional
Un lloc polit assegura als visitants que el teu desplegament d'Heroku és seriós.
5.1 Afegeix una icona de favicon personalitzada
Prepara una icona de 32 × 32 px, anomena-la favicon.ico, col·loca-la a dist/, fes commit i envia-la a Heroku.
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 Google Analytics (opcional)
Registra't a Google Analytics, copia el fragment de seguiment i enganxa'l dins de l'etiqueta <head>; les CDN d'Heroku l'emmagatzemen en memòria cau de manera eficient.
🔧 Resolució de problemes
| |
|---|
| Assegura't que has pujat el contingut de dist/ a l'arrel correcta d'Heroku; confirma que index.html és accessible; buida la memòria cau del navegador. |
| Comprova els registres DNS tant al registrador com al tauler de control d'Heroku; permet fins a 24 h per a la propagació; verifica que el domini estigui actiu. |
| Regenera a Sider Web Creator, descarrega fitxers nous, torna a desplegar a Heroku o modifica el codi font i torna a compilar. |
| Comprimeix les imatges; activa gzip; considera un complement CDN si el públic està lluny de les regions d'Heroku. |
🎉 Resum
Felicitats! Ara has:
✅ Descarregat amb èxit el teu lloc web generat per IA llest per a l'allotjament web d'Heroku.
✅ Desplegat de forma gratuïta a una plataforma Heroku basada en el núvol.
✅ Assegurat el teu propi domini personalitzat.
✅ Polit l'entorn d'Heroku perquè sembli completament professional.
El teu lloc ara és:
🌐 En línia 24/7, impulsat per una infraestructura Heroku fiable.
🏷️ Servit sota un domini professional.
🔒 Protegit per xifratge HTTPS.
⚡ Globalment ràpid gràcies als nodes d'avantguarda de la CDN.
🗝️ Totalment posseït i controlat per tu.
💡 Següents passos
Optimització SEO: afegeix paraules clau i meta descripcions orientades per augmentar el rànquing de cerca del teu desplegament d'Heroku.
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 a Heroku.
Actualitzacions contínues: actualitza el contingut regularment per mantenir el lloc viu i rellevant.
Les còpies de seguretat importen: programa còpies de seguretat periòdiques de tots els fitxers al teu entorn Heroku.
Ara ets un veritable propietari de llocs web: comparteix el teu enllaç i mostra la teva creació al món!
