Cómo editar contenidos

esta es la "subheadline". Este artículo ha sido escrito por c.

Este es el teaser, en este tutorial veremos como crear contenidos en nirakara-lab.com

Cómo editar los contenidos de nirakara-lab

La web nirakara-lab.com es una web que funciona mediante las herramientas de github.com. Github.com es una web que ofrece una plataforma para facilitar el trabajo en grupo, especialmente pensada para el desarrollo de software. Github facilita la creación de diferentes versiones de un software, la discusión sobre estos cambios, y la posibilidad de revertir los cambios de forma sencilla.

Github ofrece una herramienta muy cómoda que son las “github pages”. Github Pages permite preparar una página web de forma muy sencilla que es ofrecida desde los propios servidores de github sin coste extra, ni necesidad de mantenimiento, etc. Simplemente se suben o editan los contenidos, y estos son servidos inmediatamente al mundo desde el dominio que nosotros configuremos en github.

Nirakara-lab.com es servida desde Github Pages y aprovechamos la potencia que nos brinda en cuanto a herramientas y simplicidad. Funciona como nuestro hosting ya que se aloja en sus servidores, pero además nos da una administración desde la que podemos editar los contenidos, por lo que también funciona como nuestro CMS (gestor de contenidos). Además desde este gestor de contenidos no sólo podemos editar un texto o subir una foto sino que también podemos hacer comentarios que verán otros miembros del equipo pero que no se verán publicamente en internet, brindándonos así una herramienta de discusión similar a un chat de slack para cada artículo particular.

Para poder añadir o modificar contenido es necesario crear una cuenta de github en https://github.com/, y seguramente habrás ya recibido un correo para formar parte de la cuenta de github de nirakara-lab y editar el repositorio de la web. (“repositorio” hace referencia a un espacio específico de trabajo sobre un tema concreto; El diseño y contenidos de “nirakara-lab.com” es un repositorio, cuya url, de edición privada sólo para miembros invitados, es https://github.com/nirakara-lab/nirakara-lab.github.io ).

Al repositorio tenemos dos formas de acceder: a través de la propia interfaz de github, forma más sencilla para comenzar, y mediante terminal, más rápido y potente pero implica encontrarse cómodo usando el terminal, y un tiempo de aprendizaje para habituarse a usar git y su comunicación con github desde la terminal. (Git es una herramienta de control de versiones, y github es una página web que utiliza git para el trabajo en equipo en un proyecto/repositorio determinado)

Editar desde la administración de github

Si entras en el repositorio de nirakara-lab verás una lista de archivos. Estos archivos conforman la página web y se pueden editar simplemente clicando sobre el archivo que quieras editar, y pulsando sobre el icono del lápiz que habrá aparecido a mano derecha.

editararchivo

Cuando terminemos de editar el archivo guardamos los cambios pulsando sobre el botón “Commit changes” (que se encuentra abajo de la página).

Si quieres subir una imagen (u otro archivo: un pdf, etc) por ejemplo para añadir a un artículo, simplemente métete en la carpeta a la que quieras subir esta imagen, y pulsa sobre “upload files”:

subirarchivo

Esto es todo lo que se necesita realmente saber para crear contenidos en nirakara-lab.com. Casi todo. Hay que saber también que github utiliza para añadir estilos al texto el lenguaje de marcado markdown, que es simplemente una serie de códigos para facilitar la escritura de HTML. Por ejemplo, mientras que en HTML para crear una cabecera utilizamos “<h1>cabecera</h1>”, en markdown usamos simplemente “# cabecera” , por lo que es mucho más sucinto. Y permite también etiquetas HTML si las prefieres o si lo que quieres hacer no es posible conseguirlo con markdown (como añadir un id o un class para crear un estilo especial en una parte del contenido).

Github en particular usa una variable de markdown llamada kramdown. Este es una buena revisión de los principales códigos mardown, y aquí tienes una referencia de kramdown.

Por último nos faltaría saber dónde se encuentran los archivos que queremos editar. De todas las carpetas que hay en el repositorio para los contenidos nos interesan sólo “pages” y “posts”. En “pages” se encuentran los contenidos que no pertenecen al blog, es decir, los contenidos de la página de research, de team, etc. Y en “posts” se encuentran los contenidos del blog. Podrían estar en otra carpeta, es una pura convención. Dentro de estas carpetas editaremos el archivo que queramos modificar, o crearemos uno nuevo y, por conveniencia, copiaremos el contenido de un archivo previo para tener un modelo del que partir. Hay una serie de metadata en la cabecera de cada archivo que indica cosas como qué imagen o título queremos que se muestre en la cabecera. Viendo cómo está hecho en otro sitio y copiando y ajustando en el nuevo archivo es una buena forma de evitar olvidos innecesarios en los metadata, e inspiración respecto a estilos de código markdown que estemos usando en artículos anteriores.

Esta propia página del tutorial que estás leyendo tiene el siguiente metadata:

---
layout: articulo
header:
  title: Cómo editar contenidos en git-hub
  image_fullwidth: header.jpg
subheadline: esta es la "subheadline". Este artículo ha sido escrito por c.
teaser: Este es el teaser. En este tutorial vamos a ver cómo comenzar a crear contenido en nirakara-lab.com
permalink: /tutoriales/edicionweb
---

En donde layout es el nombre de la plantilla que estamos usando, en este caso “articulo”. No hará falta cambiarla a no ser que queramos variar el diseño.

header.title es el título de la cabecera, y header.image_fullwidth es la imagen de fondo de la cabecera, imagen que subiremos a la carpeta images.

subheadline es un texto en mayúsculas entre la cabecera y el artículo.

teaser es un texto entre la cabecera y el artículo, que puede servir como abstract.

permalink es la url en que esta página se va a mostrar, en este caso “/tutoriales/edicionweb”. Este es un elemento muy importante, pues si no tiene permalink, no tiene dirección y el contenido quedaría inaccesible. Lo que nos lleva a…

La navegación

La última pieza del puzzle es la navegación. Es decir, cómo le indico a la web desde dónde se puede acceder a una página específica.

Como acabamos de ver, en los metadata tenemos el permalink que es la url de una página en particular. La web genera a partir de estos permalinks un mapa, y sabe entonces que todo lo que apunte a esa url tiene que cargar dicho contenido. Por tanto si yo en otra página añado un enlace a ese contenido, me dirigirá a él. Por ejemplo, si yo enlazo a themes me dirigirá a este contenido porque he indicado en sus metadata que su permalink es “/themes/”.

Y si lo quiero enlazar desde la navegación superior de la página, para esto simplemente hay que editar el archivo data/navegation.yml.