0Pricing
Linux Server Deployment & SSH Mastery · Lección

Alojamiento de sitios web estáticos

Configure el servidor web que prefiera para servir archivos estáticos HTML, CSS y JavaScript, y haga accesible su primer sitio web.

Alojamiento de sitios web estáticos es una lección gratuita de Linux Server Deployment & SSH Mastery en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Linux Server Deployment & SSH Mastery, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Linux Server Deployment & SSH Mastery incluye 4 lecciones en total.

¿Qué son los sitios web estáticos?

¡Le damos la bienvenida! En esta lección aprenderemos a publicar su sitio web sencillo.

Un sitio web estático está compuesto por archivos como HTML, CSS y JavaScript, que se entregan al navegador del usuario exactamente como están almacenados en el servidor.

  • No requiere procesamiento en el servidor (como PHP o Python).
  • Es rápido, seguro y fácil de alojar.
  • Es perfecto para portafolios, blogs o sitios informativos sencillos.

Crear su primer archivo HTML

Crearemos un archivo index.html muy sencillo. Esta será la página principal de nuestro sitio web estático.

Normalmente crearía este archivo en su servidor, por ejemplo, utilizando un editor de texto como nano o vim.

<!DOCTYPE html>
<html>
<head>
  <title>My First Static Site</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello CoddyKit!</h1>
  <p>This is my awesome static website.</p>
  <script src="script.js"></script>
</body>
</html>

Añadir CSS y JavaScript

Nuestro archivo HTML hace referencia a style.css y script.js. Creemos también esos archivos para completar nuestro sitio básico.

Estos archivos se encontrarán en el mismo directorio que index.html.

/* style.css */
body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  text-align: center;
}
h1 {
  color: #333;
}

// script.js
document.addEventListener('DOMContentLoaded', () => {
  console.log('Website loaded!');
  alert('Welcome to my site!');
});

Configurar el directorio web

Necesitamos un lugar específico en el servidor para almacenar estos archivos del sitio web. Una ubicación habitual es /var/www/.

Primero, cree un directorio para su sitio web. Después, copie en él los archivos index.html, style.css y script.js.

sudo mkdir -p /var/www/mywebsite
sudo cp index.html /var/www/mywebsite/
sudo cp style.css /var/www/mywebsite/
sudo cp script.js /var/www/mywebsite/

# Set proper permissions
sudo chown -R www-data:www-data /var/www/mywebsite
sudo chmod -R 755 /var/www/mywebsite

Nginx: conceptos básicos de los bloques de servidor

Nginx utiliza bloques de servidor (similares a los hosts virtuales de Apache) para definir configuraciones para sitios web específicos.

Cada bloque de servidor escucha las solicitudes en un puerto (como el 80 para HTTP) y responde según el nombre de dominio.

  • Normalmente se encuentran en /etc/nginx/sites-available/.
  • Se activan creando un enlace simbólico a /etc/nginx/sites-enabled/.

Nginx: directivas root e index

Dentro de un bloque de servidor, dos directivas clave indican a Nginx dónde encontrar sus archivos:

  • root: Especifica la ruta absoluta a los archivos de su sitio web. Aquí es donde Nginx buscará el contenido.
  • index: Define el archivo predeterminado que Nginx debe servir cuando se solicita un directorio (por ejemplo, cuando alguien visita yourdomain.com/, Nginx busca index.html).

Nginx: configuración completa de un sitio estático

A continuación se muestra una configuración completa de bloque de servidor de Nginx para nuestro sitio estático. Guárdela como /etc/nginx/sites-available/mywebsite.conf.

Recuerde sustituir your_domain.com por su dominio real o por la IP de su servidor.

server {
  listen 80;
  listen [::]:80;

  server_name your_domain.com www.your_domain.com;

  root /var/www/mywebsite;
  index index.html index.htm;

  location / {
    try_files $uri $uri/ =404;
  }
}

Apache: equivalente a un host virtual

Si utiliza Apache, el concepto es similar mediante hosts virtuales. Crearía un archivo de configuración (por ejemplo, /etc/apache2/sites-available/mywebsite.conf).

Las directivas principales son DocumentRoot (como root de Nginx) y DirectoryIndex (como index de Nginx).

<VirtualHost *:80>
  ServerAdmin webmaster@localhost
  ServerName your_domain.com
  ServerAlias www.your_domain.com

  DocumentRoot /var/www/mywebsite
  DirectoryIndex index.html index.htm

  <Directory /var/www/mywebsite>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
  </Directory>

  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Activar y recargar el servidor

Después de crear el archivo de configuración, debe activarlo y recargar el servidor web para que los cambios surtan efecto.

  • Para Nginx: Cree un enlace simbólico y recargue el servicio.
  • Para Apache: Habilite el sitio y recargue el servicio.
# For Nginx:
sudo ln -s /etc/nginx/sites-available/mywebsite.conf /etc/nginx/sites-enabled/
sudo nginx -t # Test config syntax
sudo systemctl reload nginx

# For Apache:
sudo a2ensite mywebsite.conf
sudo apache2ctl configtest # Test config syntax
sudo systemctl reload apache2

Probar su sitio web en línea

¡Buen trabajo! Su sitio web estático ya debería estar accesible.

Abra el navegador web y vaya a la dirección IP de su servidor o al nombre de dominio que haya configurado.

¡Debería ver el mensaje «Hello CoddyKit!»!

Comprobación rápida: directivas de Nginx

Considere el siguiente fragmento de bloque de servidor de Nginx:

server {
  listen 80;
  server_name example.com;
  root /var/www/html/blog;
  index landing.html index.htm;

  location / {
    try_files $uri $uri/ =404;
  }
}

Si un usuario visita http://example.com/, ¿qué archivo intentará servir Nginx primero?

Resumen: alojar sitios estáticos

¡Ha aprendido correctamente a alojar un sitio web estático!

Hemos cubierto los siguientes temas:

  • Crear archivos básicos de HTML, CSS y JS.
  • Configurar un directorio específico para el contenido de su sitio web.
  • Configurar bloques de servidor de Nginx (o hosts virtuales de Apache) mediante root/DocumentRoot e index/DirectoryIndex.
  • Activar y recargar el servidor web.
  • Probar el sitio web en línea desde un navegador.

A continuación, exploraremos cómo configurar hosts virtuales para alojar varios sitios web en un único servidor.

Preguntas frecuentes

¿La lección «Alojamiento de sitios web estáticos» es gratis?

Sí — el texto completo de «Alojamiento de sitios web estáticos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Linux Server Deployment & SSH Mastery, actualiza a CoddyKit PRO. El curso de Linux Server Deployment & SSH Mastery incluye 4 lecciones en total.

¿Qué aprenderé en «Alojamiento de sitios web estáticos»?

Configure el servidor web que prefiera para servir archivos estáticos HTML, CSS y JavaScript, y haga accesible su primer sitio web. Practicas Linux Server Deployment & SSH Mastery con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Linux Server Deployment & SSH Mastery?

No se requiere experiencia previa. Linux Server Deployment & SSH Mastery en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Alojamiento de sitios web estáticos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Linux Server Deployment & SSH Mastery?

Sí. Cada lección de Linux Server Deployment & SSH Mastery incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Instalación de Nginx/Apache
  2. Alojamiento de sitios web estáticos
  3. Configuración básica de hosts virtuales
  4. Activación de HTTPS con Let's Encrypt
← Volver a Linux Server Deployment & SSH Mastery