🐧 De Cero a Deploy: Tu Primera Web en Linux
Guía práctica desde cero para desplegar tu primera página web en un servidor Linux. Sin conocimientos previos necesarios.
Objetivos
- Entender cómo funciona la web (navegador → DNS → servidor)
- Configurar un laboratorio gratuito en KillerCoda
- Aprender los comandos esenciales de Linux
- Instalar y configurar un servidor web (Nginx y Apache)
- Hacer tu primer deploy de una página HTML
Módulo 0 — ¿Qué vamos a hacer y por qué?
Cuando escribís una URL en tu navegador:
👤 Navegador → 🌐 DNS resuelve IP → 🖥️ Servidor Web (Nginx/Apache) → 📄 Devuelve HTML
Analogía
Pensá en un restaurante: tu navegador es el cliente, Internet es el camino, el servidor web (Nginx/Apache) es el mesero, y tus archivos HTML son la comida.
¿Qué es un Servidor Web? Un programa que escucha peticiones HTTP (puerto 80) o HTTPS (443) y devuelve archivos. Los más populares: Nginx y Apache.
¿Qué es Linux? Un sistema operativo para servidores. Gratuito, estable y seguro. Usamos Ubuntu.
Módulo 1 — Configurar KillerCoda
KillerCoda es una plataforma gratuita que te da un servidor Linux real en el navegador. Tenemos nuestro propio playground con escenarios preparados:
- Ir al Playground ROXS o a killercoda.com y crear cuenta (GitHub o Google)
- Seleccionar el escenario de la clase o un Ubuntu Playground
- Esperar unos segundos... ¡ya tenés un servidor Linux real!
Verificar que funciona:
cat /etc/os-release # Ver sistema operativo
whoami # Ver usuario actual (debería ser root)
pwd # Ver directorio actual
Importante
Las sesiones son temporales (~60 min). Todo se borra al terminar. Perfecto para practicar sin riesgo.
Módulo 2 — Linux: Comandos esenciales
Estructura del sistema de archivos
/ ← Raíz del sistema
├── home/ ← Carpetas de usuarios
├── var/www/html/ ← 📌 Aquí van las páginas web
├── etc/nginx/ ← Config de Nginx
├── etc/apache2/ ← Config de Apache
├── tmp/ ← Archivos temporales
└── root/ ← Carpeta del usuario root
Navegación
pwd # ¿Dónde estoy?
ls -la # ¿Qué hay acá? (detallado)
cd /var/www # Ir a una carpeta
cd .. # Subir un nivel
cd ~ # Volver al home
Manejo de archivos
mkdir mi-sitio-web # Crear carpeta
touch index.html # Crear archivo vacío
nano index.html # Editar (Ctrl+O guardar, Ctrl+X salir)
cat index.html # Ver contenido
cp a.html b.html # Copiar
mv a.html /tmp/ # Mover o renombrar
rm archivo.txt # Borrar (¡sin papelera!)
rm -r carpeta/ # Borrar carpeta y contenido
Sistema y servicios
apt update # Actualizar lista de paquetes
apt install nginx # Instalar programa
systemctl start nginx # Iniciar servicio
systemctl stop nginx # Detener
systemctl restart nginx # Reiniciar
systemctl status nginx # Ver estado
systemctl enable nginx # Auto-iniciar al prender
curl http://localhost # Petición web desde terminal
Tabla resumen
| Comando | Qué hace | Ejemplo |
|---|---|---|
pwd | Muestra dónde estás | pwd |
ls | Lista archivos | ls -la |
cd | Cambia directorio | cd /var/www |
mkdir | Crea carpeta | mkdir sitio |
touch | Crea archivo vacío | touch index.html |
nano | Edita archivo | nano index.html |
cat | Muestra contenido | cat index.html |
cp | Copia | cp a.html b.html |
mv | Mueve/renombra | mv a.html /tmp/ |
rm | Borra | rm archivo.txt |
apt | Instala programas | apt install nginx |
systemctl | Controla servicios | systemctl start nginx |
curl | Petición web | curl localhost |
chmod | Cambia permisos | chmod 755 archivo |
chown | Cambia dueño | chown www-data archivo |
Módulo 3 — ¿Qué servidor web elegir?
| Característica | Nginx | Apache |
|---|---|---|
| Velocidad | ⚡ Muy rápido | Bueno |
| Uso de memoria | Bajo | Mayor |
| Configuración | Centralizada | .htaccess por carpeta |
| Sitios estáticos | Excelente | Bueno |
| Popularidad | #1 en el mundo | #2 histórico |
| Mejor para | Sitios estáticos, proxy | Hosting compartido, PHP |
Recomendación
Nginx es la mejor opción para empezar. Más simple, más rápido, estándar actual de la industria.
Módulo 4 — Deploy con Nginx
Paso 1: Instalar
apt update
apt install nginx -y
systemctl start nginx
systemctl enable nginx
Paso 2: Verificar
systemctl status nginx
curl http://localhost
# Deberías ver el HTML de bienvenida de Nginx
Paso 3: Crear tu página
mkdir -p /var/www/mi-sitio
nano /var/www/mi-sitio/index.html
Contenido HTML de ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primera Web en Linux</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
color: white; min-height: 100vh;
display: flex; align-items: center; justify-content: center;
}
.container { text-align: center; padding: 2rem; }
h1 { font-size: 3rem; margin-bottom: 1rem; }
p { font-size: 1.3rem; opacity: 0.8; }
</style>
</head>
<body>
<div class="container">
<h1>🚀 ¡Hola Mundo!</h1>
<p>Mi primera página web servida desde Linux</p>
</div>
</body>
</html>
Paso 4: Configurar Nginx
nano /etc/nginx/sites-available/mi-sitio
server {
listen 80;
listen [::]:80;
server_name _;
root /var/www/mi-sitio;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
Paso 5: Activar y reiniciar
# Desactivar sitio por defecto
rm /etc/nginx/sites-enabled/default
# Activar tu sitio
ln -s /etc/nginx/sites-available/mi-sitio /etc/nginx/sites-enabled/
# Verificar configuración
nginx -t
# Reiniciar
systemctl restart nginx
# ¡Probar!
curl http://localhost
¡Felicidades!
Si ves tu HTML con curl http://localhost, tu página ya está siendo servida por Nginx. En KillerCoda podés hacer clic en el ícono del puerto 80 para verlo en el navegador.
Módulo 5 — Deploy con Apache (alternativa)
aviso
Si ya instalaste Nginx, primero detenelo: systemctl stop nginx
apt update
apt install apache2 -y
systemctl start apache2
systemctl enable apache2
Configuración de Apache:
nano /etc/apache2/sites-available/mi-sitio.conf
<VirtualHost *:80>
ServerAdmin admin@mi-sitio.com
DocumentRoot /var/www/mi-sitio
ServerName localhost
<Directory /var/www/mi-sitio>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
a2dissite 000-default.conf # Desactivar default
a2ensite mi-sitio.conf # Activar tu sitio
apache2ctl configtest # Verificar
systemctl restart apache2 # Reiniciar
Módulo 6 — Métodos de deploy
| Método | Cuándo usarlo |
|---|---|
| Crear archivos en el servidor | Practicando, sitios simples |
scp (Secure Copy) | Subir desde tu máquina local |
git clone | El método profesional |
| Descargar ZIP/TAR | Desde internet |
# Con Git (el más usado en el mundo real)
apt install git -y
cd /var/www
git clone https://github.com/tu-usuario/mi-sitio.git mi-sitio
chown -R www-data:www-data /var/www/mi-sitio
Extras
Permisos
chmod 644 /var/www/mi-sitio/index.html # Archivos: 644
chmod 755 /var/www/mi-sitio/ # Carpetas: 755
chown -R www-data:www-data /var/www/mi-sitio
| Número | Significado | Uso |
|---|---|---|
755 | Dueño: todo. Otros: leer y entrar | Carpetas |
644 | Dueño: leer/escribir. Otros: leer | Archivos web |
600 | Solo el dueño | Archivos sensibles |
Troubleshooting
# Puerto 80 ocupado
lsof -i :80
systemctl stop apache2
# 403 Forbidden (permisos)
chmod -R 755 /var/www/mi-sitio
chown -R www-data:www-data /var/www/mi-sitio
# Ver logs
tail -20 /var/log/nginx/error.log
tail -20 /var/log/nginx/access.log
Resumen: Los 5 pasos del deploy
1️⃣ apt update && apt install nginx -y
2️⃣ mkdir -p /var/www/mi-sitio
3️⃣ nano /var/www/mi-sitio/index.html
4️⃣ Configurar Nginx + ln -s + nginx -t
5️⃣ systemctl restart nginx
✅ curl http://localhost → ¡Tu web está live!
Recursos
- 🏋️ Ejercicios de esta clase
- 📋 Ejemplos de esta clase
- KillerCoda — Laboratorio gratuito
- Playground ROXS — Escenarios del bootcamp
- 90 Días de DevOps — El challenge completo
- roxs.dev — Web de ROXS
- ▶️ Playlist del Bootcamp
- 🎮 Twitch — roxsross
- Nginx Docs
- Apache Docs