Cambio de Hugo a org-static-blog

 2021-01-06

Índice

Instalación
Configuración
Crear un artículo
1. Articulo
2. Borrador
Publicar un artículo
Modificar un articulo
Pros y contras
1. Pros
2. Contras
Disculpas y agradecimientos

Si, ya só lo que estas pensando “otro cambio de look en el blog”, pero sinceramente no termino de encontrar un tema o mótodo de publicación que termine de llenarme, a parte de que soy de culo inquieto y siempre ando probando cosas nuevas. He pasado por jekyl, org-page, bash-blog, Hugo y sus respectivos temas, y aunque Emacs y org-mode se integran perfectamente gracias a ox-hugo, no terminaba de convencerme.

Fue a raíz de leer este artículo en el blog de Notxor, lo que ha hecho que me decida ha cambiar la forma de publicar el blog y a su vez de diseño..

Puesto que utilizo constantemente org-mode para organizarme, buscaba una forma sencilla y basada en org-mode para publicar el blog. Hasta ahora lo he ido haciendo con ox-hugo, pero es que org-static-blog genera una sitio sencillo, no usa JavaScript, además tiene feed configurable para RSS (esto aun lo tengo que mirar mas despacio) y sobre todo es muy sencillo de comprender aunque no tengas conocimientos en Lisp.

Como digo su funcionamiento es muy sencillo, creas el articulo en un fichero org y lo exportas a html.

Instalación

Si utilizas use-package añade a tu fichero init.el

(use-package org-static-blog
  :ensure t
  :init)

O bien desde el repositorio melpa con el comando

M-x package-install <RET> org-static-blog <RET>

Configuración

Notxor modifica el fichero org-static-blog.el aunque puedes añadir las funciones a tu fichero init.el, además en el propio sitio de org-static-blog dispones de un pequeño ejemplo con una configuración mínima para empezar

Disponemos de tres bloques a configurar:

Cabecera HTML

El contenido de org-static-blog-page-header se inserta en el <head> de cada página. Usaremos esta función para incluir el CSS y/o JavaScript personalizados para el blog.

Encabezamiento de cada página

org-static-blog-page-premble, se inserta justo antes del contenido de cada página, podemos colocar el encabezado o los menús del blog.

El pie de página

El contenido de org-static-blog-page-postamble se inserta despuós del contenido de cada página generada, despuós de cualquier página de publicación de blog, despuós de la página de índice, las páginas de etiquetas y el archivo. Aquí podemos incluir el tipo de licencia del blog.

Ejemplos de configuración

Por si te sirve de guia esta es la configuracion para este blog que tengo en mi fichero init.el

(use-package org-static-blog
  :ensure t
  :init
  (setq org-static-blog-publish-title "el blog de lázaro"
        org-static-blog-publish-url "https://elblogdelazaro.org/"
        org-static-blog-publish-directory "~/Documentos/proyectos/elblogdelazaro.gitlab.io/public/"
        org-static-blog-posts-directory "~/Documentos/proyectos/elblogdelazaro.gitlab.io/posts"
        org-static-blog-drafts-directory "~/Documentos/proyectos/elblogdelazaro.gitlab.io/drafts"
        org-static-blog-rss-file "index.xml"
        org-static-blog-langcode "es"
        org-export-with-toc nil
        org-static-blog-enable-tags t
        org-export-with-section-numbers nil
        org-static-blog-preview-ellipsis "(ver más..)"
        org-static-blog-preview-link-p t
        org-static-blog-preview-convert-titles nil
        org-static-blog-use-preview t)

  ;; 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=\"Carlos M.\">
        <meta name=\"viewport\" content=\"initial-scale=1,width=device-width,minimum-scale=1\">
        <link href= \"static/style.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://elblogdelazaro.org\">el blog de lázaro</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
        "<center>
              <div style=\"text-align: center;\">
                :<a href=\"mailto:hefistion.arroba.mail.com\">email</a>:<a href=\"https://gitlab.com/hefistion\">gitlab</a>:<a href=\"https://twitter.com/ElBlogDeLazaro\">twitter</a>:</a><a href=\"https://elblogdelazaro.org/index.xml\">rss</a>:
              </div><br>

         <a><a rel=\"licencia\" href=\"http://creativecommons.org/licenses/by-nc/4.0/\"><img alt=\"Licencia de Creative Commons\" style=\"border-width:0\" src=\"static/CC40.png\"/></a>
        @2017 <a rel=\"https://elblogdelazaro.org\" href=\"https://elblogdelazaro.org\">el blog de lázaro</a>
        está generado con <a rel=\"org-static-blog\" href=\"https://github.com/bastibe/org-static-blog/\"> org-static-blog</a>
        en <a rel=\"Emacs\" href=\"https://www.gnu.org/software/emacs/\">emacs.</center>"))
;;

Tambión Notxor ha publicado su configuración así como su fichero css, al que le tengo que dar las gracias ya que he cogido prestadas algunas “/cosas” , finalmente he utilizado el mismo que https://zngguvnf.org

https://codeberg.org/Notxor/org-static-blog

Tambión necesitaras un fichero css, yo he realizado unas pequeñas modificaciones al que tiene Bastian Bechtold https://zngguvnf.org en su repositorio https://github.com/bastibe/bastibe.github.com pero si estás interesado en el mio puedes mandarme un correo a hefistion arroba gmail punto com1

