Destacados

Los destacados de Enredante

Cómo tener un blog con GitHub y Jekyll, fácilmente y en dos minutos

COMO-TENER-UN-BLOG-CON-GITHUB Cómo tener un blog con GitHub y Jekyll, fácilmente y en dos minutos

En este artículo, veremos cómo tener un blog con GitHub y Jekyll. Si eres de los que quieren iniciarse en el mundo del blogging; o tu única pretensión es lanzar un blog personal, sin complicaciones, has llegado al sitio adecuado.

Pero, antes de entrar en materia, conviene revisar esta cita, extraída de Content Marketing Blog, el sitio Web de mi amigo y colega Alberto @albermoire Gómez, con un microblog estupendo.

¿Cuándo fue la última vez que escribiste y publicaste algo simplemente porque lo querías compartir. O porque te nació de un momento a otro. O porque querías enseñarle algo a alguien?

Pero para escribir y publicar algo bajo esos principios es preciso una plataforma de blogging fácil de usar y con unas características determinadas.

Formas de tener un blog, de la forma más fácil, como la que vamos a ver en este post -con GitHub Pages-, ya hemos repasado en Blogpocket. Por ejemplo, con Evernote y Postach.io es posible tener un blog personal sencillo, sin necesidad de conocimientos técnicos especiales y sin distracciones de ningún tipo.

Alberto, en otro post de Content Marketing Blog e inspirador de esta entrada en Blogpocket, indica las funciones del sistema para tener un blog con GitHub y Jekyll:

  • Dominio personalizado.
  • Diseño minimalista.
  • Markdown.
  • No requiere hosting, base de datos o CMS.
  • Webs rápidas y seguras.

En esta entrada, aprenderás a tener un blog con GitHub y Jekyll, rápida y fácilmente y sin complicaciones.

Jekyll requiere conocimientos de programación y de desarrollo de aplicaciones Web pero no te asustes. La misión de Blogpocket es ayudarte a entender mejor los métodos y herramientas para conseguir un blog de éxito fácilmente. Así que hemos descubierto y probado un método para que puedas tener un blog con GitHub y Jekyll sin adquirir ningún conocimiento técnico. Un método para que, sin saber Jekyll, puedas tener ese blog de diseño minimalista que no requiere hosting ni base de datos o CMS. A tu favor, obtendrás un blog rápido, seguro, optimizado para móviles y de bajas emisión de CO2.

Cómo tener un blog con Evernote y Postach.io

Aprende a crear un blog con Evernote y Postach.io, escuchando el podcast anterior y leyendo el siguiente post: Crea un blog con Postach.io y Evernote.

Plataformas alternativas a WordPress

WordPress es la mejor plataforma para crear un blog y cualquier sitio Web, incluso si es tan complejo como una tienda online. La razón es bien simple: es la más completa en cuanto a funcionalidades, la más utilizada en el mundo y de código abierto. Posee detrás una comunidad inmensa de desarrolladores construyendo plugins y themes.

Pero si lo que deseas es solamente lanzar un blog personal, sin más pretensiones para el futuro, y careces de conocimientos técnicos de programación y desarrollo de aplicaciones Web, existen alternativas muy interesantes a WordPress. Lee el siguiente artículo para saber cuáles son las más populares: Las 12 mejores alternativas a WordPress.

Hay una razón de peso para probar sistemas de publicación de blogs, del estilo de Postach.io o GitHub: dedicarse a escribir y compartir, sin distracciones de ningún tipo, recuperando esa “libertad” de la que habla Alberto en Content Marketing Blog, sin el corsé que ciñe actualmente el cuerpo de los blogs.

PERFECCION-DISENO Cómo tener un blog con GitHub y Jekyll, fácilmente y en dos minutos

Uno de los principios fundamentales con los que comulgamos en Blogpocket es con el minimalismo, no solo en el diseño sino también en las propias características de las herramientas que usamos. Creemos firmemente que la perfección no se logra cuando no hay nada que poner, sino cuando no hay más que quitar.

Markdwown y editor Prose.io

Una de las ventajas de tener un blog con GitHub y Jekyll es que podrás editar los posts mediante Markdown.

