Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 154 additions & 0 deletions src/content/docs/es/guides/deploy/hostinger.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
---
title: Despliega tu sitio de Astro en Hostinger
description: Cómo desplegar tu sitio de Astro en la web usando Hostinger.
type: deploy
logo: hostinger
i18nReady: true
sidebar:
label: Hostinger
supports: ['ssr', 'static']
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import ReadMore from '~/components/ReadMore.astro';
import { Steps } from '@astrojs/starlight/components';

[Hostinger](https://www.hostinger.com/es/) es un proveedor de alojamiento web que admite sitios estáticos y aplicaciones de Node.js.

Esta guía explica cómo desplegar proyectos de Astro tanto estáticos como renderizados en el servidor, en Hostinger utilizando [hPanel](https://www.hostinger.com/es/support/1583483-guia-completa-de-hpanel-en-hostinger/).

## Requisitos previos

- Una [cuenta de Hostinger](https://www.hostinger.com/es/) con un plan de alojamiento activo.
- El despliegue de sitios estáticos es compatible con todos los planes que incluyen hPanel.
- El despliegue renderizado en el servidor requiere un plan que admita aplicaciones de Node.js, como Business Web Hosting o Cloud Hosting.
- Un proyecto de Astro listo para desplegar.

## Despliegue de un sitio estático

Los proyectos de Astro utilizan `output: 'static'` por defecto, por lo que no se requiere configuración adicional para desplegar un sitio estático.

Puedes subir el contenido de tu carpeta `dist/` a Hostinger utilizando el **Administrador de archivos** de hPanel o un cliente FTP.

### Subida con el Administrador de archivos

<Steps>
1. Construye tu proyecto de Astro localmente:

<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm run build
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm build
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn build
```
</Fragment>
</PackageManagerTabs>

2. Inicia sesión en [hPanel](https://hpanel.hostinger.com/) y abre tu sitio web.

3. Abre **Archivos** > **Administrador de archivos** y navega hasta el directorio `public_html`.

4. Sube el contenido de tu carpeta local `dist/` a `public_html`. Puedes arrastrar y soltar los archivos, o subir un archivo comprimido y extraerlo allí mismo.

5. Visita tu dominio para confirmar que tu sitio está en línea.
</Steps>

### Subida por FTP

<Steps>
1. En hPanel, ve a **Archivos** > **Cuentas FTP** para encontrar o crear tus credenciales de FTP.

2. Conéctate a tu cuenta de alojamiento utilizando un cliente FTP como [FileZilla](https://filezilla-project.org/).

3. Sube el contenido de tu carpeta local `dist/` al directorio `public_html` del servidor.

4. Visita tu dominio para confirmar que tu sitio está en línea.
</Steps>

## Despliegue renderizado en el servidor usando Node.js

Para el [renderizado bajo demanda](/es/guides/on-demand-rendering/), despliega tu proyecto de Astro como una aplicación de Node.js en un plan de Hostinger que admita Node.js.

### Añadir el adaptador de Node.js

Añade el [adaptador de Node.js](/es/guides/integrations-guide/node/) para habilitar el renderizado bajo demanda con el siguiente comando `astro add`:

<PackageManagerTabs>
<Fragment slot="npm">
```shell
npx astro add node
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm astro add node
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn astro add node
```
</Fragment>
</PackageManagerTabs>

<ReadMore>Consulta la [guía del adaptador de Node.js](/es/guides/integrations-guide/node/) para obtener opciones de configuración adicionales.</ReadMore>

Asegúrate de que tu `package.json` tenga un script `start` que ejecute el servidor compilado:

```json title="package.json"
{
"scripts": {
"start": "node ./dist/server/entry.mjs"
}
}
```

### Despliegue desde un repositorio de Git

<Steps>
1. Sube tu proyecto de Astro a un repositorio de GitHub, GitLab o Bitbucket.

2. Inicia sesión en [hPanel](https://hpanel.hostinger.com/) y ve a **Sitios web**.

3. Añade un nuevo sitio web y selecciona la opción de aplicación **Node.js**.

4. Conecta tu proveedor de Git y selecciona tu repositorio y rama.

5. Configura los ajustes de compilación:

- **Comando de compilación:** `npm run build`
- **Comando de inicio:** `npm run start`

6. Selecciona una versión de Node.js que cumpla con el [requisito mínimo](/es/install-and-setup/#prerrequisitos) de Astro (Node.js 22 o posterior).

7. Inicia el despliegue. Hostinger instalará las dependencias, ejecutará tu comando de compilación e iniciará la aplicación.
</Steps>

### Despliegue subiendo los archivos del proyecto

<Steps>
1. Construye tu proyecto de Astro localmente, luego sube la carpeta `dist/` generada junto con el `package.json` y el archivo de bloqueo (p. ej. `package-lock.json`).

2. En hPanel, añade un nuevo sitio web y selecciona la opción de aplicación **Node.js**.

3. Sube los archivos de tu proyecto (o un archivo `.zip`) utilizando el Administrador de archivos.

4. Configura la aplicación:

- **Raíz de la aplicación:** la carpeta que contiene tu `package.json`.
- **Comando de inicio:** `npm run start`

5. Selecciona una versión de Node.js compatible e inicia la aplicación.
</Steps>

## Recursos oficiales

- [Documentación de Hostinger](https://www.hostinger.com/es/support/) — centro de ayuda oficial para hPanel, planes de alojamiento y aplicaciones de Node.js.
Loading