Cómo Instalar un Entorno de Desarrollo Web con Ubuntu, GitHub y Visual Studio Code

Introducción:
¿Estás comenzando en el mundo del desarrollo web y no sabes por dónde empezar? En este artículo te explicamos paso a paso cómo montar un entorno de desarrollo profesional usando Ubuntu, GitHub y Visual Studio Code. Esta guía está pensada especialmente para estudiantes de Sistemas Microinformáticos y Redes, pero cualquier persona interesada en aprender desarrollo web podrá seguirla fácilmente. ¡Acompáñanos y deja tu entorno listo para crear tus primeras webs!

¿Por qué usar una máquina virtual con Ubuntu?
El primer paso recomendado es utilizar una máquina virtual, preferiblemente con Linux. Ubuntu es la distribución elegida en este caso porque es la que se usa en clase y permite tener permisos de administrador. Esto es esencial para poder instalar paquetes y herramientas necesarias para el desarrollo web. Aunque todo esto también puede hacerse en Windows, trabajar con Ubuntu te prepara mejor para entornos de producción reales.

Herramientas necesarias para empezar
Para seguir esta guía, necesitarás:

Un navegador web (se utiliza Brave, pero puedes usar el que prefieras).
Visual Studio Code, que será la aplicación central para todas las prácticas.
Git, para control de versiones.
Una cuenta de GitHub, donde subirás tus proyectos.

Crear una cuenta en GitHub y enlazarla a tu entorno
GitHub será tu repositorio de código en la nube. Aunque parezca alejado del desarrollo web, aprender a usar Git y GitHub desde el principio es clave. Sigue estos pasos:

Regístrate en GitHub con tu cuenta de Google.
Crea una nueva clave SSH desde tu terminal con el comando: ssh-keygen
Copia la clave pública generada y añádela a tu cuenta de GitHub desde Settings > SSH and GPG keys.
Ya con esto, tu ordenador estará listo para enviar código a GitHub.

Configurando tu primer repositorio
Una vez creada la cuenta:

Crea un nuevo repositorio llamado introduccion-html.
Asegúrate de seleccionar la opción SSH en lugar de HTTPS para poder conectarte con tu clave.
Desde el terminal, crea una carpeta llamada code y dentro otra llamada introduccion-html.
Inicializa el repositorio con los siguientes comandos: git init touch README.md git add . git commit -m "Primer commit" git branch -M main git remote add origin git@github.com:usuario/introduccion-html.git git push -u origin main

Configurando Visual Studio Code para desarrollo web
Con la carpeta introduccion-html creada, ábrela desde Visual Studio Code usando la opción Open Folder. Esto es fundamental para que Git detecte correctamente los cambios.

Crea un nuevo archivo llamado index.html.
Usa la plantilla HTML5 básica escribiendo html y seleccionando HTML:5.
Modifica el contenido para personalizar tu primer documento: <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Introducción HTML</title> </head> <body> <h1>Mi primer documento HTML</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> </body> </html>

Control de versiones con Git desde Visual Studio Code
Cuando guardes cambios, Visual Studio Code detectará automáticamente las modificaciones y te permitirá:

Añadir los archivos al área de staging.
Escribir un mensaje de commit descriptivo (por ejemplo, «Primer documento HTML»).
Sincronizar los cambios con GitHub.

Esto asegura que nunca pierdas tu trabajo y puedas retomarlo desde cualquier lugar.

Instalando Live Server: Visualiza tus cambios en tiempo real
Una de las extensiones más útiles de Visual Studio Code es Live Server, con más de 68 millones de descargas. Esta herramienta permite abrir tus archivos HTML en el navegador y ver los cambios reflejados automáticamente al guardar.

Pasos:

Ve a la sección de extensiones.
Busca e instala “Live Server”.
Haz clic derecho sobre index.html y selecciona “Open with Live Server”.

Ahora podrás ver tu web en el navegador y cada cambio que hagas se actualizará al instante. Ideal para trabajar con dos monitores o para una experiencia de desarrollo fluida.

Conclusión
Con este entorno ya configurado, estás listo para empezar a escribir código HTML, CSS y JavaScript sin preocuparte por perder tu trabajo. En el siguiente vídeo aprenderás a publicar tu web en un servidor para que otros puedan verla en línea.

Si eres alumno del curso, no dudes en preguntar en clase cualquier duda. Y si has llegado hasta aquí por tu cuenta, ¡déjame un comentario contándome desde dónde ves el vídeo!

No olvides darle «me gusta», suscribirte al canal y activar la campanita para no perderte el próximo vídeo. ¡Nos vemos pronto!