# Desplegar proyectos en GitHub Pages

> Aprende a desplegar proyectos en GitHub Pages paso a paso: HTML, CSS, JavaScript, Vite, errores comunes, rutas y buenas prácticas.

- URL canónica: https://www.martagonzalez.dev/blog/desplegar-proyecto-en-github-pages/
- Fecha de publicación: 2022-11-26T11:53:09
- Última actualización: 2026-06-15T10:58:53

---

Github Pages nos permite generar sitios web estáticos o serverless de proyectos a partir de nuestros repositorios publicados en Github de forma fácil y gratuita.
 
Para empezar es necesario tener una cuenta de usuario en la plataforma de Github y tener instalado Git en nuestra máquina.
 
## Crear repositorio
 
Para el ejemplo crearemos un nuevo repositorio desde [github.com/new](http://github.com/new).
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2022/11/desplegar-proyectos-en-githubpages-crear-repositorio.jpg)
 
Podemos hacer un clonado del proyecto o irnos a nuestro editor de código, crear un directorio, añadir contenido y subir los cambios al nuevo repositorio. Vamos a hacer lo segundo.
 
Creamos un nuevo directorio para nuestro proyecto y accedemos al mismo.
 
## Incluir contenido al proyecto
 
> mkdir desplegar-en-githubpages > cd desplegar-en-githubpages Para el ejemplo crearemos un archivo index.html desde nuestro editor de código en el cual incluiremos una estructura de html5 básica rápidamente mediante Emmet .
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2022/11/desplegar-proyectos-en-githubpages-crear-estructura-html5-emmet.jpg)
 
Obtenemos la siguiente estructura a la que añadiremos un mensaje de Hola Mundo que se pintará por pantalla.
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2022/11/desplegar-proyectos-en-githubpages-crear-estructura-html5-emmet-hola-mundo.jpg)
 
Volvemos al terminal e inicializamos git.
 
> git init Incluimos nuestros cambios por primera vez.
 
> git add index.html > git commit -m "First Commit" > git branch -M main > git remote add origin https://github.com/[usuario]^*/[repositorio].git > git push -u origin main ![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2022/11/desplegar-proyectos-en-githubpages-first-commit-1024x212.jpg) ## Habilitar GitHub Pages y desplegar proyecto Volvemos a la página de GitHub y accedemos a la sección Pages de los Settings del repositorio. Seleccionamos una rama para habilitar GitHub Pages.
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2022/11/desplegar-proyectos-en-githubpages-settings-pages-branch-1024x550.jpg)
 
En la barra lateral de nuestro repositorio ahora podemos ver la sección de Enviroments y github-pages desplegando.
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2022/11/desplegar-proyectos-en-githubpages-habilitar-githubpages-enviroments.jpg)
 
Si hacemos clic sobre la opción del entorno de GitHub Pages accedemos al historial desde donde podemos verificar si el despliegue se ha realizado y ver el proyecto desplegado en [usuario].github.io/[repositorio]
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2022/11/desplegar-proyectos-en-githubpages-deployment-history.jpg)