Cómo alojar una estática WordPress Sitio gratuito (en páginas de GitHub, Vercel, Netlify)

WordPress es un sistema de gestión de contenidos potente y popular, pero que aloja una dinámica WordPress El sitio puede ser costoso y requerir mantenimiento continuo. Para muchos sitios web o blogs simples, una versión estática de un WordPress El sitio puede ser una excelente alternativa. Los sitios estáticos son más rápidos, más seguros y pueden alojarse de forma gratuita en plataformas como GitHub Pages, Netlify o Vercel.

En este tutorial, recorreré el proceso de creación de una versión estática de su WordPress sitio y alojarlo de forma gratuita. Este enfoque es perfecto para principiantes que desean aprovechar la facilidad de uso. WordPress interfaz para la creación de contenido mientras disfruta de los beneficios de un sitio estático.

Herramientas que necesitas

Antes de sumergirnos en el proceso, asegurémonos de tener todas las herramientas necesarias. Aquí hay una lista de todo lo que necesitará para alojar su estática WordPress sitio gratis:

Antes de continuar con el tutorial, asegúrese de tener estas herramientas instaladas y las cuentas configuradas. Tener todo listo hará que el proceso sea sencillo y sencillo.

Paso 1: Desarrolla tu WordPress Sitio en LocalWP

Antes de comenzar, necesitará tener su WordPress sitio listo. Si aún no ha creado su sitio, o si actualmente está alojado en otro lugar, le recomiendo usar LocalWP (anteriormente Local by Flywheel) para desarrollar y probar su sitio localmente.

1. Descargue e instale LocalWP gratis desde localwp.com.
2. Crear un nuevo WordPress sitio en LocalWP.
3. Diseñe su sitio, agregue contenido e instale los complementos necesarios.
4. Asegúrese de que su sitio se vea y funcione exactamente como lo desea en su forma estática.

Comprender las limitaciones del sitio estático

Mientras estático WordPress Aunque los sitios ofrecen beneficios como velocidad mejorada, seguridad y opciones de alojamiento gratuito, es importante ser consciente de sus limitaciones. Algunas características dinámicas de WordPress no funcionará en un entorno estático:

1. WordPress Formularios: Tradicional WordPress Los formularios que dependen del procesamiento del lado del servidor no funcionarán. Esto incluye formularios de contacto, formularios de suscripción y otros formularios interactivos.
2. WordPress Comentarios: Los sistemas de comentarios dinámicos que permiten interacciones de usuario en tiempo real no son compatibles con sitios estáticos.
3. Acceso al área de administración: Cualquier enlace a /wp-admin o similar interno WordPress las rutas no funcionarán, ya que requieren procesamiento del lado del servidor.
4. Actualizaciones de contenido en tiempo real: Los sitios estáticos requieren regeneración y redistribución para que aparezca cualquier cambio de contenido, a diferencia de los dinámicos. WordPress Sitios donde los cambios son inmediatos.
5. Autenticacion de usuario: Las funciones que requieren inicios de sesión o membresías de usuario no son compatibles con la configuración básica de un sitio estático.
6. Funcionalidad de comercio electrónico: Los carritos de compras dinámicos y el procesamiento de pagos generalmente no funcionan en un entorno estático.
7. Funcionalidad de búsqueda: WordPressLa función de búsqueda incorporada de no funcionará, aunque se pueden implementar alternativas (como se menciona en las funciones de Simply Static Pro).
8. Barras laterales dinámicas y widgets: Los widgets que extraen datos en tiempo real o requieren procesamiento del lado del servidor no funcionarán como se esperaba.

Posibles soluciones

Si bien existen estas limitaciones, existen formas de mitigar algunas de ellas:

• Para los formularios, puede utilizar servicios de terceros como Formspree o Netlify Forms.
• Los comentarios se pueden manejar a través de servicios como Disqus o Comentarios de Facebook.
• La funcionalidad de búsqueda se puede implementar utilizando soluciones del lado del cliente como Lunr.js o Algolia (como se ofrece en Simply Static Pro).
• Para el comercio electrónico, considere utilizar servicios externos como Snipcart o Gumroad.