John Gruber creó el lenguaje Markdown en 2004, con una ayuda importante de Aaron Swartz en la sintaxis. Gruber tenía la meta de hacer que la gente “pudiera escribir usando un formato de texto plano fácil-de-leer y fácil-de-escribir, y con la posibilidad de poder convertir su documento en XHTML (o HTML) válido”. Wikipedia dixit.

En el siguiente post encontrarás un pequeña guía del lenguaje Markdown: Los atajos de formato del editor WordPress, y Ghost. Y, naturalmente, Alberto también ha publicado un magnífico minipost sobre Markdown en Content Marketing Blog: Simplemente Markdown.

editor-prose-io Cómo tener un blog con GitHub y Jekyll, fácilmente y en dos minutos

No obstante, ni siquiera es necesario que conozcas la sintaxis de Markdown para tener un blog con GitHub y Jekyll, ya que el editor Prose.io se integra con GitHub. De esa manera, usas un editor de estilo tradicional para crear los posts en GitHub (ver figura que precede a estas líneas).

¿Qué es GitHub?

Nos hemos ido a la Wikipedia para traer una definición de GitHub.

GitHub es una plataforma de desarrollo colaborativo para alojar proyectos utilizando el sistema de control de versiones Git. Se utiliza principalmente para la creación de código fuente de programas informáticos. El software que opera GitHub fue escrito en Ruby on Rails. Desde enero de 2010, GitHub opera bajo el nombre de GitHub, Inc. Anteriormente era conocida como Logical Awesome LLC. El código de los proyectos alojados en GitHub se almacena típicamente de forma pública, aunque utilizando una cuenta de pago, también permite hospedar repositorios privados.

El 4 de junio de 2018, Microsoft compró GitHub por la cantidad de 7.500 millones de dólares

Una de las características importantes de GitHub que usaremos para el método de creación de un blog es el fork (bifurcación). Según Wikipedia, una bifurcación es la creación de un proyecto en una dirección distinta de la principal u oficial tomando el código fuente del proyecto ya existente. Como resultado de la bifurcación se pueden llegar a generar proyectos diferentes que cubren necesidades distintas aunque similares. El término también puede ser usado para representar la ramificación de cualquier trabajo.

En el método para crear un blog con GitHub y Jekyll, usaremos la función «Fork» para crear un nuevo repositorio en nuestra cuenta de GitHub, a partir del

repositorio de Barry Clark

.

Pasos para tener un blog con GitHub y Jekyll

Sigue al pie de la letra los pasos descritos a continuación para tener un blog con GitHub y Jekyll.

Darse de alta en GitHub

github-perfil Cómo tener un blog con GitHub y Jekyll, fácilmente y en dos minutos

Este paso es lógico y obligatorio. Entra en GitHub.com y date de alta. Rellena tu perfil (ver mi perfil en GitHub en la figura anterior).

¿Qué es un repositorio?

Una de las pestañas que contiene cualquier perfil en GitHub es la correspondiente a los «Repositorios».

Emplearemos este apartado para crear nuestro blog en GitHub. Es decir, un blog en GitHub reside en un Repositorio. A todos los efectos es como el espacio de almacenamiento de un hosting: el sitio donde se alojan los archivos del blog (instalación de WordPress, imágenes, etc.)

En la figura que precede a esta líneas, y que corresponde a mi perfil en GitHub, se observa el repositorio «blogpocket.github.io» dentro del apartado «Repositorios populares». Ese es mi blog en GitHub.

Veamos cómo se construye.

Hacer Fork de barryclark/jekyll-now

Ya hemos visto qué es un Fork en GitHub.

hithub-fork Cómo tener un blog con GitHub y Jekyll, fácilmente y en dos minutos

Utilizaremos esta función para obtener una copia del repositorio barryclark/jekyll-now.

Para ello, una vez que accedas al repositorio de Barry Clark, haz clic en el botón Fork (ver figura anterior).

La gran ventaja de este método es que no necesitas conocer la instalación de Jekyll ni realizarla para trabajar en con un blog en GitHub. Simplemente haciendo Fork del repositorio de Barry Clark obtendrás una copia lista para usar. Lógicamente, debes personalizarla.

A personalizar el fork de Barry Clark; es decir, a configurar tu blog en GitHub, es a lo que están dedicados los siguientes pasos.