Mi modificación del fichero org-static-blog.el

Esta modificación se la he cogido prestada a Notxor, crea dos nuevas clase para el css (post-date-summary y post-title-summary) que permite cambiar el espaciado y tamaño de la fuente de la fecha y encabezados h2 para las paginas archivo y categoría.

Dejo la antigua modificación por si en un futuro me vuelve a ser útil

(defun org-static-blog-get-post-summary (post-filename)
  "Assemble post summary for an archive page.
This function is called for every post on the archive and
tags-archive page. Modify this function if you want to change an
archive headline."
  (concat
   "<div class=\"post-date-summary\">"
   (format-time-string (org-static-blog-gettext 'date-format) (org-static-blog-get-date post-filename))
   "</div>"
   "<h2 class=\"post-title-summary\">"
   "<a href=\"" (org-static-blog-get-post-url post-filename) "\">" (org-static-blog-get-title post-filename) "</a>"
   "</h2>\n"))

Crear un artículo

Articulo

Podemos crear un fichero .org en la carpeta posts o en la que hayas configurado en org-static-blog-posts-directory, el fichero ha de contener un #+TITLE y un #+DATE, y si vamos a utilizar etiquetas para crear categorías añadiremos #+FILETAGS. y habilitar org-static-blog-enable-tags a t

Tambión podemos utilizar M-x org-static-blog-create-new-post, para crear el fichero .org, nos preguntará por el titulo del articulo a publicar y el nombre del fichero .org, nos creará un fichero .org para completar el articulo.

#+title: Cambio a org-static-blog
#+date: <2021-01-05 22:23>
#+filetags: emacs orgmode
 * Instalación
 * Configuración
 ** Cabecera HTML

Borrador

Tenemos la posibilidad de ir creando borradores creando ficheros .org en la carpeta que hemos declarado como drafts o llamando al comando org-static-blog-create-new-draft

Cuando generemos el blog con el comando org-static-blog-publish los borradores generan sus respectivos html en la carpeta draft pero no se incluyen en el índice, el archivo o en la fuente RSS.

Publicar un artículo

Cuando hemos terminado de editar nuestro fichero .org o con el borrador (lo moveremos a la carpeta posts) para generar el fichero html usaremos M-x org-static-blog-publish este comando además del índice, genera el feed para el archivo RSS, etiquetas, etc..

Como bien escribe Noxtor podemos visualizar el borrador o articulo antes de publicarlo lanzando un servidor local con M-x httpd-start si no quieres salir de Emacs o desde una terminal ejecutando python3 -m http.server 8080, abres el navegador y lo pruebas.

Modificar un articulo

Puede darse el caso de que necesitemos modificar un sólo artículo, para ello usaremos M-x org-static-blog-publish-file fichero.org

Si lo prefieres puedes modificar directamente el fichero htmk generado mediante M-x org-static-blog-open-matching-publish-file

Básicamente este es todo lo que necesitas saber para empezar a publicar un blog desde Emacs con org-static-blog, su funcionamiento es verdaderamente sencillo , es mas, si le echas un vistazo al fichero org-static-blog.el, veras que es muy sencillo modificarlo para personalizar aun mas la salida del fichero html generado.

Pros y contras

En lo que a mi me afecta a la forma de publicar en el blog respecto a Hugo encuentro:

Pros

Sencillez de publicación y configuración.
Código mucho mas limpio
Sitio sencillo y fácil de entender, con Hugo me limitaba a utilizar un tema y rellenar el fichero de configuración del tema, sin llegar entender del todo como estaba creada2
Blog verdaderamente minimalista.
Totalmente integrado en mi flujo de trabajo de org-mode

Contras

Pierdo el tener todo el blog en un solo archivo org 3
En Gitlab puedes programar la ejecución de trabajos mediante un cron que junto con la posibilidad que ofrece Hugo de que no se publican los artículos futuros, me permitía programar la publicación de artículos, podía subir a Gitlab un articulo el lunes y se publicaba automáticamente el viernes.4
El blog es menos adaptativo a los dispositivos móviles, pero eso tambión es culpa mía y mi poco conocimiento sobre css

Disculpas y agradecimientos

He procurado mantener todos los enlaces y todas las referencias de los artículos pero es posible que alguna se me haya escapado, si lo encuentras por favor házmelo saber, tambión es posible que debido al cambio las referencias a las antiguas entradas en las redes sociales y enlaces parecidos no funcionen como es debido, sobre todos con la hoja de estilos.5

Por ultimo dar las gracias a Bastian Bechtold y https://zngguvnf.org por su trabajo y a Notxor por su mágnífico blog, un referente para mi aprendizaje sobre Emacs y org-mode y del cual aun continuo aprendiendo.

Espero que te haya gustado, pasa un buen día.

Notas al pie de página

1 Puedes encontrar el css de Bastian Bechtold en https://github.com/bastibe/bastibe.github.com/tree/master/static

2 Aquí la culpa es mía y mi falta de tiempo

3 Aunque realmente no es así, mantengo todos los artículos en un solo org y luego esporteo el que voy a publicar.

4 Esto tambión tiene solucion mediante un script y cron

5 Para visualizar correctamente la página haz clic en el titulo del artículo

El Blog de Lázaro