Al desarrollar tu WordPress sitio, tenga en cuenta estas limitaciones y planifique la estructura y las características de su sitio en consecuencia. Concéntrese en páginas basadas en contenido y minimice la dependencia de funciones dinámicas que no se traducirán en un entorno estático.

Paso 2: Instalar y configurar Simply Static

Simply Static es gratis WordPress plugin que genera una versión estática de tu WordPress sitio. Aquí se explica cómo configurarlo:

1. En su WordPress panel, vaya a Complementos > Agregar nuevo.
2. Busque "Simply Static", instale el complemento y actívelo.
3. Vaya a Simply Static > Configuración en su WordPress .
4. En la pestaña "General", configure lo siguiente:
   • URL de destino: elija "Guardar para uso sin conexión". Si ya tiene un dominio personalizado, elija "URL absolutas", como se muestra en la siguiente captura de pantalla:

5. Directorio local: configúrelo en un directorio fuera de su WordPress instalación, por ejemplo, /Users/yourusername/Documents/StaticSite

6. En la pestaña "Incluir/Excluir", asegúrese de que estén incluidas todas las URL necesarias.
   • En la mayoría de los casos utilice /wp-content/ y /wp-includes/

7. Guarda tu configuración.

También hay una versión pro de SimplyStaticAquí hay un resumen de las características profesionales del complemento Simply Static:

1. Implementación avanzada:
   • Implemente sitios estáticos en múltiples plataformas, incluidas SimplyCDN, GitHub, Amazon AWS S3, Digital Ocean Spaces y BunnyCDN.
2. Actualizaciones sencillas del sitio:
   • Administre las actualizaciones de contenido de manera eficiente, ya sea para publicaciones individuales, actualizaciones masivas o URL específicas.
3. Integración de formularios y comentarios:
   • Integre perfectamente formularios de complementos populares como Contact Form 7, Gravity Forms y Elementor Forms en su sitio estático.
4. Funcionalidad de búsqueda:
   • Implemente la búsqueda básica utilizando Fuse.js o actualice a una experiencia de búsqueda más completa con Algolia.
5. Soporte WP-CLI:
   • Utilice WP-CLI para configurar, exportar y administrar funciones de Simply Static directamente desde la línea de comandos.
6. Soporte multilingüe
   • Ofrezca contenido en varios idiomas con integraciones para WPML, Polylang y TranslatePress.
7. Minificación:
   • Optimice el rendimiento del sitio minimizando archivos CSS, JavaScript y HTML estáticos.
8. WordPress Ocultación:
   • Reemplazar valor predeterminado WordPress caminos para ocultar el hecho de que WordPress se utiliza como sistema de gestión de contenidos.

Estas características profesionales mejoran significativamente la funcionalidad y flexibilidad de la estática. WordPress sitios, lo que permite implementaciones más avanzadas, mejor rendimiento y experiencia de usuario mejorada.

Paso 3: inicializar el repositorio de Git

Ahora que tenemos nuestro generador de sitios estáticos configurado, preparemos nuestro directorio local para el control de versiones:

1. Abra una terminal o símbolo del sistema.
2. Navegue hasta el directorio que especificó en Simply Static (por ejemplo, cd /Users/yourusername/Documents/StaticSite).
3. Inicialice un nuevo repositorio Git ejecutando:

   git init

Paso 4: crea un repositorio de GitHub

Usaremos GitHub Desktop para crear y administrar nuestro repositorio:

1. Descargue e instale GitHub Desktop desde escritorio.github.com si aún no lo has hecho
2. Abra GitHub Desktop e inicie sesión en su cuenta de GitHub.
3. Haga clic en "Archivo" > "Nuevo repositorio" o utilice el botón "Crear un nuevo repositorio en su disco duro".
4. Establece lo siguiente:
   • Nombre: Elija un nombre para su repositorio (por ejemplo, “mi-wordpress-estático”)
   • Ruta local: configúrelo en el mismo directorio que especificó en Simply Static
   • Inicialice este repositorio con un archivo README: déjelo sin marcar
   • Git ignore: elija "Ninguno" (creamos el nuestro en el paso 3)
   • Licencia: elija una licencia adecuada o déjela como "Ninguna"
