Saltar al contenido HtmlpressGenerador de sitios estáticos HtmlpressGenerador de sitios estáticos

Cambiar tema

Atajos de teclado

Hosting estático

Actualizado el

La compilación de Htmlpress es un directorio simple de archivos .html, .css, .js y assets. Cualquier cosa capaz de servir un directorio de archivos funcionará. Esta guía cubre los casos habituales.

Compila el sitio

htmlpress build

La salida queda en .htmlpress/build/. Trata ese directorio como la raíz de documentos. htmlpress preview sirve la misma compilación en local, igual que lo hará un host.

Prerenderizado frente a fallback de SPA

Cada página es un archivo real, un index.html en una carpeta con el nombre de su fuente: guides/build.html se escribe en guides/build/index.html y se sirve en /guides/build/, como cualquier host estático responde a la URL de una carpeta. No hay enrutamiento en el cliente, así que ningún host necesita un fallback de SPA.

Lo que sí merece la pena configurar es la página de no encontrado. Cada compilación escribe un 404.html en la raíz (el del proyecto o uno integrado); apunta la página de error del host a él para que las rutas desconocidas reciban el layout del sitio en lugar del error por defecto del host.

nginx

server {
  listen 80;
  server_name docs.example.com;
  root /var/www/docs;
  index index.html;

  # Try the exact file, then a folder's index.html, else the site's 404 page.
  location / {
    try_files $uri $uri/ =404;
  }
  error_page 404 /404.html;
}

Copia .htmlpress/build/* a /var/www/docs/ en cada publicación.

Caddy

docs.example.com {
  root * /var/www/docs
  file_server
  encode gzip zstd
  handle_errors {
    rewrite * /404.html
    file_server
  }
}

Caddy aprovisiona automáticamente certificados de Let's Encrypt cuando el dominio resuelve hacia él.

AWS S3 + CloudFront

El patrón estándar es un bucket de S3 como origen y CloudFront delante:

  1. Sube .htmlpress/build/ a un bucket de S3 (aws s3 sync .htmlpress/build/ s3://my-docs --delete).
  2. Define Static website hosting → Index document como index.html y Error document como 404.html.
  3. Crea una distribución de CloudFront que apunte al endpoint web del bucket.
  4. En CloudFront, añade una Custom error response que asigne 404 a /404.html, manteniendo el código de respuesta 404.
  5. Define el objeto raíz por defecto de la distribución como index.html.

Los archivos de _htmlpress/ conservan su nombre de una compilación a otra, así que guárdalos en caché por poco tiempo o invalídalos en cada publicación.

Apache

DirectoryIndex index.html
ErrorDocument 404 /404.html

Pon esto en un .htaccess en la raíz de documentos y coloca allí la compilación. Los archivos y carpetas reales se sirven directamente; todo lo demás recibe la página 404 del sitio.

Htmlpress omite los archivos ocultos al copiar un proyecto, así que mantén el .htaccess en el servidor o cópialo después de la compilación.

Otros hosts

La misma receta funciona en Render Static, Surge, Fly Static, Bunny o cualquier almacenamiento de objetos con CDN: sube el directorio, apunta un dominio a él y sirve 404.html para las rutas desconocidas.

Despliega con GitHub Actions

Un ejemplo mínimo con nginx/SSH:

name: deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v5
      - uses: actions/setup-node@v4
        with:
          node-version: 24
      - run: npx gethtmlpress build
      - uses: easingthemes/ssh-deploy@v5
        with:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_KEY }}
          REMOTE_HOST: ${{ secrets.SSH_HOST }}
          REMOTE_USER: ${{ secrets.SSH_USER }}
          SOURCE: .htmlpress/build/
          TARGET: /var/www/docs/
          ARGS: -avzr --delete

Para S3, sustituye el paso de despliegue por aws-actions/configure-aws-credentials + aws s3 sync.

Ver también

Hecho con ❤ y Htmlpress

Acciones

Editar en GitHubVer como Markdown

Contenido