Generadores de Sitios Estáticos
Los sitios estáticos no tienen contenido dinámico y están compuestos por archivos estáticos, como HTML, CSS y JavaScript, que no requieren procesamiento del lado del servidor ni una base de datos.
Como los archivos están preconstruidos, no es necesario ningún procesamiento adicional cuando un usuario visita el sitio y se necesitan menos recursos para ejecutarlo. Al no haber scripts ni una base de datos que explotar, también aumenta la seguridad del sitio.
Ventajas de los Generadores de Sitios Estáticos
Si estás familiarizado con HTML, CSS y JavaScript, puedes construir un sitio estático utilizando un editor de texto o código. Sin embargo, necesitas conocimientos técnicos para escribir el contenido, puede ser poco manejable y llevar mucho tiempo, y a medida que tu sitio crece, puede ser más difícil de gestionar y mantener.
Los generadores de sitios estáticos (SSG, Static Sites Generator) ofrecen una opción más eficaz para construir tu sitio estático. Suelen incluir varias herramientas que facilitan la creación, el estilo, la publicación y la edición de tu contenido según sea necesario. Algunas de las principales ventajas de utilizar un generador de sitios estáticos son:
- Plantillas: Un sistema de plantillas te permite definir la estructura y el diseño de tu sitio web mediante plantillas y componentes reutilizables que pueden usarse en varias páginas. Esto significa que no necesitas duplicar o actualizar manualmente elementos comunes en varias páginas. Esto también separa tu contenido de la capa de diseño y presentación, para que puedas centrarte en escribir y actualizar el contenido.
- Automatización: Si tu sitio incluye contenido de varias fuentes, como archivos Markdown o archivos de datos, un generador de sitios estáticos puede automatizar el proceso de convertir tu contenido en archivos HTML. También pueden automatizarse tareas como la minificación, la optimización y la agrupación de activos. Todo esto te ahorra tiempo y reduce las posibilidades de error, al permitirte crear y optimizar tu sitio sin realizar manualmente cada tarea.
- Control de versiones: Los generadores de sitios estáticos se integran con sistemas de control de versiones como Git, para que puedas seguir los cambios, colaborar con otros y volver fácilmente a versiones anteriores si es necesario.
- Construcciones incrementales: Con las construcciones incrementales, cuando haces cambios y generas una nueva salida, sólo se regeneran los archivos que han cambiado desde la última construcción. Muchos generadores de sitios estáticos admiten construcciones incrementales, lo que mejora el tiempo de construcción para sitios más grandes y pequeñas actualizaciones.
Utilizar un Generador de Sitios Estáticos
Cada generador de sitios estáticos (SSG) tiene sus propias características, configuraciones y sistemas de plantillas, pero la configuración para generar un sitio que se alojará con el alojamiento de sitios estáticos de Kinsta suele implicar lo siguiente:
- Elige tu SSG: Hay muchos SSG disponibles. Seleccionar el que mejor se adapte a tus necesidades es el primer paso. Para construir y alojar el sitio con el Alojamiento. de Sitios Estáticos de Kinsta, elige uno que utilice Node.js para el proceso de construcción. A continuación, tenemos una lista de SSG listos para usar en Kinsta.
- Configura un entorno de desarrollo local: Instala las dependencias necesarias, incluido el propio SSG, cualquier lenguaje de programación necesario y un editor de código.
- Crea tu nuevo sitio: En tu SSG, crea el nuevo sitio. Esto genera la estructura básica de directorios y los archivos de configuración necesarios para el proyecto.
- Configura: Establece la configuración de tu sitio para personalizar la estructura del sitio y la forma en que el generador procesa tus archivos fuente. Este archivo puede contener ajustes como los directorios de entrada y salida, rutas de plantillas, metadatos, configuraciones de plugins, etc.
- Plantillas: Crea plantillas y diseños que definan los elementos comunes y la estructura de tus páginas, como cabeceras, pies de página, menús de navegación, etc.
- Añade contenido y activos: Crea o recopila contenido existente utilizando Markdown u otros formatos compatibles. Cada página suele corresponder a un archivo dentro del directorio de contenido. Es probable que los activos se almacenen en un directorio distinto de los archivos de contenido.
- Estilizar: Modifica los archivos CSS o de preprocesador (por ejemplo, SASS o LESS) para aplicar estilos personalizados a tu sitio. Algunos SSG también tienen temas disponibles que pueden instalarse y personalizarse para aplicar estilos.
- Construye y previsualiza localmente: Ejecuta el comando de construcción proporcionado por el SSG para construir tu sitio web. El SSG procesa tus plantillas, convierte tus archivos de contenido a HTML y genera los archivos estáticos (HTML, CSS y JavaScript). Si procede, también realizará tareas como la minificación, la optimización y la agrupación de activos. Utiliza este setp para asegurarte de que todo tiene el aspecto y funciona según lo previsto.
- Crea tu repositorio Git: Utiliza Git para crear tu repositorio, luego confirma y envía tu nuevo sitio a tu nuevo repositorio Git.
- Si vas a desplegar el sitio en Kinsta sin ejecutar la construcción en Kinsta, los archivos que confirmes en tu repositorio deben ser el resultado de la construcción (los archivos HTML, CSS y JavaScript).
- Si el sitio se va a construir en Kinsta, los archivos que confirmes en tu repositorio deben ser el contenido, activos como imágenes u otros medios, y los archivos SSG (o archivos de configuración que extraerán las dependencias para la construcción).
- Despliega tu nuevo sitio estático: En MyKinsta, añade un nuevo sitio estático y conéctalo a tu repositorio Git para desplegar tu sitio en las 260+ ubicaciones CDN de de Kinsta.
- Mantén y actualiza: A medida que continúes trabajando en tu sitio, asegúrate de seguir las mejores prácticas para el control de versiones, confirma regularmente los cambios y mantente actualizado con las últimas versiones del SSG y sus dependencias. Esto garantiza un proceso de desarrollo fluido y te permite aprovechar las nuevas funciones y correcciones de errores.
Compatibilidad con el Generador de Sitios Estáticos
El alojamiento de Sitios Estáticos de Kinsta es para sitios estáticos preconstruidos o sitios construidos con modernos frameworks JavaScript que utilizan Node.js para construir el sitio en Kinsta. Las páginas de aterrizaje, los sitios de presentación e incluso algunos blogs pequeños que no se actualizan con demasiada frecuencia y no requieren contenido dinámico (como comentarios) suelen ser una buena opción.
Si tu sitio cumple alguna de las siguientes condiciones, será más adecuado para nuestro Alojamiento de Aplicaciones:
- Utiliza un lenguaje distinto de Node.js para construir el sitio (por ejemplo, PHP).
- Requiere renderizado de servidor para servir parte o la totalidad del sitio.
- Requiere una conexión a una base de datos.
- Sirve contenido dinámico.
- Requiere sesiones o autenticación gestionadas en el lado del servidor.
Si no estás totalmente seguro de qué alojamiento sería mejor para tu sitio, te recomendamos que despliegues tu sitio en ambos para probar cada opción y determinar cuál se adapta mejor a tus necesidades.
Hay muchos generadores de sitios estáticos disponibles y el comando de construcción y el directorio de publicación pueden variar de un sitio a otro. Kinsta detecta automáticamente varios frameworks y rellena los campos Comando de construcción y Directorio de publicación cuando añades tu sitio estático.
La siguiente tabla muestra el comando de construcción y el directorio de publicación a utilizar para varios generadores de sitios estáticos populares que son compatibles con Static Site Hosting.
| Generador de sitios estáticos | Comando de Construcción | Publicar directorio | Notas adicionales |
|---|---|---|---|
| Angular | npm run build -- -c production | dist/{nombre_del_proyecto} | |
| Astro | npm run build | dist | |
| Brunch | npm run build | public | |
| Cuttlebelle | npm run build | .site | |
| Docusaurus | npm run build | build | |
| Elder.js | npm run build | public | |
| Eleventy | npx @11ty/eleventy | _site | |
| Ember | npm run build | dist | |
| Gatsby | npm run build | public | |
| Gridsome | npm run build | dist | Requiere Node 16 o habilitar el proveedor heredado OpenSSL.* |
| Hugo | npm run build | public | Requiere configuración adicional para la compatibilidad.** |
| Hexo | npm run build | public | |
| Next.js | npm run build | out | Crear según Next Exportaciones estáticas. |
| Nuxt | npm run generate | .output/public | Crear según la renderización Nuxt sólo del lado del cliente. |
| Preact | npm run build | dist | |
| Qwik | npm run build && npm run build.server | dist | Requiere el adaptador SSG. |
| React (utilizando crear aplicación React) | npm run build | build | |
| React (utilizando Vite) | npm run build | dist | |
| Solid | npm run build | dist | |
| Svelte | npm run build | build | Requiere el adaptador de sitio estático. |
| Vite 3 | npm run build | dist | |
| Vue | npm run build | dist | |
| VuePress 1.x | npm run build | src/.vuepress/dist | Requiere Node 16 o habilitar el proveedor heredado OpenSSL.* |
| VuePress 2.x | npm run build | ./docs/.vuepress/dist |
* Gridsome o VuePress 1.x
Esto requiere Node 16, o puedes añadir lo siguiente en el package.json para el comando de Construcción:
SET NODE_ OPTIONS =--openssl- legacy -provider && vuepress build src** Hugo
Añade lo siguiente a tu proyecto:
npm install hugo-bin serve --save-devAñade o sustituye lo siguiente, dependiendo de tu proyecto:
{
" scripts ": {
"build": "hugo"
}
}Es habitual que los temas de Hugo recomienden la instalación a través de un submódulo Git. Actualmente, los submódulos no son compatibles con el Alojamiento Estático o de Aplicaciones, por lo que los archivos del tema deben estar disponibles en el repositorio del sitio.