5. Haga clic en "Crear repositorio"

Paso 5: confirmar el repositorio

Ahora que tenemos nuestro repositorio configurado, hagamos nuestra primera confirmación:

1. En GitHub Desktop, deberías ver todos los archivos de tu sitio estático listados como cambios.
2. Ingrese un resumen para su confirmación (por ejemplo, "Confirmación inicial de archivos de sitio estáticos").
3. Haga clic en "Confirmar con principal" (o "Confirmar con master" en versiones anteriores).
4. Haga clic en "Publicar repositorio" para enviar su repositorio local a GitHub.

Paso 6: Ejecute una exportación simplemente estática

Ahora es el momento de generar nuestro sitio estático:

1. Vuelve a tu WordPress .
2. Vaya a Simply Static > Generar. (Puede ignorar la alerta de error de Diagnóstico, ya que solo está implementando en un directorio local).
3. Haga clic en "Generar archivos estáticos".
4. Espere a que se complete el proceso. Esto puede tardar unos minutos dependiendo del tamaño de su sitio.
5. Una vez completado, regrese a GitHub Desktop.
6. Debería ver los archivos recién generados o actualizados listados como cambios.
7. Confirme estos cambios con un mensaje como "Actualizar archivos estáticos del sitio".
8. Envíe los cambios a GitHub haciendo clic en "Enviar origen".

Paso 7: conecte el repositorio a una plataforma de alojamiento

Ahora que nuestro sitio estático está en GitHub, podemos conectarlo fácilmente a una plataforma de alojamiento gratuita. Proporcionaré instrucciones para GitHub Pages, Netlify y Vercel:

Páginas de GitHub

1. Vaya a su repositorio en GitHub.com.
2. Haga clic en "Configuración" > "Páginas" en la barra lateral izquierda.
3. En "Fuente", seleccione "Implementar desde una sucursal".
4. Elija la rama que desea implementar (generalmente "principal" o "maestra").
5. Seleccione la carpeta raíz (/) y haga clic en "Guardar".
6. Su sitio estará activo en https://yourusername.github.io/repository-name/.

Netlify

1. Regístrese para obtener una cuenta gratuita en netlify.com.
2. Haga clic en "Nuevo sitio desde Git" en su panel de Netlify.
3. Elija GitHub como su proveedor de Git y autorice a Netlify.
4. Seleccione su repositorio de la lista.
5. Deje el comando de compilación y el directorio de publicación en blanco.
6. Haga clic en "Implementar sitio".
7. Su sitio estará activo en un subdominio de Netlify, que puede personalizar en la configuración del sitio.

vercel

1. Regístrese para obtener una cuenta gratuita en vercel.com.
2. Haga clic en "Nuevo proyecto" en su panel de Vercel.
3. Importa tu repositorio de GitHub.
4. Deje la configuración de compilación como está (Vercel debería detectar automáticamente que es un sitio estático).
5. Haga clic en "Implementar".
6. Su sitio estará activo en un subdominio de Vercel, que puede personalizar en la configuración del proyecto.

Resum

¡Felicidades! Ahora tienes una versión estática de tu WordPress sitio alojado gratis. Recuerde regenerar y enviar sus archivos estáticos cada vez que realice cambios en su WordPress sitio. Este flujo de trabajo le permite disfrutar de la facilidad de WordPress para la creación de contenido mientras se beneficia de la velocidad, la seguridad y el alojamiento gratuito de un sitio estático.

Algunos consejos adicionales:

• Considere configurar un dominio personalizado para una apariencia más profesional.
• Actualice periódicamente su WordPress instalación y complementos para garantizar que esté trabajando con las últimas funciones y actualizaciones de seguridad.
• Explora las funciones avanzadas del Versión Pro de Simply Static, como esconderse WordPress y configurar formularios o funciones de búsqueda para su sitio estático.