Instalando en la web el tema Minimal Mistakes

4 minuto(s) de lectura

Uno de los proyectos que me ha tenido bastante entretenido este verano ha sido la reconstrucción, desde cero, de Infinitos Contrastes, utilizando para ello la versión más actual del tema Minimal Mistakes. En el fondo, sospecho que las arduas batallas contra la línea de comandos tienen un misterioso e inexplicable atractivo para mí.

En esta ocasión, me he animado a ir documentando la mayoría de los pasos seguidos para alcanzar el estado que la página presenta a día de hoy, omitiendo únicamente aquellos donde me limitaría, principalmente, a repetirme, pero empleando diferentes nombres o rutas de archivo. Es decir, si, por ejemplo, muestro cómo utilizar una plantilla de tipo splash para crear una sección en la web, no repito la explicación si después genero otro apartado distinto haciendo uso de dicha plantilla.

Antes de abordar el primer artículo de la serie, que va a centrarse en la propia instalación del tema, parece natural justificar, en cierta medida, el cambio adoptado. Así pues, ¿qué motivos me han llevado a escoger Minimal Mistakes para Infinitos Contrastes? En principio, si únicamente queremos utilizar Jekyll como plataforma para bloguear, el tema Hooligan cumple dicho cometido de manera más que suficiente. No obstante, si buscamos que nuestro sitio web albergue proyectos formados a partir de diferentes documentos, las limitaciones de Hooligan comienzan a adquirir dramáticos tintes significativos.

Además, solo hay que darse un pequeño paseo por la live demo de Minimal Mistakes, cuyo repositorio asociado en GitHub podemos encontrar siguiendo este enlace, para quedar simplemente asombrado por la enorme cantidad de posibilidades que este tema nos ofrece.

Así pues, pongámonos manos a la obra con el proceso de instalación, para el cual seguiremos los pasos que a continuación se indican:

  1. Empecemos acudiendo a la excelente guía de instalación, escrita por el propio autor del tema, que podemos encontrar haciendo clic en este enlace. Dependiendo de tu nivel de inglés, incluso no sería ya necesario que siguieses leyendo este artículo, puesto que no es más que una especie de adaptación a nuestro idioma de las indicaciones que allí se encuentran.
  2. Dado que nuestra intención es hospedar la página web a través de GitHub Pages, nos va a interesar echar un vistazo por encima al apartado denominado GitHub Pages Compatible Method.
  3. Empezaremos “forkeando” (sí, gerundio del inexistente verbo “forkear”, que sinceramente dudo sea aceptado por la RAE en un futuro próximo) el tema mediante el siguiente enlace a nuestra cuenta de GitHub.
  4. Ahora acudimos al apartado Settings y, en el primer cuadro de texto que aparece (Repository name), cambiaremos el nombre del repositorio por nombre_de_tu_cuenta.github.io. Por ejemplo, en mi caso quedaría ImAlexisSaez.github.io. Después haremos clic sobre el botón Rename. Pasados unos minutos, el sitio web debería estar disponible para su consulta, en mi caso a través la url https://imalexissaez.github.io/, presentando este simple aspecto: Aspecto inicial del sitio web tras la instalación del tema
  5. A continuación, clonamos el repositorio en nuestra unidad de disco duro, para trabajar así localmente con la web. Utilizando Git Bash tendríamos que escribir:
    git clone https://github.com/nombre_de_tu_cuenta/nombre_de_tu_cuenta.github.io.git
    

    Reemplazando nombre_de_tu_cuenta de manera adecuada (ImAlexisSaez en mi caso).

  6. Vamos a la raíz del directorio de la web y editamos, con Sublime Text 3 (o el editor de texto plano con el que estés acostumbrado a trabajar), el archivo Gemfile, sustituyendo su contenido de:
    source "https://rubygems.org"
    gemspec
    

    a

    source "https://rubygems.org"
    
    gem "github-pages", group: :jekyll_plugins
    
    group :jekyll_plugins do
      gem "jekyll-paginate"
      gem "jekyll-sitemap"
      gem "jekyll-gist"
      gem "jekyll-feed"
      gem "jemoji"
    end
    

    Guardamos acto seguido el archivo y, en Git Bash, dentro del directorio raíz del sitio web, tecleamos:

    bundle update
    
  7. Borramos ahora los siguientes archivos y carpetas, que nos resultan innecesarios de cara a generar nuestra página web:
    • .editorconfig
    • .gitattributes
    • .github
    • /docs
    • /test
    • CHANGELOG.md
    • minimal-mistakes-jekyll.gemspec
    • README.md
    • screenshot-layouts.png
    • screenshot.png
  8. Conviene que echemos un ligero un vistazo por encima a la documentación de la estructura del sitio web, para familiarizarnos con los distintos archivos y directorios.
  9. De cara a futuras actualizaciones del tema, tenemos que configurar el acceso al repositorio del autor del tema. Para ello, en Git Bash escribimos:
    git remote add upstream https://github.com/mmistakes/minimal-mistakes.git
    

    De manera que si tecleamos ahora:

    git remote -v
    

    Nos va a aparecer por pantalla algo similar a:

    origin  https://github.com/ImAlexisSaez/ImAlexisSaez.github.io.git (fetch)
    origin  https://github.com/ImAlexisSaez/ImAlexisSaez.github.io.git (push)
    upstream        https://github.com/mmistakes/minimal-mistakes.git (fetch)
    upstream        https://github.com/mmistakes/minimal-mistakes.git (push)
    

    con vuestra correspondiente cuenta de GitHub. De esta manera, para actualizar el tema simplemente tendremos que teclear:

    git pull upstream master
    

    Minimal Mistakes es un tema que se actualiza con bastante frecuencia, por lo que nunca está de más que vayamos visitando su repositorio oficial cada cierto tiempo, por si nos interesa hacernos con las últimas novedades que se incorporen.

En el siguiente artículo de la serie nos pondremos manos a la obra con la configuración de los aspectos básicos del sitio web, editando para ello el ya tan conocido archivo _config.yml. El contenido de este intimida sobremanera, más si hemos llevado a cabo la transición directamente desde el tema Hooligan, dada su enorme extensión. No obstante, iremos desgranando con paciencia cada uno de sus bloques a lo largo de esta serie de documentos.

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