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 GitHub Pages 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ó de GitHub Pages.
🎯 Què aprendràs
Com descarregar i entendre correctament els fitxers del projecte generats per IA abans de triar un flux de treball d'allotjament web de GitHub Pages.
Instruccions pas a pas per desplegar el lloc de forma gratuïta a GitHub Pages.
Com comprar i vincular el teu propi domini personalitzat dins de la configuració de GitHub Pages i connectar-lo als registres DNS de millor pràctica.
Consells professionals per fer que el lloc sembli completament professional i fiable un cop la configuració de GitHub Pages estigui activa.
📥 Pas 1: Descarrega el teu lloc des de Sider Web Creator
La majoria de plataformes d'allotjament estàtic, incloent-hi GitHub Pages, esperen una carpeta de compilació neta, així que primer has de recopilar els teus fitxers.
1.1 Descarrega els fitxers del projecte
Després que Web Creator acabi de generar el lloc, fes clic al botó Descarregar a l'extrem superior dret.
Espera mentre el sistema empaqueta el teu projecte.
Rebràs un fitxer .zip llest per pujar a GitHub Pages.
Extreu el zip a qualsevol lloc del teu ordinador.
1.2 Comprendre l'estructura de fitxers (Important!)
my‑website/
├── dist/ ⭐ Compilació de producció per a **GitHub Pages**
│ ├── index.html → Pàgina d'inici
│ ├── assets/ → Estils i scripts
│ └── …
├── src/ 📝 Carpeta de codi font
├── package.json 📦 Configuració del projecte
└── …altres fitxers
Recordatori clau: Només el contingut dins de dist/ es publica a GitHub Pages.
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 pujar a GitHub Pages.
🚀 Pas 2: Tria una plataforma de desplegament
Tot i que GitHub Pages és l'heroi d'aquesta guia, aquí teniu una comparació ràpida:
| |
|---|
🌟 GitHub Pages (focus d'aquesta guia) | Totalment gratuït • Desplegament d'arrossegar i deixar anar o git push • HTTPS gratuït • CDN global • Dominis personalitzats • CI natiu amb GitHub Actions |
| Xarxa de vora global • 100% gratuït • Extremadament ràpid |
| IU refinada • Rica en funcions |
📤 Pas 3: Desplega a GitHub Pages (Guia detallada)
Tot i que GitHub Pages viu dins d'una plataforma de desenvolupadors, pensa en ella com un allotjament web ultramodern amb la comoditat d'un botó.
3.1 Registra't i crea un repositori
Visita github.com i inicia sessió.
Fes clic a + Nou repositori.
Anomena'l my‑website i tria Públic (o Privat si tens un pla de pagament; GitHub Pages ara admet repositoris privats).
Deixa Inicialitzar amb README sense marcar si tens previst pujar-lo més tard.
3.2 Afegeix els fitxers del teu lloc
Mètode A: Càrrega d'arrossegar i deixar anar (millor per a principiants)
A la pestanya Codi del repositori, fes clic a Afegeix fitxer → Puja fitxers.
Deixa anar tot el que hi ha dins de dist/.
Desplaça't cap avall i fes clic a Confirma els canvis.
Mètode B: Git CLI (millor per a desenvolupadors)
# Clona el repositori buit
git clone https://github.com/<user>/my‑website.git
cd my‑website
# Copia la sortida de la compilació
cp -r /path/to/dist/* .
# Confirma i puja
git add .
git commit -m "Desplegament inicial de **GitHub Pages**"
git push origin main
Qualsevol dels dos camins et deixa amb fitxers estàtics a l'arrel del repositori, perfecte per a GitHub Pages.
3.3 Habilita GitHub Pages
Ves a Configuració → Pages.
A Font, tria Desplega des d'una branca → main (/root).
Fes clic a Desa. GitHub Pages es construeix en ~30 s i retorna un URL com https://<user>.github.io/my‑website/.
3.4 Aconsegueix el teu URL per defecte
Visita l'enllaç per confirmar que tot es carrega. GitHub Pages serveix automàticament a través de CDN global.
🌐 Pas 4: Compra i vincula el teu propi domini
4.1 Compra un domini
Registradors suggerits (tots funcionen bé amb GitHub Pages): Namecheap, GoDaddy, Alibaba Cloud, Tencent Cloud. Tria un .com curt sempre que sigui possible.
4.2 Afegeix el domini a GitHub Pages
Encara a Configuració → Pages, troba Domini personalitzat.
Introdueix mywebsite.com o www.mywebsite.com.
Fes clic a Desa. GitHub Pages escriu un fitxer CNAME automàticament.
4.3 Configura els registres DNS
| | |
|---|
| | 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
|
| | |
Espera de 10 min a 24 h per a la propagació. Aquestes IP són constants per a GitHub Pages. |
4.4 Força HTTPS
Després que el DNS es propagui, actualitza la configuració de Pages i activa Força HTTPS. Els certificats Let's Encrypt s'emeten automàticament.
✨ Pas 5: Fes que el lloc sembli professional
5.1 Afegeix una icona de favicon personalitzada
Prepara una icona de 32×32 px anomenada favicon.ico.
Col·loca-la a l'arrel del repositori.
Confirma i puja; GitHub Pages la serveix instantàniament.
5.2 Insereix informació meta personalitzada
Edita index.html a l'arrel del repositori:
<meta name="description" content="Your website description on **GitHub Pages**">
<meta name="author" content="Your Name">
5.3 Analítica (opcional)
Enganxa fragments de GA / Plausible dins de <head>; GitHub Pages respecta les capçaleres de memòria cau.
🔧 Resolució de problemes
Pàgina en blanc? Confirma que index.html es troba a l'arrel del repositori i que les rutes dels actius són relatives.
El domini fa bucles a .github.io? Comprova doblement els registres A/CNAME i espera el TTL complet.
L'interruptor HTTPS està desactivat? El DNS encara no és correcte; verifica-ho amb dig.
🎉 Resum
Felicitats! Ara has:
✅ Descarregat amb èxit el teu lloc web generat per IA llest per a l'allotjament de GitHub Pages.
✅ Desplegat de forma gratuïta a GitHub Pages.
✅ Assegurat el teu propi domini personalitzat.
✅ Refinat l'entorn de GitHub Pages perquè sembli totalment professional.
El teu lloc ara és:
🌐 En línia 24/7, impulsat per GitHub Pages CDN.
🏷️ Servit sota un domini professional.
🔒 Protegit per xifratge HTTPS.
⚡ Globalment ràpid gràcies als nodes de vora de GitHub Pages.
🗝️ Totalment propietat i controlat per tu.
💡 Següents passos
Optimització SEO: afegeix paraules clau i meta descripcions orientades per augmentar el rànquing de cerca per a la teva configuració de GitHub Pages.
Compartir a les xarxes socials: integra botons de compartir per a les principals plataformes.
Actualitzacions contínues: confirma els canvis regularment; GitHub Pages es torna a desplegar automàticament.
Còpies de seguretat: habilita la protecció del repositori de GitHub o replica el repositori.
Ara ets un veritable propietari de llocs web: comparteix el teu enllaç de GitHub Pages i mostra la teva creació al món!
