19/06/2025

Cómo Construir un Blog con Netlify y Emacs en Menos de una Hora

Introducción

Crear un blog moderno y eficiente no requiere herramientas complicadas. Con Netlify para alojamiento y Emacs como editor, puedes configurar un blog estático en menos de una hora. Este tutorial está diseñado para bloggers técnicos que prefieren un entorno potente como Emacs para escribir y gestionar contenido. Usaremos Hugo como generador de sitios estáticos, Emacs con Org-mode o Markdown para escribir, y Netlify para despliegues automáticos. ¡Vamos a ello!

Por qué elegir Netlify y Emacs

Esta combinación es ideal por varias razones:

Emacs: Un editor altamente personalizable con soporte para Markdown y Org-mode, perfecto para escribir y organizar contenido.
Netlify: Ofrece alojamiento gratuito, despliegues automáticos vía Git y escalabilidad sin esfuerzo.
Sitios estáticos: Rápidos, seguros y fáciles de mantener, ideales para blogs técnicos.
Eficiencia: Todo el proceso, desde la configuración hasta el primer post, se puede completar en menos de 60 minutos.

Requisitos previos

Para seguir este tutorial, necesitarás:

Una cuenta de GitHub (gratis).
Emacs instalado con paquetes como org-mode o markdown-mode (recomendamos ox-hugo para exportar Org-mode a Hugo).
Conocimientos básicos de Git y la terminal.
Node.js instalado (opcional, para previsualizar localmente).
Hugo instalado (instrucciones a continuación).

Configurando Emacs para blogging

Antes de empezar, asegúrate de que Emacs esté configurado:

Instala markdown-mode para editar archivos Markdown:

(use-package markdown-mode
  :ensure t
  :mode ("\\.md\\'" . markdown-mode))

Opcional: Instala ox-hugo para usar Org-mode con Hugo:

(use-package ox-hugo
  :ensure t
  :after ox)

Configura atajos útiles en .emacs o init.el para crear posts rápidamente:

(global-set-key (kbd "C-c n") (lambda () (interactive) (find-file "~/mi-blog/content/posts/")))

Paso a paso: Configurando tu blog

Paso 1: Instalar Hugo

Hugo es un generador de sitios estáticos rápido. Instálalo así:

En macOS:
```
brew install hugo
```
En Windows (con Chocolatey):
```
choco install hugo-extended
```
En Linux, descarga desde la página oficial de Hugo.
Verifica la instalación:
```
hugo version
```

Paso 2: Crear un nuevo sitio con Hugo

Crea un directorio para tu blog:
```
hugo new site mi-blog
cd mi-blog
```
Inicializa un repositorio Git:
```
git init
```

Añade un tema de Hugo (por ejemplo, Ananke):

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Configura el tema en config.toml:

theme = "ananke"
baseURL = "https://tu-sitio.netlify.app/"
languageCode = "es-ES"
title = "Mi Blog con Emacs"

Paso 3: Crear tu primer post en Emacs

Genera un nuevo post con Hugo:
```
hugo new posts/mi-primer-post.md
```
Abre el archivo content/posts/mi-primer-post.md en Emacs (C-x C-f content/posts/mi-primer-post.md).

Escribe tu post en Markdown o usa Org-mode con ox-hugo. Ejemplo en Markdown:

---
title: "Mi Primer Post"
date: 2025-06-19T15:00:00+02:00
draft: false
---
¡Bienvenidos a mi blog! Este post fue escrito en Emacs y publicado con Netlify.

Si usas Org-mode con ox-hugo, crea un archivo blog.org:

#+HUGO_BASE_DIR: ~/mi-blog
#+HUGO_SECTION: posts

* Mi Primer Post
:PROPERTIES:
:EXPORT_FILE_NAME: mi-primer-post
:EXPORT_DATE: 2025-06-19
:END:
¡Bienvenidos a mi blog! Este post fue escrito en Org-mode y exportado con ox-hugo.

Exporta con C-c C-e H A (para todos los posts) o C-c C-e H h (para un solo post).

Previsualiza localmente:
```
hugo server
```
Abre http://localhost:1313 en tu navegador.

Paso 4: Conectar tu blog a GitHub

Crea un repositorio en GitHub (mi-blog).

Sube tu proyecto:

git add .
git commit -m "Inicializa blog con Hugo y Emacs"
git remote add origin https://github.com/tu-usuario/mi-blog.git
git push -u origin main

En Emacs, usa magit para gestionar Git:
- C-x g para abrir Magit.
- c c para crear un commit.
- P p para empujar al repositorio remoto.

Paso 5: Desplegar en Netlify

Inicia sesión en Netlify.
Selecciona New site from Git y conecta tu repositorio de GitHub (mi-blog).
Configura el despliegue:
- Build command: hugo
- Publish directory: public
- Deja la versión de Hugo en blanco.
Haz clic en Deploy site. Netlify asignará una URL (por ejemplo, https://tu-sitio.netlify.app).
Opcional: Configura un dominio personalizado en Domain settings.

Paso 6: Publicar nuevos posts desde Emacs

Crea un nuevo post (hugo new posts/nuevo-post.md o usa Org-mode).
Edita en Emacs y guarda los cambios.
Sube a GitHub con Magit o la terminal:
```
git add .
git commit -m "Añade nuevo post"
git push
```
Netlify desplegará los cambios automáticamente.

Personalización adicional

Temas: Explora Hugo Themes para cambiar el diseño.
SEO: Añade description y keywords en el front-matter de los posts.
Netlify CMS: Integra Netlify CMS para gestionar contenido sin Emacs.
Org-mode avanzado: Usa org-publish para exportar múltiples posts a Hugo.
Analytics: Conecta Google Analytics desde Netlify.

Solución de problemas

Despliegue falla en Netlify: Verifica que public se genere (hugo) y que el comando de build sea correcto.
Tema no carga: Ejecuta git submodule update --init --recursive.
Errores en Org-mode: Asegúrate de que ox-hugo esté configurado correctamente (:HUGO_BASE_DIR apunta a tu proyecto).
Imágenes no se muestran: Usa rutas relativas en static/ (por ejemplo, /images/mi-imagen.jpg).

Conclusión

¡Listo! Ahora tienes un blog estático en Netlify, gestionado desde Emacs con Markdown o Org-mode. Este flujo combina la potencia de Emacs con la simplicidad de Netlify, ideal para bloggers técnicos. Comparte tu blog o tus preguntas en X o en los comentarios.

Recursos adicionales

¿Listo para lanzar tu blog con Emacs y Netlify? ¡Sigue este tutorial y comparte tu sitio!

Comienza con Netlify

Mi Blog con Emacs y Esteroides