Páginas del blog
Contenidos
¿Qué es un generador de sitios estáticos? Los generadores de sitios estáticos (SSG) son herramientas para convertir plantillas dinámicas en páginas HTML estáticas. Los SSG, como Gatsby, Jekyll y Hugo, han ido ganando popularidad porque permiten utilizar plantillas y representar el blog como una serie de componentes, lo que suele ser mucho más eficiente.
Una de las cosas más atractivas de los SSG es que, en comparación con las páginas web normales, ofrecen un mejor soporte para la optimización de motores de búsqueda (SEO). Esta es una de las razones por las que debería utilizar un generador de sitios estáticos. El SEO permite que su sitio web tenga mayor visibilidad en los motores de búsqueda, lo que atrae más tráfico a su sitio desde audiencias relevantes. Los SSG le permiten incorporar fácilmente patrones SEO comunes en su sitio utilizando los componentes SEO apropiados.
En este post analizaremos algunas estrategias para desarrollar estos componentes específicos de SEO. Luego veremos cómo implementar estas estrategias con algunos frameworks generadores de sitios estáticos populares.
Aunque al principio parezcan retos, también se pueden tratar como beneficios. Por ejemplo, la automatización de las plantillas SEO y la generación del mapa del sitio requieren un esfuerzo inicial de configuración, pero en realidad reducirán el tiempo y el esfuerzo que dedicas al SEO cada vez que añades una nueva página.
¿Los blogs tienen contenido estático?
Los sitios web típicos son de naturaleza estática, donde el contenido se organiza en páginas, y no se actualizan con frecuencia. Mientras que un blog es dinámico y suele actualizarse con más frecuencia. Algunos blogueros publican varios artículos nuevos al día. Los blogs pueden formar parte de un sitio web más amplio.
¿Cuál es un buen ejemplo de contenido estático en Internet?
El contenido estático es cualquier archivo que se almacena en un servidor y es el mismo cada vez que se entrega a los usuarios. Los archivos HTML y las imágenes son ejemplos de este tipo de contenido.
¿Un blog debe ser estático o dinámico?
Los sitios estáticos suelen ser más fáciles de alojar que los dinámicos, y se cargan más rápido para los usuarios, lo que significa que su posicionamiento en los motores de búsqueda será más alto y sus usuarios estarán más contentos. ¿Por qué se cargan más rápido? Sencillamente, porque cada página ya está hecha; no se generan sobre la marcha.
Cómo crear una página en un blog
Los blogs personales son un gran lugar para compartir tu trabajo y conocimientos, y se han convertido en una gran parte de la comunidad de análisis y visualización de datos. Después de probar varios constructores de sitios web como Wix, WordPress y Squarespace, decidí configurar mi blog utilizando en su lugar un generador de sitios estáticos.
Recientemente, varias personas me han preguntado por la configuración de mi blog y por las herramientas que utilizo para gestionarlo. En lugar de responder a estas preguntas individualmente, decidí que era hora de resumir esta información en un solo post. Aquí voy a responder a algunas de las preguntas más frecuentes sobre la configuración de un sitio web estático para tu blog basándome en mi experiencia.
Como sabrás, en una aplicación web tradicional un usuario final (también llamado ‘cliente’) solicita una página web a través de un navegador como Chrome o Firefox, y un servidor web, al recibir la petición, ensambla los datos y recursos que componen la página (llamadas a bases de datos, activos estáticos como imágenes, etc.), y responde con una página web HTML. Esto tiene sentido para sitios web que requieren contenido dinámico, por ejemplo, comentarios generados por los usuarios en un foro, pero es excesivo para un blog o una página de portafolio que no requiere interactividad ni actualizaciones frecuentes.
Añadir blog
Hoy hemos publicado la segunda parte funcional del plugin Static Pages: la gestión de menús. Esta característica clave te permite definir tantos menús como necesites, y crear elementos de menú que hagan referencia a páginas estáticas, URLs, categorías de blog, etc.
Después de terminar la gestión de menús nos dimos cuenta de que es aún más flexible de lo que habíamos planeado y esperado. En este tutorial queremos mostrarte un uso real del plugin Static Pages. Vamos a construir un sitio web sencillo que incluye varias páginas estáticas, un menú superior y un menú en la barra lateral que contiene categorías tomadas de un blog. Vamos a repasar algunos trucos e ideas que no están cubiertos en la documentación.
A continuación se muestra el resultado que queremos conseguir, un sitio web que tiene varias páginas estáticas y algunas páginas tienen subpáginas. El menú superior contiene enlaces a todas las páginas estáticas del sitio web. También contiene un enlace a la página Blog, que no es una página estática. El menú de la barra lateral muestra enlaces a las categorías del blog.
¿Te asusta? Lo sabemos. Pero eso es sólo porque usamos el marcado estándar de Bootstrap. También enlazamos al archivo theme.css, que define un par de estilos para el sitio web y realmente no importa para este tutorial.
Cómo añadir entradas a páginas en blogger
Después de permanecer en Textpattern durante más de diez años, era el momento adecuado para un nuevo motor de blogs. No es que Textpattern sea malo, de hecho es bastante bueno y bastante robusto en cuanto a seguridad. Pero lo perfecto es enemigo de lo bueno, y un blog en el que sólo hay archivos estáticos en el lado del servidor es la seguridad perfecta – no hay superficie de ataque en absoluto. Sin PHP y sin base de datos en el servidor significa muchas menos actualizaciones de seguridad. Y puedo ver fácilmente a nivel local lo que cualquier modificación en el sitio se vería como, a continuación, empuje a un repositorio que se duplica como copia de seguridad – hecho, los cambios se despliegan. Por último, simplemente me harté de escribir Textile cuando en todas partes el formato elegido es Markdown.
Además, el concepto de paquetes de páginas significa que añadir imágenes o PDFs a entradas individuales ya no resulta un lío inmanejable. Migrar el contenido y el diseño desde Textpattern fue bastante sencillo, pero la plantilla RSS personalizada para permitir entradas completas en el canal RSS fue la parte “difícil”.
Hugo websites tiene algunas sugerencias para implementar la funcionalidad de búsqueda. Después de mirarlas, pensé que lunr.js sería la solución más sencilla. Sin embargo, el paquete hugo-lunr mencionado allí resultó ser una pérdida de tiempo. Su propósito es generar una lista de todo el contenido del blog. Sin embargo, intenta hacerlo sin tener en cuenta la configuración del sitio, por lo que no adivina correctamente las URI de las páginas, exporta la taxonomía incorrecta y añade archivos binarios al índice. Al final me di cuenta de que es mucho más fácil generar el índice con el propio Hugo. La siguiente plantilla layouts/index.json ya hace el trabajo por mí: