Crea tu blog con emacs, org-mode y org-static-blog
— Carlos M.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 blogorg-static-blog-publish-url "https://elblogdelazaro.org/"
la url del blogorg-static-blog-publish-directory "~/Documentos/proyectos/elblogdelazaro.org/public/"
ruta donde se exportan los ficheroshtml
org-static-blog-posts-directory "~/Documentos/proyectos/elblogdelazaro.org/posts"
ruta de los ficheroorg
que contienen los artículos a explotar comohtml
org-static-blog-drafts-directory "~/Documentos/proyectos/elblogdelazaro.org/drafts"
ruta donde guardaremos los borradores de los artículos a publicarorg-static-blog-rss-file "index.xml"
nombre del fichero que contendrá el indice rss del blogorg-static-blog-rss-max-entries 10
número de entradas a mostrar en por el fichero rssorg-static-blog-langcode "es"
lenguaje del blogorg-export-with-toc nil
el blog no va a utilizar tabla de contenidos (cambia el valor atrue
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 enlaceorg-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 anil
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>
•
2017
•
<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>"))
Disponemos de tres bloques a configurar:
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.