Convertir un sitio web gestionado con WordPress en uno estático

Hace unos 16 años que mantengo el sitio web de una institución. Al principio lo hacía escribiendo los códigos HTML y CSS.

Unos 7 años después se hacía necesario, por funcionalidad y apariencia, un cambio en la forma de encarar la tarea. Así que me pasé a WordPress, el más popular de los gestores de contenidos web. Pero, como quería seguir teniendo un control total sobre la apariencia, busqué información sobre cómo se creaba un tema (o plantilla) para WordPress e hice, desde cero, uno para el sitio.

De hecho, al tiempo que aprendía cómo construir un tema de WordPress basándome en esta serie de entradas de Themeshaper, las fui traduciendo al español y publicando en este blog. Esas traducciones, aunque supongo que mayormente ya están obsoletas, son de las entradas más visitadas.

Esa segunda etapa duró unos 5 años, ya que, debido a una especie de “cambio de marca” que se dio en la institución, hubo que crear un nuevo sitio desde cero. Entonces, para esa tercera etapa me mantuve con WordPress, pero, esta vez, con un tema de Theme Grill (por un tiempo hice uso de la versión gratuita, pero después compré la versión “pro”).

Una de las consignas del nuevo diseño era que incluyera, como una especie de apéndice, al sitio anterior como fuente de consulta, como un archivo de la etapa anterior. Así que fue suficiente con un vínculo desde el sitio nuevo a la instalación del sitio viejo y con una advertencia de que el mismo estaba discontinuado.

En la práctica se trataba de dos instalaciones de WordPress, una para cada sitio.

No hace mucho, el acceso al sitio viejo dejó de funcionar y entonces me di cuenta que no valía la pena mantener una instalación de WordPress para un sitio “congelado” y decidí ver cómo convertirlo en un sitio estático, que mayormente no necesitara mantenimiento.

Afortunadamente, el error en la instalación del sitio viejo tuvo una solución sencilla, pero ya había tomado la decisión y, en resumidas cuentas, utilicé el plugin Simply Static para llevarla adelante.

A partir de aquí, y a modo de bitácora, detallo los pasos que seguí hasta obtener un resultado exitoso. El proceso fue largo porque el sitio viejo ya hacía como 4 años que estaba inactivo y tuve que buscar versiones viejas de varios programas y plugins para completarlo.

Cargar un respaldo del sitio web en una instalación local de WordPress

Este proceso me insumió varios días de marchas y contramarchas. ¡Que cierto es eso que dicen de que respaldar es fácil, lo difícil es hacer que las restauraciones de los respaldos funcionen correctamente!

Para convertir el sitio viejo en un sitio estático, primero tenía que hacer una instalación de ese sitio de forma local (en mi PC), así que antes de empezar a instalar WordPress localmente recolecté algunos respaldos que tenía hechos del sitio viejo:

• El respaldo en formato XML del sitio (generado desde el Escritorio de WordPress con la Herramienta de exportación).
• Una copia del directorio uploads.
• Una copia del directorio plugins.
• Una copia del directorio del tema del sitio (que, en este caso en particular, se trataba del que yo mismo había creado).

Con eso listo, me puse a hacer la instalación local de WordPress, con XAMPP:

• Descargué XAMPP. Tuve que descargar una versión antigua, porque tanto el tema, como algunos de los plugins, ya no eran compatibles con versiones recientes de PHP.
• Al archivo descargado le cambié los permisos con chmod 755 xampp-linux-*-installer.run y lo ejecuté con sudo ./xampp-linux-*-installer.run. Seguí los pasos indicados por el asistente de instalación y unos minutos después tenía XAMPP instalado en mi sistema.
• Para arrancar XAMPP escribí en una terminal cd /opt/lampp y luego sudo ./manager-linux-x64.run.
• Cuando abrió el programa, fui a la solapa “Manage Servers” y pinché en el botón “Start All”.

• En la barra de direcciones del navegador web escribí http://localhost/phpmyadmin/, pinché en el botón “Bases de datos” y, en el campo de texto dentro del apartado “Crear base de datos” escribí un nombre para la base de datos (la llamé “BDLocal”) y pinché en el botón “Crear”.
• Descargué WordPress.
• Al archivo descargado lo copié en /opt/lampp/htdocs y lo descomprimí.
• Abrí el archivo /opt/lampp/htdocs/wordpress/wp-config-sample.php y
  • en la línea que decía define( 'DB_NAME', 'database_name_here' );, cambié 'database_name_here' por 'BDLocal'.
  • en la línea que decía define( 'DB_NAME', 'username_here' );, cambié 'username_here' por 'root'.
  • en la línea que decía define( 'DB_NAME', 'password_here' );, cambié 'password_here' por ''.
  • y, aunque no estoy seguro de que fuera necesario, como en la instalación original del sitio viejo le había definido un prefijo distinto al predefinido a los nombres de las tablas, busqué la línea que decía $table_prefix = 'wp_';, y cambié 'wp_' por el prefijo correspondiente.
    Finalmente guardé el archivo en el mismo directorio pero con el nombre wp-config.php.
