Crea tu blog con Middleman

Para los que no me conocen de forma presencial, esta web ha tenido diferentes rencarnaciones, unas desarrolladas por wordpress, otras por PHP uro, anteriormente estaba desarrollada por Jekyll, pero esta vez este blog ha resurgido con el generador de páginas estáticas Middleman, así que para los que quieran tener también su blog, lo pueden hacer de forma sencilla y fácil, realmente solo requieren de conocimientos básicos de Ruby, de HTML5, CSS y casi nada de JavaScript para poder desarrollar su web.

Bien para empezar tenemos que tener instalada la gema de Middleman y luego inicializar un nuevo proyecto

gem install middleman # Para instalar nuestra gema

middleman init MY_BLOG_PROJECT --template=blog #inicializa nuestro proyecto con lo necesario para construir nuestro blog.

Ya con ello tenemos lo esencial para poder crear nuestro blog, ya que nos crea una estructura de directorios para poder trabajar, desde nuestro index.html, carpetas donde podremos guardar nuestros “layouts” y el que considero el archivo más importante, el config.rb donde podremos agregar todas las configuraciones necesarias y que estaremos retocando según sea el caso de nuestro proyecto.

Si revisamos el Gemfile, podemos ver todas las librerías que se instalaron para su funcionamiento, pero en mi caso particular yo le agregue la gema middleman-livereload para que cada vez que se actualice el codigo de mi web, automáticamente actualice la pestaña de mi navegador junto a la gema de middleman-syntax, ya que es una extensión donde en mi Markdown visualizara con colores y todo el código que presente por ejemplo para este tipo de posts. En todo caso, les dejo el cómo está mi Gemfile, para que si tienen dudas de algo en especial puedan dejarme un comentario.

# Middleman Gems
gem 'middleman', '~> 4.4.2'
gem 'middleman-blog'
gem 'middleman-autoprefixer', '~> 3.0'
gem 'middleman-livereload'
gem 'middleman-syntax'
# gem 'middleman-deploy'
gem 'redcarpet', '~> 3.3', '>= 3.3.3'
gem 'nokogiri'
gem 'kramdown'

# For feed.xml.builder
gem 'builder', '~> 3.0'

# Windows does not come with time zone data
gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby, :x64_mingw]

# For faster file watcher updates on Windows:
gem 'wdm', '~> 0.1', platforms: [:mswin, :mingw, :x64_mingw]
Nuestro Gemfile

Bueno empecemos con la estructura de nuestra carpeta, en source colocaremos todos nuestros códigos, dentro podemos encontrar la carpeta de layouts donde irán guardadas todas nuestras plantillas, además que como mencione anteriormente también se generaron los archivos index.html.erb que es nuestra página principal, y como esto es un blog autogenerado, este también nos creó los archivos calendar.html.erb, tag.html.erb y en lo personal termine creando el de category.html.erb para que se agruparan mis posts por categoría de igual forma, tendrán una plantilla similar a la de index.html.erb con ligeros cambios a consideración de cada quien.

Entonces, para crear un “post” nuevo en nuestra terminal ponemos:

middleman article "<nombre del post>"

Lo que nos generara un archivo markdown nuevo, que en la siguiente imagen podremos ver como termino generándose un archivo Markdown, ahora si vemos en la parte derecha de la imagen es mi archivo config.rb, en la parte de blog.sources, asigne que los archivos nuevos se pusieran dentro de una carpeta “posts” y que el permalink (la url de nuestro post) sea igual al título que le asignamos a nuestro archivo.

Middleman - Como quedaria nuestro proyecto de forma inicial
Como quedaria nuestro proyecto de forma inicial

Ya dentro de nuestro archivo markdown se generaron unas “variables”, esto se le conoce como “Frontmatter” y usa el formato YAML, ahi podemos poner las variables que queramos, por ejemplo, las etiquetas, categorias y lo que sea necesario para usarlo en nuestro posts.

Middleman - Como quedaria nuestro proyecto de forma inicial
El Frontmatter de nuestra pagina Guia de mecatronica

Por ejemplo, para mis posts en blog personal, en especial en el post de Typora, yo utilicé el siguiente YAML Frontmatter:

---

layout: post
title: Typora
date: 2022-06-15 15:58 UTC
tags: Markdown, Software
category: Tecnologia
portada: "portadas/typora.png"

---

En el que le estoy diciendo que use mi plantilla post, el título del post es “Typora”, la imagen principal, en que categoría va, así como algunas etiquetas, después de eso todo el post ya es el propio artículo que escribiría en formato Markdown y que irían para mi propia web o en una publicación de Hive.

Para poder ver como va quedando nuestro post podemos poner en nuestra terminal middleman server, el cual de forma local “compilara” y podremos entrar a http://localhost:4567 para poder ver como va quedando nuestra web. Y una vez que todo este listo para subirlo a nuestro hosting con el comando middleman build se generara una nueva carpeta con el nombre “build” donde estara toda nuestra web creada y lista para ser alojada.

Lo mas difícil y laborioso al hacer una web sería hacer todo el esqueleto y el diseño, que con falta de práctica puede tardar hasta una semana, pero con tiempo incluso lo podrías hacer en un solo día, ya después será generar los posts donde al menos que tengas algunas mejoras para tu web ya no tendrías que tocar código de forma continua. Espero que te haya gustado el post, si crees que me falto algo que mencionar, por favor dejámelo como comentario para que pueda agregarlo y responderte, para que así te animes a crear tu propia web.

En caso de que tengas dudas o alguna sugerencia para este post, por favor dejame un comentario.

¡Los anuncios me ayudan!

Hola. Este blog se mantiene gracias a algunos banners de publicidad. Si tienes bloqueador de anuncios te pido que nos pongas en tu whitelist.

La publicidad de este sitio no es invasiva. O si prefieres podrias dar una pequeña donación en las diferentes criptomonedas de este sitio.

Por tu atención gracias