Lee, primero, el archivo README.md porque contiene las instrucciones básicas para configurar un blog con GitHub y Jekyll.

En este tutorial no entraremos en detalle con el funcionamiento de Jekyll, pero se dan las claves para entender la manera de modificar los archivos del fork original.

El sitio donde están los datos fundamentales del blog es el archivo «_config.yml». Pero lo primero es darle nuevo nombre a tu repositorio.

Darle nombre al repositorio

step1 Cómo tener un blog con GitHub y Jekyll, fácilmente y en dos minutos

En el gif anterior puedes ver cómo se hace el Fork al repositorio original de Barry Clark y el cambio del nombre del repositorio.

Haz clic primero en el botón Fork y luego en el botón «Settings» para cambiar el nombre del repositorio.

Yo he creado el repositorio «blogpocket.github.io» en mi perfil de GitHub, lo que da lugar al blog blogpocket.github.io.

Configurar tu blog: archivo «_config.yml»

Entra en el repositorio correspondiente a tu blog (la copia mediante Fork del repositorio de Barry Clark) y haz clic en el archivo «_config.yml». Para editarlo, haz clic en el icon con el lápiz.

github-config Cómo tener un blog con GitHub y Jekyll, fácilmente y en dos minutos

Personaliza los siguientes parámetros (ver imagen anterior):

  • Name: Nombre del blog.
  • Description: Breve bio o descripción del blog.
  • Avatar: URL de la imagen que se muestra como avatar (puede ser la URL del avatar de tu perfil).
  • Footer-links: Los iconos de redes sociales que se muestran en el footer.

Además, se puede añadir el código de Disqus y Analytics; así como establecer la estructura de los permalinks.

Configurar la página home

Con lo que hemos visto hasta el momento, ya tienes un blog plenamente operativo en GitHub.

Naturalmente, debemos aprender a publicar posts, a crear páginas estáticas (por ejemplo, la de «About») y a personalizar las distintas páginas.

Es preciso aclarar en este instante, que el aspecto del blog se puede cambiar totalmente, mediante el correspondiente archivo CSS («style.scss»). También puedes añadir, eliminar y modificar el código que estimes oportuno de cualquier archivo.

No obstante, en este artículo que estás leyendo, pretendemos ser concisos en la creación de un blog con GitHub. Y proporcionar las claves para que, sin conocimientos de Jekyll, seas capaz de llevarlo a cabo.

La página home se personaliza alterando el archivo «index.html». Por ejemplo, puedes cambiar el literal «Read more» por «Sigue leyendo», añadir la fecha de publicación de los posts, etc.

Decíamos que no es nuestro propósito aquí, enseñar Jekyll. Pero si estás interesado en pequeños cambios como -por ejemplo- añadir la fecha de publicación de los posts; puedes acudir a la documentación oficial:

Quick Start

.

Configurar la página «Acerca de»

La página de About (Acerca de) es la típica página estática que puedes querer añadir a tu blog.

Es conveniente saber en qué archivo se configura el menú de navegación del blog. Entra en la carpeta «_layouts» y haz clic para editar el archivo «default.html».

github-nav Cómo tener un blog con GitHub y Jekyll, fácilmente y en dos minutos

Añade una nueva opción en el menú de navegación, escribiéndola dentro de la etiqueta <nav> (ver imagen anterior).

Para crear la página «Acerca de», haz clic en el archivo about.md, ubicado en la raíz del repositorio, y cambia su nombre a «acerca-de.md».

Usa el editor Prose.io si te encuentras más cómodo. Pero un archivo «.md» se puede crear con cualquier editor de texto. Para añadir un nuevo fichero, utiliza el botón «Create new file» o súbelo desde tu ordenador con el botón «Upload files».

Traducir el blog: ideas generales sobre la estructura de ficheros del repositorio

