El Blog de Lázaro ❚
Blog personal donde guardo mis notas sobre tecnología

Crea tu blog con emacs, org-mode y org-static-blog

— Carlos M.
Índice

Recientemente cambié la forma de publicar en mi blog, escribí un articulo sobre ello, pero pasado un tiempo creo que fue un poco precipitado ese escribir articulo, ¿por qué? , pues primero porque aunque org-static-blog no es difícil de implementar, me metí en un charco ya que empecé a modificar el fichero org-static-blog.el sin tener conocimientos de lisp, lo que hizo gastar mucho muchas tiempo en el sistema prueba-error, cuando lo mas fácil hubiese sido no mordicar nada y jugar con las hojas de estilo css hasta que el blog tuviese el aspecto deseado, y esto me lleva a la segunda razón, que es por la que voy a escribir esta entrada del blog, y es que si en un futuro el paquete de org-static-blog recibe una actualización, tendría que volver a modificar el fichero .el y en el mejor de los casos tendría que volver a perder tiempo en configurarlo una vez más.

Todo esto me llevo a plantearme que tenia que buscar la fórmula de realizar el blog sin mordicar nada mas que la hoja css y eso es lo que voy a explicar aquí, desde cero y de la forma mas sencilla que sé.

Instalación de org-static-blog #

Doy por hecho que tienes instalado emacs y unos mínimos conocimientos sobre su manejo, así que empecemos por instalar org-static-blog, pulsa M-x package-install <RET> org-static-blog <RET> y comenzará la instalación

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

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

Configuración #

Tememos que realizar una mínima configuración como es el nombre del blog, donde se van a guardar los borradores, artículos, ficheros html que van a ser publicados, etc. Lo puedes hacer editando el fichero ubicado en /.emacs.d/elpa/org-static-blog-xxxxx/ o la mejor opción que es modificando tu fichero init.el

Configuración general #

(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.org/public/"
      org-static-blog-posts-directory "~/Documentos/proyectos/elblogdelazaro.org/posts"
      org-static-blog-drafts-directory "~/Documentos/proyectos/elblogdelazaro.org/drafts"
      org-static-blog-rss-file "index.xml"
      org-static-blog-rss-max-entries 10
      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)
  • org-static-blog-publish-title "el blog de lázaro" define el nombre del blog
  • org-static-blog-publish-url "https://elblogdelazaro.org/" la url del blog
  • org-static-blog-publish-directory "~/Documentos/proyectos/elblogdelazaro.org/public/" ruta donde se exportan los ficheros html
  • org-static-blog-posts-directory "~/Documentos/proyectos/elblogdelazaro.org/posts" ruta de los fichero org que contienen los artículos a explotar como html
  • org-static-blog-drafts-directory "~/Documentos/proyectos/elblogdelazaro.org/drafts" ruta donde guardaremos los borradores de los artículos a publicar
  • org-static-blog-rss-file "index.xml" nombre del fichero que contendrá el indice rss del blog
  • org-static-blog-rss-max-entries 10 número de entradas a mostrar en por el fichero rss
  • org-static-blog-langcode "es" lenguaje del blog
  • org-export-with-toc nil el blog no va a utilizar tabla de contenidos (cambia el valor a true si quieres una toc)
  • org-static-blog-enable-tags t el blog generará etiquetas para las categorías (nil si no quieres etiquetas)
  • org-export-with-section-numbers nil no numera cada sección (true si quieres numerarlas)
  • org-static-blog-preview-ellipsis "(ver más..)" si utilizas preview del blog (vista previa de artículos), el comentario del enlace
  • org-static-blog-preview-link-p t en modo preview, si vamos a utilizar un enlace (ver mas..) para ir al articulo.
  • org-static-blog-preview-convert-titles nil cuando preview esta habilitado convierte cabeceras <h1> a <h2> en la vista previa"
  • org-static-blog-use-preview t) utilizamos preview del blog , por defecto muestra 5 artículos, si lo ponemos a nil muestra la ultima entrada.

También podemos personalizar el rss del blog

(setq org-static-blog-rss-extra
      (concat
       "<generator>"
       (format "Emacs %d.%d" emacs-major-version emacs-minor-version) " "
       "Org-mode " (org-version) " "
       "org-static-blog 1.4.0"
       "</generator>\n"
       "<webMaster>" user-full-name " (" user-mail-address ") " "</webMaster>\n"
       "<image>\n"
       "<url>" org-static-blog-publish-url "static/favicon.ico" "</url>\n"
       "<title>" org-static-blog-publish-title "</title>\n"
       "<link>" org-static-blog-publish-url "</link>\n"
       "</image>\n"))

Cabecera HTML #

Definida en la función org-static-blog-page-header, inserta el <head> de cada página, usaremos esta función para incluir el css, fuentes, y/o javascript personalizados para el blog.

(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=\"stylesheet\" href=\"static/font-awesome/css/font-awesome.css\">
       <link rel=\"icon\" href=\"static/favicon.ico\">"
      )

Body #

Inserta al comienzo de la etiqueta <body> de cada pagina , aquí pongo el logo del blog y su url


