Cómo generar una copia HTML estática de su sitio web de WordPress

Puede crear casi cualquier tipo de sitio web que desee con WordPress. Sin embargo, no puede usarlo para crear sitios web HTML estáticos simples. En algunos casos, eso es todo lo que necesita, y es posible que termine necesitando usar otra plataforma para lograrlo.

Afortunadamente, hay muy pocas cosas que no puedas hacer con los complementos de WordPress . En este artículo, hablaremos sobre cuándo tiene sentido usar páginas estáticas simples de WordPress . También le presentaremos un complemento que le permite generar páginas estáticas de WordPress y discutiremos cómo alojarlas.

¡Vamos!

Por qué es posible que desee utilizar un sitio web estático simple

Antes de profundizar más, hablemos de qué son las páginas estáticas. Decimos que una página es ‘estática’ cuando no carga ningún contenido dinámico y está compuesta solo de HTML, CSS y, potencialmente, algo de JavaScript. En muchos casos, las personas asocian páginas estáticas con diseños demasiado simples, pero puedes hacer mucho solo con HTML y CSS.

WordPress, en cambio, solo genera páginas dinámicas, por muy simples que sean tus diseños. Por ejemplo, de forma predeterminada, sus últimas publicaciones se muestran en su página de inicio. Para lograr esto, utiliza algo llamado el ‘bucle’ de WordPress . El ciclo busca las últimas publicaciones que publicó y las enumera en orden cronológico:

El hecho de que WordPress solo genere páginas dinámicas no es un inconveniente. Lejos de eso, ya que le permite crear casi cualquier tipo de sitio que desee, desde proyectos simples hasta proyectos complejos. Sin embargo, hay casos en los que es posible que desee utilizar páginas estáticas simples en su lugar. Por ejemplo:

  • Puede ser mejor por motivos de seguridad.  Con las páginas estáticas, su servidor no necesita «renderizar» su sitio cada vez que alguien lo visita. En cambio, solo les envía HTML y CSS simples, por lo que es más difícil explotar su sitio web.
  • Las páginas estáticas tienden a ser más rápidas.  Las páginas estáticas generalmente se cargan más rápido ya que su servidor no necesita generarlas sobre la marcha.
  • Son menos propensos a errores.  WordPress es muy fácil de usar, pero  aún pueden ocurrir errores . Con las páginas estáticas, la mayoría de estos, como los errores de conexión a la base de datos, no serán un problema.

Si bien las páginas estáticas tienen beneficios claros, no es coincidencia que la web se esté moviendo constantemente hacia más y más sitios que utilizan sistemas de administración de contenido (CMS) en lugar de crear páginas desde cero. Esto se debe a que las páginas dinámicas le permiten implementar muchas funciones más avanzadas.

Veamos un ejemplo rápido. Con un blog estático, deberá actualizar su página de inicio cada vez que cree una publicación. Eso significa agregar una nueva publicidad, una imagen destacada y más para cada actualización. WordPress, por otro lado, hace todo ese trabajo pesado en segundo plano gracias al bucle.

Sin embargo, si desea configurar un sitio web, no necesitará actualizarlo con frecuencia, las páginas estáticas funcionarán muy bien. Del mismo modo, los sitios con una funcionalidad muy simple, como carpetas pequeñas  o archivos en línea, podrían estar mejor con un enfoque estático.

La desventaja es que, por lo general, no podrá usar WordPress para crear esos sitios. Con Divi , puede que solo te lleve unas pocas horas configurar un sitio web de aspecto profesional con un par de páginas. Sin embargo, no serían estáticos. Afortunadamente, hay un complemento que puede ayudar.

Presentamos el complemento de salida HTML estático de WP

El complemento WP Static HTML Output  ha existido por un tiempo, y por una buena razón. Este complemento le permite generar copias completamente estáticas de todo su sitio web de WordPress e implementarlas en otras plataformas.

Además de transformar sus páginas de WordPress en copias estáticas, el complemento también puede reemplazar todos sus enlaces internos. En la práctica, esto le permite usar WordPress para crear su sitio web en un entorno de prueba local y luego implementarlo en la plataforma de alojamiento que elija.

WP Static HTML Output también empaqueta todos sus archivos multimedia cuando exporta su sitio web. También puede usarlo para almacenar una copia anterior de su sitio como respaldo.

Sin embargo, tenga en cuenta que tendrá problemas si intenta usarlo para replicar funciones dinámicas, como secciones de comentarios, formularios de inicio de sesión y más. En términos generales, si hay una funcionalidad en su sitio que requiere la entrada del usuario o podría considerarse dinámica, no funcionará cuando la traduzca a una página estática, así que téngalo en cuenta al considerar si usar el complemento.

Características clave:

  • Cree copias totalmente estáticas de todo su sitio web de WordPress.
  • Exporte su contenido junto con todos sus archivos multimedia.
  • Reemplace todos sus enlaces internos para que pueda implementar sus páginas estáticas de WordPress en un entorno en vivo.
  • Almacene copias de exportaciones anteriores como copias de seguridad.
  • Vuelva a escribir las rutas de su contenido de WordPress para ocultar el hecho de que su sitio web utiliza la plataforma.

Precio:  Gratis, con una versión premium disponible | Más información

Cómo generar una copia HTML estática de su sitio web de WordPress (y alojarlo usando GitHub)

En esta sección, le mostraremos cómo implementar sus páginas estáticas de WordPress en GitHub . GitHub le permite alojar páginas estáticas de forma gratuita , lo que lo convierte en una opción decente si desea utilizarlo como un host sencillo para páginas estáticas.

Paso #1: Genere una copia HTML estática de su sitio

