Creación del sitio web

6 minuto(s) de lectura

En el anterior artículo de esta serie dejamos nuestro sistema preparado para empezar a trabajar con el generador de sitios web estáticos Jekyll. En este documento exploraremos los pasos necesarios para dar vida a la página web en sí, que hospedaremos, de manera gratuita, a través de GitHub Pages.

Para esta ocasión, dos son las principales referencias que he consultado: en primer lugar, la excelente guía de Shirin Glander, que motivó que me animase a experimentar con esta tecnología, “How to set up your own R blog with Github pages and Jekyll Bootstrap”; en segundo lugar, la propia guía de inicio rápido que la página oficial de Jekyll pone a nuestra disposición.

Veamos con detalle el proceso que tenemos que seguir.

Creación del repositorio en GitHub

Para empezar, accederemos a nuestra cuenta en GitHub (o nos registraremos en el portal, en el caso de no disponer de una) y crearemos un nuevo repositorio. Para ello, utilizando el menú que aparece en la parte superior derecha, pulsaremos sobre el botón que posee el símbolo + y escogeremos la opción New repository.

Cambiaremos de página, accediendo a un formulario que debemos rellenar. En el campo Repository name escribiremos USERNAME.github.io, donde sustituiremos USERNAME por el correspondiente nombre de usuario que hayamos escogido para nuestra cuenta en GitHub. Por ejemplo, en mi caso particular, dicho nombre de usuario es ImAlexisSaez, por lo que en el interior del mencionado campo tuve que teclear ImAlexisSaez.github.io. Una vez introducido el nombre del usuario, haremos clic sobre el botón Create repository.

Nota: si, por uno de estos casuales de la vida, es la primera vez que escuchas palabras como GitHub, git o control de versiones, antes de continuar con este tutorial, te recomendaría que echases un vistazo a este otro: Try git, que te permitirá familiarizarte con muchos de los comandos que utilizaremos en breve. Por otro lado, en la sección Downloads de la propia página oficial de git puedes acceder al apartado de descargas de la última versión de esta herramienta.

Dando vida a la web con Jekyll

A continuación, ejecutamos el Símbolo del sistema como administrador (personalmente, utilizo el que incorpora la instalación de git: Git Bash), nos movemos al directorio del disco duro en el que deseemos almacenar el sitio web (utilizando el comando cd) y tecleamos las siguientes instrucciones:

git clone https://github.com/plusjade/jekyll-bootstrap.git USERNAME.github.io
cd USERNAME.github.io
git remote set-url origin git@github.com:USERNAME/USERNAME.github.io.git
git push origin master

Obviamente, al igual que hicimos en el apartado anterior, allá donde aparezca USERNAME tendremos que escribir nuestro nombre de usuario.

¡Está vivo!

En este momento, bien si utilizamos dir o ls en nuestro terminal, bien si empleamos el Explorador de Windows, veremos una serie de archivos y carpetas en el interior del directorio USERNAME.github.io (investigaremos algunos de ellos en próximos artículos). Además, nuestro sitio web ha pasado a estar disponible automáticamente para que lo visitemos, utilizando cualquier navegador web, a través de la dirección https://USERNAME.github.io/ (en mi caso, el enlace es https://imalexissaez.github.io/).

Revisando localmente la web

El aspecto que presenta nuestro sitio web, a estas alturas de la vida, seguramente dista bastante de la idea que teníamos en mente y estaremos interesados en empezar a llevar a cabo modificaciones inmediatamente. Para comprobar que los cambios que realicemos se ajustan a nuestros objetivos y no destrozamos por completo la web (confieso que esto último me sucedió varias veces durante los primeros días), nada mejor que revisar localmente el resultado de nuestros experimentos al variar el código fuente. De hecho, ese fue precisamente el objetivo del primer artículo de esta serie: posibilitar la opción de examinar localmente el sitio web.

Para ello, utilizando la terminal (Símbolo del sistema, Git Bash, Windows PowerShell, etc.), nos dirigimos de nuevo al directorio raíz donde hemos almacenado la página web y tecleamos:

jekyll serve

Tras unos instantes, y una serie de mensajes, la terminal nos anunciará que el servidor está operativo. Si ahora escribimos http://localhost:4000/ en nuestro navegador, accederemos a la versión local del sitio web.

Nota: debemos intentar evitar cerrar la ventana de la terminal o sino perderemos la posibilidad de acceder localmente a la página web. Por otro lado, en dicha ventana será donde podamos consultar qué tipo de error hemos cometido cuando alguna cosa no funcione como en principio tendría que hacerlo.

Creando el primer artículo para el blog

Utilizaremos también la terminal cuando deseemos empezar a escribir artículos para nuestro blog. Por ejemplo, de cara a experimentar, podemos crear uno de prueba, titulado Test. Para ello, no tenemos más que teclear en la terminal:

rake post title="Test"

Así, aparecerá automáticamente, dentro de la carpeta _posts, un fichero con extensión .md cuya estructura para su nombre viene dada por fecha-título, donde fecha corresponde al día de publicación del artículo (en formato año-mes-día), y título es la cadena de texto que escogimos para title (con las palabras en minúsculas separadas por guiones) al utilizar el comando rake. Por ejemplo, si hoy generásemos el artículo, su nombre sería 2017-08-05-test.md.

A continuación, modificaremos el mencionado fichero con nuestro editor de texto plano favorito (escribiendo tras la última línea que figure en el archivo). En mi caso, como estoy acostumbrado a utilizar el lenguaje de programación R, RStudio es una buena herramienta también para lidiar con archivos escritos en Markdown. No obstante, no tenemos por qué utilizar este complejo IDE si simplemente deseamos escribir texto en nuestros artículos. Buenos editores de texto plano alternativos son Notepad++, Sublime Text o Atom.

En todo momento podemos acceder localmente al artículo que acabamos de generar. Como todavía no hemos llevado a cabo ninguna modificación de la estructura de nuestro blog, nos aparecerá un enlace a dicho artículo tanto en la página principal del sitio web, como en el apartado Archive.

Nota (I): ahora mismo no recuerdo exactamente si rake está incluido por defecto en la instalación que llevamos a cabo durante el artículo anterior. En cualquier caso, si al utilizarlo recibes un mensaje de error, escribe gem install rake y prueba de nuevo a generar el artículo Test.

Nota (II): por el momento, recomiendo evitar utilizar tildes (y otros caracteres “extraños” a ojos del alfabeto inglés) a la hora de declarar el título de un artículo, para así no frustrarnos por la aparición de incomprensibles errores en la terminal.

Nota (III): si, por otro de esos casuales de la vida, es la primera que escuchas la palabra Markdown, te recomiendo eches un vistazo a esta guía para así hacerte una idea de cómo dar formato, de manera sencilla, a tus artículos.

Publicando el artículo

Una vez estemos satisfechos con el aspecto y contenido de nuestro flamante artículo, procederemos a publicarlo. Para ello, desde la terminal, escribiremos

git add .
git commit -m "Añade artículo"
git push origin master

De esta forma, además del acceso local que tenemos al artículo, cualquier persona podrá consultarlo en tu sitio web a través de su navegador.

No tengo claro todavía sobre qué tratará el siguiente artículo de la serie, aunque muy probablemente lo dedique a la instalación de temas para el sitio web. Por otro lado, no sería tampoco mala idea echar un vistazo al archivo de configuración de la propia página web. Tantos asuntos por tratar…

Nota: esta entrada se ha almacenado dentro del proyecto MetaBlog, quedando así disponible para su consulta también a través del siguiente enlace.

Comentar