• Al directorio uploads del respaldo del sitio viejo lo copié a /opt/lampp/htdocs/wordpress/wp-content.
• Al contenido del directorio plugins del respaldo del sitio viejo lo copié a /opt/lampp/htdocs/wordpress/wp-content/plugins.
• Al directorio del tema del sitio viejo lo copié a /opt/lampp/htdocs/wordpress/wp-content/themes.
• Y le cambié los permisos por “Crear y eliminar archivos” al directorio /opt/lampp/htdocs/wordpress
• En la barra de direcciones del navegador web escribí http://localhost/wordpress y se abrió un formulario para comenzar la configuración de la instalación del WordPress:

• Rellené los campos “Título del sitio”, “Nombre de usuario”, “Contraseña” y “Tu correo electrónico” y pinché en el botón “Instalar WordPress”. Hecho esto apareció una ventana que anunciaba que la instalación había sido exitosa. Pinché en el vínculo “Acceder” y se abrió la habitual ventana de login de WordPress. Allí escribí los datos de usuario y contraseña que recién había definido y entré al Escritorio de WordPress.
• En la barra lateral del Escritorio de WordPress fui al apartado Plugins > Plugins instalados y los activé.
• Del apartado Apariencia > Temas seleccioné el mismo tema que usaba el sitio viejo y pinché el botón “Activar”.
• Después, abrí en un editor de texto el archivo XML que contenía la exportación del sitio viejo e hice un reemplazo de todas las apariciones de la url original del sitio viejo por http://localhost/wordpress.
• De vuelta en la barra lateral del Escritorio de WordPress, fui al apartado Herramientas y pinché en la opción “Importar”. Fui hasta la última de las opciones que se mostraban (WordPress) y pinché en el vínculo “Ejecutar el importador”. Se abrió una nueva página en la que pinché en el botón “Examinar” y luego busqué y seleccioné el archivo XML que contenía la exportación del sitio viejo y pinché en el botón “Subir archivo e importar”. De la siguiente página que se abrió, lo importante era activar el cuadro de verificación “Download and import file attachments” y luego pinchar en el botón “Submit”.
• Algunos minutos después terminó la importación. Navegué por el sitio local y se veía bastante bien, aunque no exactamente igual que el original. Había que hacer algunos ajustes más:
  • De la lista de las entradas, borré la titulada “¡Hola, mundo!” (la predefinida de la instalación de WordPress).
  • En los “Ajustes Generales” del Escritorio de WordPress agregué la “Descripción corta”, cambié la “Zona horaria”, el “Formato de fecha” y el día de comienzo de la semana.
  • En “Ajustes > Lectura” subí a 12 el “Número máximo de entradas a mostrar en el sitio” y elegí la opción “Extracto” para “Para cada entrada en el feed, incluir”.
  • En Ajustes > Comentarios” activé el cuadro de verificación “Cerrar automáticamente los comentarios en las entradas con más de”.
  • En “Ajustes > Enlaces permanentes” activé el cuadro de verificación “Nombre de la entrada”.
  • Además, en la página principal aparecían dos widgets (“Archivos” y “Categorías”) que no debían estar y faltaba el widget de “Comentarios recientes” que era el que correspondía, así que en “Apariencia > Widgets” del Escritorio de WordPress fui a la opción “Secondary Widget Area” y borré sus dos widgets y sus respectivos títulos. Y al widget de “Comentarios recientes” que estaba en el “Primary Widget Area” lo moví al “Secondary Widget Area”.
  • Pero, la diferencia más notoria era que no se mostraba el menú principal. Así que en “Apariencia > Personalizar” fui a la opción “Menús”, desplegué la opción “menu-principal” y al final marqué el cuadro de verificación “Primary Menu” dentro del apartado “Ubicación del menú”.
  • Otro punto que tuve que corregir con respecto al menú era que algunos elementos del mismo apuntaban a categorías y lo hacían considerando el número de ID de cada una, pero en la instalación local de WordPress los IDs de las categorías cambiaron por otros números. Así que edité los nombres de algunos archivos del tema (que incluían el número de ID de la categoría correspondiente) y también el contenido de esos y otros archivos que vinculaban directamente a IDs de categorías. Fueron varias correcciones.
  • Finalmente, luego de algunas pequeñas correcciones más de algunas urls y una revisión general más de todo el sitio, la instalación local del respaldo del sitio viejo quedó completa y funcionando.

Crear una versión estática del sitio web a partir de la instalación local del respaldo

Con la instalación local terminada, el siguiente paso era el de generar desde allí una versión estática. Para ello utilicé el plugin Simply Static.

Por lo visto la versión más alta de este plugin que soporta la versión de PHP que utilicé en XAMPP para que me funcionara el respaldo del sitio viejo es la 2.1.9 (se puede descargar desde un vínculo al final de esta página).
Lo descargué y lo descomprimí en el directorio plugins de la instalación local de WordPress.
Luego, lo activé en el apartado “Plugins > Plugins instalados” del Escritorio de WordPress.