(setq org-static-blog-page-preamble
      "<div style=\"text-align:center\">
	      <img src=\"static/logo.png\" alt=\"elblogdelazaro\"><br>
	      <a href=\"https://elblogdelazaro.org\">el blog de lázaro</a>
       </div>")

Pie #

Por ultimo configuro el pie de la pagina, al final de la etiqueta <body>

Aquí tengo que hacer un par de aclaraciones, si quieres utilizar los iconos awesome que ves en el pie de esta pagina, primero has de descargarlos a un lugar que sea accesible por el servidor y configurar la cabecera HTML para indicar esa ruta static/font-awesome/css/font-awesome.css

Puedes descargarlos en https://fontawesome.com/download

Si por el contrario no los quieres utilizar puedes borrar desde <footer id=\"footer\" hasta el ultimo </div> antes de ~<div id=\"license-note\">, borra también la etiqueta </footer>

(setq org-static-blog-page-postamble
    "<div id=\"postamble\" class=\"status\">
	<footer id=\"footer\" class=\"color color-secondary short\">
	    <div class=\"container\">
		<div class=\"row\">
		    <div class=\"col-md-12 center\">
			<ul class=\"footer-icons mb-md\">
			    <li>
				<a href=\"mailto:ebdl@elblogdelazaro.org\" title=\"Envía un mail a ebdl@elblogdelazaro.org\">
				<span class=\"fa-stack fa-lg\">
				    <i class=\"fa fa-circle fa-stack-2x\"></i>
				    <i class=\"fa fa-envelope fa-stack-1x fa-inverse\"></i>
				</span>
				</a>
			    </li>
			    <li>
				<a href=\"https://gitlab.com/hefistion\" title=\"hefistion en Gitlab\">
				<span class=\"fa-stack fa-lg\">
				    <i class=\"fa fa-circle fa-stack-2x\"></i>
				    <i class=\"fa fa-gitlab fa-stack-1x fa-inverse\"></i>
				</span>
				</a>
			    </li>
			    <li>
				<a href=\"https://twitter.com/ElBlogDeLazaro\" title=\"elblogdelazaro en twitter\">
				<span class=\"fa-stack fa-lg\">
				    <i class=\"fa fa-circle fa-stack-2x\"></i>
				    <i class=\"fa fa-twitter fa-stack-1x fa-inverse\"></i>
				</span>
				</a>
			    </li>
			     <li>
				 <a href=\"https://elblogdelazaro.org/index.xml\" title=\"suscríbete al blog vía rss\">
				 <span class=\"fa-stack fa-lg\">
				     <i class=\"fa fa-circle fa-stack-2x\"></i>
				     <i class=\"fa fa-rss fa-stack-1x fa-inverse\"></i>
				 </span>
				 </a>
			     </li>
			</ul>
		    </div>
		</div>
	    </div>
	 <div id=\"license-note\">
	     <p><a href=\"https://elblogdelazaro.org\">el blog de lázaro</a>
	     &nbsp;&bull;&nbsp;
	     2017
	     &nbsp;&bull;&nbsp;
	    <a rel=\"license\" href=\"http://creativecommons.org/licenses/by-sa/4.0/\">licencia cc by-sa 4.0</a><br>
	    generado con <a rel=\"org-static-blog\" href=\"https://github.com/bastibe/org-static-blog/\"> org-static-blog</a>
	    y <a rel=\"Emacs\" href=\"https://www.gnu.org/software/emacs/\">emacs</a></p>
	</div>
 </footer>"))

Hoja de estilos css y fuentes #

Antes hemos visto que podemos definir la hoja de estilos css a utilizar en la función org-static-blog-page-header, la hoja de etilos utilizada esta diseñada por Daniel Vicente, la puedes descargar de su repositorio en https://github.com/DiegoVicen/org-css

Las fuentes utilizadas también son las ofrecidas por Daniel Vicente

He realizado unos pequeños ajustes al fichero css hasta dejarlo a mi gusto, la puedes encontrar junto a la fuentes utilizadas en mi repositorio https://gitlab.com/hefistion/my-blog.

Crear un artículo #

Ahora que tenemos configurado nuestro sitio, hay que alimentarlo, podemos crear directamente un articulo a partir de un fichero org o crear un borrador (draft)

Articulo #

Creamos 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, para ello debe de estar habilitado 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 #

También 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 archivo index.html ni en el index.xml

Publicar un artículo #

Cuando hemos terminado de editar nuestro fichero .org o el borrador (moveremos el archivo org a la carpeta posts) para generar el fichero html usaremos el comando 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, situandonos en la carpeta posts o drafts y 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, si tienes instalado python3 en el ordenador, luego abre el navegador y en la dirección http://0.0.0.0:8080 veras tu página o borrador.

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 htm generado mediante M-x org-static-blog-open-matching-publish-file

Como has podido leer el tener tu propio blog con emacs es bastante sencillo, solo espero que este articulo te ayude o al menos te alcre la forma de realizarlo.

Espero que et haya gustado, pasa un gra dia.

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.