Introducción a org-static-blog
Introducción
Org-static-blog es un generador de blog estático. Está enfocado en la simplicidad. Todos los ficheros son simples ficheros org-mode en un directorio. El único requerimiento es que esos ficheros tengan un #+TITLE y un #+DATE, y opcionalmente, #+FILETAGS.
Instalación
Para instalarlo es tan sencillo como hacerlo desde el gestor de paquetes de Emacs o con el comando package-install, siempre claro que tengamos en nuestra configuración añadido los repositorios marmalade y/o melpa-stable.
Como recordatorio para añadir el repositorio melpa-stable solo hay que añadir lo siguiente a nuestro fichero de configuración principal de Emacs.
(require 'package)
(setq package-archives (append package-archives
'(("melpa" . "http://melpa.org/packages/"))))
(package-initialize)
Configuración
Explicación
Para org-static-blog, un blog consiste en 6 partes:
- Los post en sí. Todo fichero org en el directorio org-static-blog-posts es un post en el blog. Cada post es renderizado como su propia página HTML.
- La página índice que contiene los últimos post en una sola página. El número de entradas en el índice puede ser modificada usando org-static-blog-index-length.
- Opcionalmente muestra una previsualización de un párrafo en vez del post entero en el índice usando org-static-blog-use-preview.
- Una página de archivo que lista las fechas y las cabeceras de todos los post publicados.
- El fichero XML RSS para los agregadores de noticias.
- Cada post del blog puede tener etiquetas, y cada etiqueta enlace a las páginas que tienen las mismas etiquetas. Además de una página con todas las etiquetas es creada con una lista de las fechas de publicación y la cabecera de todos los post. Esta característica solo será habilitada si habilitamos la opción org-static-blog-enable-tags.
Cada página HTML se puede personalizar con las siguientes opciones.
- Con la variable org-static-blog-page-header insertamos el código que queramos en la sección <head> de cada página. Esto incluye el CSS y el Javascript de nuestro blog.
- El contenido de org-static-blog-page-preamble es insertado justo antes del contenido de cada página. Es un buen sitio para poner las cabeceras o menús del blog.
- El contenido de org-static-blog-postamble es insertado después del contenido de cada página generada. Aquí es donde se suele incluir el copyright u otra información relevante del blog.
También podemos personalizar el fichero RSS configurando org-static-blog-rss-extra. Su contenido será localizado a la derecha antes de la secuencia de posts. Por ejemplo podemos añadir el icono del RSS o decir que el blog está creado con org-static-blog, por ejemplo.
Algunos textos como "Other posts", "Tags", etc que org-static-blog incluye por defecto. Estos están en inglés, pero para cambiar el lenguaje podemos cambiar el valor de org-static-blog-langcode.
Configuración de ejemplo
Si todo lo anterior te ha parecido muy largo lo más seguro es que con este ejemplo lo entiendas rápidamente:
(setq org-static-blog-publish-title "Titulo del blog") (setq org-static-blog-publish-url "https://direccion-del-blog") (setq org-static-blog-publish-directory "~/proyectos/blog/publish/") (setq org-static-blog-posts-directory "~/proyectos/blog/posts/") (setq org-static-blog-drafts-directory "~/proyectos/blog/drafts/") (setq org-static-blog-enable-tags t) (setq org-export-with-toc nil) (setq org-export-with-section-numbers nil) ;; Esta cabecera es insertada en la sección <head> de cada página web: ;; (crearemos una hoja de estilos en ~/proyectos/blog/static/style.css ;; y el favicon en ~/proyectos/blog/static/favicon.ico) (setq org-static-blog-page-header "<meta name=\"author\" content=\"Tu nombre\"> <meta name=\"referrer\" content=\"no-referrer\"> <link href= \"static/style.css\" rel=\"stylesheet\" type=\"text/css\" /> <link rel=\"icon\" href=\"static/favicon.ico\">") ;; Esto se inserta al principio de la sección <body> de toda página: ;; Esto en particular crea un <div> con un simple enlace a la cabecera (setq org-static-blog-page-preamble "<div class=\"header\"> <a href=\"https://maxxcan.com\">Mi Blog</a> </div>") ;; Esta sección es insertada al final del <body> de cada página: ;; Esto en particular crea un <div> con un enlace a la página de los archivos y a la licencia (setq org-static-blog-page-postamble "<div id=\"archive\"> <a href=\"https://www.maxxcan.com/archive.html\"> Otros Posts</a> </div> <center><a rel=\"license\" href=\"https://creativecommons.org/licenses/by-sa/3.0/\"><img alt=\"Creative Commons License\" style=\"border-width:0\" src=\"https://i.creativecommons.org/l/by-sa/3.0/88x31.png\" /></a><br /> <span xmlns:dct=\"https://purl.org/dc/terms/\" href=\"https://purl.org/dc/dcmitype/Text\" property=\"dct:title\" rel=\"dct:type\">Maxxcan.com</span> by <a xmlns:cc=\"https://creativecommons.org/ns#\" href=\"https://www.maxxcan.com\" property=\"cc:attributionName\" rel=\"cc:attributionURL\"> Maxxcan Fox</a> is licensed under a <a rel=\"license\" href=\"https://creativecommons.org/licenses/by-sa/3.0/\">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>. </center>") ;; Este código HTML es insertado en la página del índice entre el preámbulo y los posts del blog (setq org-static-blog-index-front-matter "<h1> Bienvenido a mi blog </h1>\n")
Otras configuraciones
En la página del autor podemos encontrar más configuraciones, aunque sabiendo un poco Javascript toda configuración es posible. Por ejemplo siqueremos añadir comentarios con disqus podemos añadir el siguiente código al configurar el org-static-blog-postamble:
(setq org-static-blog-page-postamble
"<div id=\"archive\">
<a href=\"https://maxxcan.com/archive.html\">Otros posts</a>
</div>
<center><button id=\"disqus_button\" onclick=\"load_disqus()\">Load Disqus Comments</button></center>
<div id=\"disqus_thread\"></div>
<script type=\"text/javascript\">
function load_disqus() {
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = 'https://bastibe.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
document.getElementById('disqus_button').style.visibility = 'hidden';
};
</script>
<center><a rel=\"license\" href=\"https://creativecommons.org/licenses/by-sa/3.0/\"><img alt=\"Creative Commons
License\" style=\"border-width:0\" src=\"https://i.creativecommons.org/l/by-sa/3.0/88x31.png\" /></a><br /><span
xmlns:dct=\"https://purl.org/dc/terms/\" href=\"https://purl.org/dc/dcmitype/Text\" property=\"dct:title\"
rel=\"dct:type\">bastibe.de</span> by <a xmlns:cc=\"https://creativecommons.org/ns#\" href=\"https://bastibe.de\"
property=\"cc:attributionName\" rel=\"cc:attributionURL\">Maxxcan</a> is licensed under a <a rel=\"license\"
href=\"https://creativecommons.org/licenses/by-sa/3.0/\">Creative Commons Attribution-ShareAlike 3.0 Unported
License</a>.</center>")
Añadiendo la licencia y la posibilidad de usar Disqus como sistema de comentarios. También podríamos añadir nuestro propio sistema si conocemos el Javascript necesario.
Mi configuración
Además de lo visto por si puede ser de ayuda dejo aquí mi propia configuración:
(setq org-static-blog-publish-title "Mi Blog Personal sobre Cosas que discurren")
(setq org-static-blog-publish-url "https://www.maxxcan.com/")
(setq org-static-blog-publish-directory "~/Documentos/blog/publish")
(setq org-static-blog-posts-directory "~/Documentos/blog/posts/")
(setq org-static-blog-drafts-directory "~/Documentos/blog/drafts/")
(setq org-static-blog-enable-tags t)
(setq org-export-with-toc nil)
(setq org-export-with-section-numbers nil)
(setq org-static-blog-langcode "es")
(setq org-static-blog-use-preview t)
(setq org-static-blog-preview-link-p t)
(setq org-static-blog-preview-convert-titles t)
(setq org-static-blog-preview-ellipsis "Sigue leyendo... / Continue reading...")
;; This header is inserted into the <head> section of every page:
;; (you will need to create the style sheet at
;; ~/projects/blog/static/style.css
;; and the favicon at
;; ~/projects/blog/static/favicon.ico)
(setq org-static-blog-page-header
"<meta name=\"author\" content=\"Maxxcan Fox\">
<meta name=\"referrer\" content=\"no-referrer\">
<link href= \"static/style.css\" rel=\"stylesheet\" type=\"text/css\" />
<link href= \"static/code.css\" rel=\"stylesheet\" type=\"text/css\" />
<link rel=\"icon\" href=\"static/favicon.ico\">")
;; This preamble is inserted at the beginning of the <body> of every page:
;; This particular HTML creates a <div> with a simple linked headline
(setq org-static-blog-page-preamble
"<div class=\"header\">
<a href=\"https://www.maxxcan.com\">Blog Personal de Maxxcan Fox</a>
</div>")
;; This postamble is inserted at the end of the <body> of every page:
;; This particular HTML creates a <div> with a link to the archive page
;; and a licensing stub.
(setq org-static-blog-page-postamble
"<div id=\"archive\">
<a href=\"https://www.maxxcan.com/rss.html\">RSS</a></div>
<center><a rel=\"license\" href=\"https://creativecommons.org/licenses/by-sa/3.0/\"><img alt=\"Creative Commons License\"
style=\"border-width:0\"
src=\"https://i.creativecommons.org/l/by-sa/3.0/88x31.png\" /></a><br />
<span xmlns:dct=\"https://purl.org/dc/terms/\" href=\"https://purl.org/dc/dcmitype/Text\"
property=\"dct:title\" rel=\"dct:type\">Maxxcan.com</span> by
<a xmlns:cc=\"https://creativecommons.org/ns#\"href=\"mailto:maxxcan@disroot.org\"
property=\"cc:attributionName\"
rel=\"cc:attributionURL\">Maxxcan Fox</a> is licensed under a <a rel=\"license\"
href=\"https://creativecommons.org/licenses/by-sa/3.0/\">
Creative Commons Attribution-ShareAlike 3.0 Unported License</a>.<br />
Si quieres contactar conmigo puedes hacerlo a través de mi correo
<a href=\"mailto:maxxcan@disroot.com\">maxxcan@disroot.org</a>
</center>")
Uso
Esta es la parte más divertida y más fácil. Ahora una vez configurado ahora solo hay que llamar a la función org-static-blog-posts-create-new-post, escribir el contenido y renderizarlo con org-static-blog-posts-publish. Cada post será un fichero org con lo siguiente:
#+TITLE: El titulo de nuestro post #+DATE: <2021-03-02 mar> #+FILETAGS: emacs blog editor
Resumiendo solo hay que hacer 4 pasos:
- package-install org-static-blog
- Ejecutar Alt-x: org-static-blog-create-new-post y escribir el contenido
- Ejecutar Alt-x: org-static-blog-publish
- Subir el contenido de la carpeta ~/proyectos/blog/publish/ al servidor.
Nota Importante
En ocasiones cuando ejecutamos org-static-blog-publish éste no funciona y nos saca del buffer. Si esto ocurriera podemos también probar con la función org-static-blog-publish-file que exportará el org a html y entonces ejecutamos org-static-blog-publish para crear todo el blog.
Conclusiones
El sistema de org-static-blog es sencillo, fácil de gestionar ya que solo tienes que gestionar un directorio y sus directorios, y puedes gestionarlos con cualquier control de versiones, cifrarlos con pgp, etc. Además no tiene requerimientos externos ni hace falta tener nada más instalado a parte de Emacs.
Para más información pasad por la información de su autor donde hay incluso ejemplos de blogs que lo usan.
También podéis visitar el post de Notxor donde tiene un artículo que habla sobre ello.