Fui al apartado “Simply Static > Settings” en la barra lateral e hice los siguientes cambios:

• activé el cuadro de verificación de “Use absolute URLs”. En el campo desplegable elegí la opción https:// y en el campo de texto siguiente escribí la url a la que, posteriormente, iba a subir los archivos estáticos.
• en el apartado “Delivery Method” dejé la opción predefinida, “ZIP Archive”.

Luego, pinché en el botón “Save Changes”.
Le di permisos de “Crear y eliminar archivos” al directorio que utiliza el plugin para sus archivos temporales: /opt/lampp/htdocs/wordpress/wp-content/plugins/simply-static/static-files.

En el apartado “Diagnostics” se puede ver si se presentan errores.
Aparecía un mensaje de posible error en la línea “Checking if WordPress can make requests to itself from 127.0.1.1” y el mensaje decía: “Received a 301 response. This might indicate a problem” pero, por lo visto, esta advertencia (que no sé a qué se refiere) no afectó el proceso.

Luego, me cambié al apartado “Generate” y allí pinché en el botón “Generate Static Files”.

Luego de algo menos de 9 minutos había terminado el proceso y tenía disponible un vínculo que decía “Click here to download”. Pinché en ese vínculo y descargué todo el sitio estático en un archivo comprimido.

Subir los archivos estáticos al servidor web y retoques finales

A través del Administrador de archivos del CPanel, creé en el servidor real un directorio con el mismo nombre que había definido en el apartado “Use absolute URLs” del plugin “Simply Static” y subí allí el archivo comprimido.

Luego de terminada la subida, pinché con el botón secundario sobre el archivo .ZIP y del menú contextual elegí la opción “Extract” y en el cuadro de confirmación que se abrió, pinché en el botón “Extract Files”.

Luego, en un navegador web escribí la dirección que había definido en el apartado “Use absolute URLs” y el sitio, en general, se veía bien. Lo navegué un poco más, y encontré que no estaba el color de fondo de la barra al pie de las páginas. Se trataba de una barra con solo una línea de texto, al estilo de las de copyright, y con letras blancas sobre fondo de color, pero, como no se mostraba el color de fondo de la barra, el texto no se veía.

Descomprimí de forma local el archivo que había subido a la web y revisé el código de las páginas. El problema era que, no sé por qué razón, en la declaración de estilo del color de fondo del pie de página aparecía una barra inclinada que hacía que el navegador no lo pudiera interpretar: background:/#003. Probé borrar esa barra y dejar background:#003 y entonces el color de fondo sí se veía. Encontces, ese cambio lo tenía que repetir en todos los archivos html, que eran más de 600.

Así que, utilizando el programa Regexxer (que está disponible en el Gestor de software de Linux Mint), cambié en todos los archivos html todas las instancias de los background:/#003 por background:#003.

Primero pinché en el botón “Buscar archivos” y, luego que se listaron los archivos en el panel de la izquierda, pinché en el botón “Buscar”. Luego de unos minutos, la búsqueda se había completado y en el panel de la derecha se mostraba el código resaltado de la primera instancia que coincidía con el criterio de búsqueda. Pinché en el botón “Todos los archivos” para hacer todos los cambios de una vez y luego en “Guardar todo”.

Otro cambio que tuve que también tuve que hacer en todas las páginas fue el vínculo a las Google Fonts, ya que el código utilizaba el protocolo http, en vez del https. Así que busqué todas las instancias de href="http://fonts y lo cambié por href="https://fonts.

Así que comprimí todos los archivos de nuevo (menos el directorio wp-content ya que era el más pesado y no había hecho ninguna modificación en los archivos que contenía) y lo volví a subir al servidor.
Volví a escribir en el navegador web la dirección que había definido en el apartado “Use absolute URLs”, navegué por el sitio estático, y se veía todo bien.

Para terminar, al vínculo en la web actual que apuntaba al “sitio viejo” lo redireccioné al sitio estático recién subido y, por último, borré la instalación de WordPress que tenía la instalación del sitio viejo.

Conclusiones

Llegado el caso de que se desee mantener accesibles las páginas de un sitio que finalizó su actividad y no se va a actualizar más, es altamente recomendable convertirlo en un sitio estático, porque no necesita mantenimiento y es razonablemente seguro.

El proceso de convertir el sitio a estático puede ser más o menos engorroso, pero, en todo caso, conviene hacerlo lo antes posible. En la situación que comento en esta entrada, ya hacía algunos años que el sitio estaba inactivo y tuve que buscar versiones antiguas de XAMPP, de WordPress y de algunos plugins para poder realizarlo.

Todo el proceso me llevó varios días, pero quedé conforme con el resultado y con haber podido hacer esta especie de bitácora del mismo que, quizás, pueda ser de ayuda para alguien más.