Para este paso, vamos a utilizar el complemento WP Static HTML Output que presentamos anteriormente. Adelante, instálelo y actívelo en su sitio web ahora. Una vez hecho esto, vaya a la  pestaña Herramientas> WP Static HTML Output  en su sitio.

Antes de generar una copia estática de su sitio, repasemos algunas configuraciones que ofrece el complemento. En primer lugar, verá una opción para indicar la URL que pretende usar para su sitio una vez que esté activo. Tenga en cuenta que sus páginas estáticas no se mostrarán correctamente a menos que ingrese la URL correcta aquí, ya que sus páginas no podrán extraer el CSS que requieren para verse bonitas:

Esta configuración tomará todos sus enlaces internos y los reemplazará con la URL que establezca. Anteriormente, hablamos sobre cómo puede usar esta función para crear sitios localmente e implementarlos en un entorno en vivo. Como tal, es posible que desee consultar nuestros consejos sobre cómo elegir el nombre de dominio perfecto .

Continuando, puede habilitar la configuración para exportar su sitio web como un  archivo zip  , que puede descargar desde su tablero. De lo contrario, el complemento simplemente exportará sus nuevos archivos al  directorio wp-content/uploads/  . Aquí puede ver ese directorio con un par de exportaciones completas de nuestro sitio. También puede elegir si desea conservar la última exportación que creó, para utilizarla como copia de seguridad:

Si desea cambiar la carpeta a la que el complemento exporta sus páginas, puede hacerlo en la  sección Anular directorio de salida  :

Finalmente, hay opciones para reemplazar sus rutas predeterminadas de WordPress con nombres de su elección. La idea es ocultar el hecho de que su sitio fue construido con WordPress:

El uso de esta función depende de usted, ya que no afectará la funcionalidad de su página exportada de ninguna manera. Una vez que esté listo para crear copias estáticas de sus páginas de WordPress, haga clic en el  botón Iniciar exportación de sitio estático  :

El complemento hará lo suyo ahora y puede seguir su progreso a través del  Registro de exportación  en la parte inferior de la pestaña:

Una vez que finalice el proceso, debería ver una línea dentro del  registro de exportación  cerca de la parte superior que dice  ZIP CREADO,  incluido un enlace a su derecha:

Si copia y pega ese enlace en su barra de navegación, podrá descargar una copia estática de su sitio web directamente, para que no tenga que usar FTP . Una vez que tenga su sitio estático, es hora de probarlo y publicarlo.

Paso #2: Cargue su sitio web estático en GitHub

En este punto, debería tener todos los archivos estáticos creados desde su sitio web de WordPress. Ahora es el momento de encontrar un lugar para alojarlos, para que pueda verificar si funcionan según lo previsto.

Hagámoslo usando GitHub , que te permite configurar páginas estáticas simples a través de repositorios. Si no ha usado GitHub antes o necesita un recordatorio,  aquí hay una guía rápida para comenzar con la plataforma.

Una vez que haya configurado una cuenta de GitHub, deberá crear un nuevo repositorio. Escriba una descripción si lo desea y deje su repositorio configurado como  Público , luego haga clic en el  botón Crear repositorio  :

Una vez que su repositorio esté listo, debe cargar sus archivos de WordPress en él. Para esto, puede usar la línea de comando si está familiarizado con el control de versiones de git o usar la aplicación de escritorio de GitHub. Usaremos el enfoque de escritorio aquí ya que es más fácil de seguir.

Cuando configure la aplicación de escritorio de GitHub, podrá clonar repositorios existentes desde su cuenta:

Elija el repositorio que configuró anteriormente de la lista y establezca su  ruta local  en cualquier carpeta que desee. Vas a usar esa carpeta para agregar tus archivos de WordPress, así que asegúrate de que esté en algún lugar que puedas recordar:

Descomprima su archivo exportado desde el paso número uno y extraiga su contenido a la carpeta del repositorio local que configuró hace un segundo. Una vez que lo haga, la aplicación de escritorio de GitHub detectará los cambios en el repositorio. Especifique un nombre para su primera confirmación y luego haga clic en el  botón Confirmar para maestro  :

Ahora, cuando haga clic en el  botón Publicar  en la parte superior de la aplicación, sus cambios se cargarán en GitHub.

Ya casi está listo para acceder a su página ahora. Sin embargo, primero debemos configurar GitHub para que reconozca su repositorio como un sitio web. Para hacer eso, vaya a la configuración de su repositorio y busque la  sección Páginas de GitHub .  En  Fuente  , elija la  opción de rama maestra  y haga clic en guardar:

La URL de su sitio aparecerá ahora en la parte superior de la sección. Si lo visitas, deberías ver aparecer tu sitio web de WordPress, solo como una página estática:

Como mencionamos anteriormente, es posible que algunas partes de su sitio web no funcionen si se basan en contenido dinámico, como las secciones de comentarios. Sin embargo, si este es el caso, es probable que tenga algún uso para las páginas estáticas de todos modos y debería seguir usando WordPress como de costumbre.

Conclusión

En algunos casos, todo lo que necesita es HTML simple y un poco de CSS para crear un sitio web informativo y elegante. Sin embargo, WordPress genera páginas dinámicas listas para usar. Eso está lejos de ser algo malo, pero significa que necesita hacer algunos ajustes si desea crear páginas estáticas de WordPress.

Aquí le mostramos cómo hacer el trabajo y publicar sus páginas estáticas de forma gratuita, en tres pasos:

  1. Use el complemento WP Static HTML Output para crear una copia estática de su sitio.
  2. Sube tus páginas estáticas a  GitHub .

¿Tiene alguna pregunta sobre la creación de páginas estáticas de WordPress? ¡Hablemos de ellos en la sección de comentarios a continuación!

Miniatura de la imagen del artículo de Andrew Rybalko / shutterstock.com