Crea tu blog con Middleman

avatar
(Edited)

Como les he mencionado en los últimos posts, volví a hacer mi blog personal, pero esta vez 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.

Si no tienes instalado Ruby, aquí te dejo el link, para que puedas hacerlo sin mayor preámbulo, si tienes Windows te aconsejo que lo instales dentro de WSL2, 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

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]

Pasted image 20220617122120.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:

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

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

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



0
0
0.000
15 comments
avatar

Gracias por compartir esta información. Espero pronto poner a prueba esto, quiero ver las diferencias entre Middleman y Jekyll.

0
0
0.000
avatar

Casi son muy parecidos, pero creo que lo que me gusto más de middleman es que no tienes que configurar tantas cosas que en jekyll si harías.

De hecho ese fue mi problema con jekyll, que se actualizo y más extensiones qué usaba ya no cuadraron y me dio arts flojera actualizarlo todo

0
0
0.000
avatar

Si, algo que no me gustaba de jekyll era justamente eso, que debía configurar un montón de cosas, y la neta, eso no me agradaba, más que nada por el tiempo que debía invertirle. Aparte si quería usar ciertas extensiones no siempre jalaban. Voy a darle con middleman, en las próximas semanas, a ver que sale.

0
0
0.000
avatar

Congratulations @shadowmyst! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

You received more than 35000 upvotes.
Your next target is to reach 40000 upvotes.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

0
0
0.000
avatar

Muchachon una pregunta, que seria lo util de tener un blog o como se podria aprovechar a nivel monetario? hay formas de aprovecharlo en ese aspecto? no se nada sobre blogs y me llama la atencion tener uno en el aspecto diversion, tener mi pagina etc pero nunca esta demas saber si se puede aprovechar en un ambito financiero, una ayudin al bolssillo para pagar las cuentas.

Sobre la informacion, desde un punto de vista de alguien que no sabe nada de programacion, lo vi sencillo en los pasos que mencionaste, lo unico si los nombres de las cosas hace que se vea dificil pero ya viendolo como pasos pierde la complejidad. Muchos saludos :D

0
0
0.000
avatar
(Edited)

De hecho, al nivel monetario conviene en el sentido en que mientras en Hive un post deja de recibir ganancias después del séptimo día, en un blog, si lo tienes monetizado podrán tener tus posts ganancias siempre qué te visiten. Uno de los posts qué tengo en mi web lo escribí en el 2019 y es el que ha sido el más rentable para mí.

Eso sí, he ganado más dinero con mis publicaciones en Hive, de eso no hay duda, pero el que mis posts sigan siendo rentables por más de un año es algo que siempre se agradece, que si las visitas de mi web crecen están las posibilidades de que obtenga más ingresos, por eso volví a resubir mi web https://shadowmyst.net y ando resubiendo mis posts ahí.

Una de las desventajas que tiene Hive es a nivel SEO (Search Engine Optimization) qué es el proceso para mejorar la visibilidad de un sitio web. En palabras simples qué tus posts sean fácilmente encontrados buscando en google y en Hive eso es malísimo, pues es difícil que un post qué tú escribas en Hive te aparezca en los primeros resultados de Google mientras qué con un blog personal puedes hacer técnicas para aparecer en los primeros lugares. Por ejemplo, si tú buscas en Google: "Que es payjoy" encontraras en la primer página de google mi post de shadowmyst.net en vez de su versión en Hive.

Y la forma en que yo monetizo mis posts es por medio de google adsense, anuncios qué aparecen en mi web

img_0.15421256757929167

Yo creo en que tener Hive y tu blog personal es una excelente forma de aprovechar tu contenido

0
0
0.000
avatar

ah caray las cosas que se aprenden, pense solo se podia aprovechar como hobbie y resuta que hay toda una estructura para poder aprovecharlo al maximo tanto en buscador como con publicidad, es lo que voy entendiendo, gracias papu por el dato, lo tendre en mente como meta a largo plazo, crear un blog y tambien ya paso a visitar tu sitio. Uno se suscribe o es solo visitar?

0
0
0.000
avatar

Por ahora solo es visitar, no he creado ningún sistema de suscripción, al menos por ahora

0
0
0.000
avatar

ok le dire a mis amiguitos @sugeily2 y @palabras1 que te visiten, otra pregunta, llego y abajo a la izquierda hay una parte que dice apoyame con una taza de cafe y un corazon, tengo que darle ahi para que aplique el adsense?. Ya pause mi adbloker en tu blog para que apliquen las publicidades

0
0
0.000
avatar

El adsense son los anuncios publicitarios que aparecen en la web. Lo de la tazita de cafe se llama Ko-fi, es un sistema como patreon. Es otra forma de monetizar un blog, bajo donación de algún visitante.

image.png

0
0
0.000
avatar

Hola Shadow, gracias por la info.
Me parece interesante Middleman, yo solo habia leido sobre Jekyll cuando de Ruby se trata.
Actualmente uso Hugo + Netlify para mi web, y me la genera muy rapido. Ya solucione el tema de los post programados para fechas futuras, ahora solo me falta que los posts de mi blog tambien se publiquen en Hive, pero le sigo pensando como hacerlo de forma automatizada.

Cualquier ayuda, ayuda 😅.

Saludos.

0
0
0.000
avatar

Nunca he trabajado con Hugo porque tengo entendido que es con lenguaje GO y no me se su sintaxis, que tal es trabajar con el?

0
0
0.000
avatar

Es muy fácil, no necesitas entender mucho del lenguaje Go, por eso empecé a usarlo en vez de Gatsby (que aquí si se usa mucho Javascript, pero se extiende muchísimo su funcionalidad si lo entiendes bien, lo cual no es mi caso), hay mucha documentación de Hugo en la cual te puedes basar para lograr lo que quieras con tu página o blog.

0
0
0.000
avatar

Muchachon una duda general porque pregunto y siempre me dicen lea las reglas y sinceramente quedo en las nebulosas igual.

Yo hago reseñas de peliculas y series en videos, no quiero escribir esas reseñas, puedo subir esos videos a una comunidad acorde a ese nicho, por ejemplo CineTv? o necesariamente los tengo que subir a Espa Vlog? duda tonta, si y por eso la sigo haciendo porque las respuestas me pierden mas porque no se si estoy ignorando alguna regla no escrita de hive por lo perdido que estoy. Muchos saludos

0
0
0.000
avatar

Pues mientras no rompas los derechos de autor y respetes el fair use, no deberías de tener problemas

0
0
0.000