Un cambio que seguramente desearás hacer es la traducción de la plantilla. Para ese cambio o cualquier otro que se te ocurra, se describe la estructura de carpetas y directorios del repositorio en el que estamos trabajando.

  • _includes. En esta carpeta se encuentran los archivos para codificar Disqus y Analytics. También para añadir las metaetiquetas HTML correspondientes (por ejemplo, las Twitter Cards) y los enlaces a los iconos sociales.
  • _layouts. Hay tres plantillas que puedes adaptar a tus gustos: «default.html» (la página del blog), «page.html» (cualquier página estática) y «post.html» (cualquier post individual).
  • _posts. En esta carpeta debes guardar los archivos «.md» correspondientes a cada uno de los posts.
  • images. Sube a esta carpeta las imágenes de tu blog, tanto las de los posts como las de cualquier otro lugar.

Para ver cómo he personalizado yo el Fork de Barry Clark, puedes hacer Fork de mi repositorio.

Realmente, es muy sencillo y ni tan siquiera es necesario cambiar HTML o CSS.

Si sabes un poco de HTML y Jekyll puedes crear un blog totalmente a tu gusto.

Escribir, editar y publicar un post

Como ya se ha apuntado, para escribir un post debes crear un archivo «.md» dentro de la carpeta «_posts».

Cada archivo (un post) debe llevar una cabecera que indique el layout que se utiliza, el título y otras cosas como las categorías y tags. Para más información, puedes leer la documentación oficial de Jekyll: Creating Posts.

El nombre del archivo debe incluir la fecha de publicación en formato «YYYY-mm-dd». Por ejemplo, el primer post publicado se encuentra dentro del archivo «2018-8-30-Hello-World.md».

github-post Cómo tener un blog con GitHub y Jekyll, fácilmente y en dos minutos

Como se observa en la imagen anterior, cada post en Jekyll lleva una cabecera con metadatos. Copia la cabecera del post «Hello World» del repositorio original y úsala en todos tus posts, modificando título, categorías, etc.

El primer párrafo conforma el extracto que se verá en la home. Pero puedes también usar un separador como el típico <!–more–>. Lee esta documentación para aprender a hacer esto y otras cosas relacionadas con la publicación de posts.

Dominios personalizados

Es posible usar dominios personalizados. Yo estoy empleando https://ift.tt/1Jlhp9W con HTTPS gratuito.

Lo único que hay que hacer es indicarlo en el archivo CNAME escribiendo el dominio personalizado (en mi caso, https://ift.tt/1Jlhp9W) y luego configurar la zona DNS del proveedor del registro de dominio. Añade un registro CNAME con valor de la URL del blog.

Para saber si los DNS se ha propagado puedes usar este recurso.

Para cualquier problema con la configuración de un dominio personalizado, consulta Setting Up a Custom Domain With GitHub Pages.

HTTPS

Para establecer el protocolo HTTPS, espera a que tu dominio personalizado esté configurado del todo. Si no usas dominio personalizado, el protocolo HTTPS es inmediato.

Una vez trancurridas 24 horas, acude a «Settings» dentro de tu repositorio, y activa la casilla «Enforce HTTPS», dentro del apartado «GitHub Pages».

Conclusiones

Como dice el propio Barry Clark en Build A Blog With Jekyll And GitHub Pages, lo bueno de tener un blog con GitHub y Jekyll es su simplicidad y minimalismo, que te proporciona exactamente lo que se necesita para crear un sitio web centrado en el contenido que no requiera mucha interacción dinámica del usuario, y nada más. Esto lo hace perfecto para un blog personal, sin muchas aspiraciones.

Como se apuntó al principio de este artículo, es hora de recuperar el placer de tener un blog 😉

También dice Barry Clark que no dejes que la reputación de Jekyll como una plataforma de blogs para hackers te disuada. Construir un sitio web hermoso, rápido y minimalista en Jekyll no requiere habilidades de hacker de élite ni conocimiento de la línea de comandos.

Como se ha visto en este tutorial para tener un blog con GitHub y Jekyll, puedes configurarlo en cuestión de minutos, lo que ganas más tiempo para invertir en tu contenido.

Espero tus comentarios.

¿Estás buscando hosting? SiteGround

es el hosting de Blogpocket ¡pruébalo!:

SITEGROUND-EL-HOSTING-QUE-ME-GUSTA Cómo tener un blog con GitHub y Jekyll, fácilmente y en dos minutos

Fuente:
Blogpocket

Artículo completo:
https://www.blogpocket.com/2018/09/02/tener-un-blog-con-github-y-jekyll/

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

A %d blogueros les gusta esto: