<div class="text-justify">

Como les he mencionado en los últimos posts, [volví a hacer mi blog personal](https://peakd.com/hive-106817/@shadowmyst/por-fin-quedo-lista-la-web), pero esta vez con el generador de páginas estáticas [Middleman](https://middlemanapp.com/), 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.

Si no tienes instalado Ruby, [aquí te dejo el link](https://youtu.be/bHoj1eoOSD4), para que puedas hacerlo sin mayor preámbulo, si tienes Windows te aconsejo que lo instales dentro de [WSL2](https://peakd.com/hive-106817/@shadowmyst/probando-windows-subststem-linux-wsl2-hive-106817), ya que te evitaras más problemas si en un futuro quieres aprender a usar más sobre Ruby.

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

~~~ bash
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.

~~~ ruby
# 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]
~~~

![Pasted image 20220617122120.png](https://files.peakd.com/file/peakd-hive/shadowmyst/23tRvScok9m49L65fgYY8LVG18DzTVf1KgJRTYB2hhJPbsJu7Hdm462zSm9wYxMn5sUgH.png)

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:

~~~ bash
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.

![creandoNuevoArticulo.png](https://files.peakd.com/file/peakd-hive/shadowmyst/23t75741w6QmUEtFsYssaD6kV4xnqijc6pPAErUkvvD9KFcfT262CwxMPAhZ7RF4HQraF.png)

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. 

![Pasted image 20220617140452.png](https://files.peakd.com/file/peakd-hive/shadowmyst/23t756gdhfpX2EE6HG5FQHz5nBdHWFStj9hoEGuyUGk5iV7RdjSfbWsxH63BqAmrxRWzM.png)

Por ejemplo, para mis posts en blog personal, en especial en el post de [Typora](https://shadowmyst.net/typora/), yo utilicé el siguiente *YAML Frontmatter*:

~~~ markdown
---

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 estará 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.

</div>