Empezando Este Blog

Hace unas semanas me encontré con alguien en un meetup tecnología que se había trasladado recientemente a los Estados Unidos de Sur America. Ella mencionó cuán grande era ver una próspera comunidad de mujeres en tecnología, pero desearía ver mas latinas compartiendo su historia a la comunidad hispana.

Después de esa charla, me inspiré a finalmente escribir un blog sobre mis propias experiencias, en Inglés y Español. Tratando de buscar informacion acerca de come crear un blog bilingüe, me encontré con artículos sobre la creacion de la nueva healthcare.gov sitio web. Los desarrolladores encargados de crear este sitio utilizaron Jekyll, un generador de sitio simple, estático sin una base de datos relacional. Al principio, era un poco escéptica, pero su facilidad y gran documentación realmente hice usando jekyll una obviedad. Como un blog de un solo lenguaje, Jekyll esta casi listo para ir tan pronto la joya está instalada y corrida, pero haciendo el blog multilingüe tomó un poco más trabajo.

Antes de seguir adelante, quiero señalar que este, y cualesquier otra entrada acerca de la creación de este blog, no cubre conceptos generales o verborrea de Jekyll. Además de repasar la documentación en su pagina, los videos acerca de Jekyll en el sitio Team Treehouse fue un gran ayuda. Los videos estan en inglés, pero este tutorial en español de HostDime blog revisa los conceptos generales y como empazer un blog usando la joya de Jekyll.

Quería que los usuarios puedan navegar de languge a languge de dondequiera que estuvieran en el sitio, así que tuve que crear una relación entre todos los puestos. Aquí es donde el Front Matter de Jekyll convirtió especically práctico.

Para empezar, tuve que crear capretas para los dos lenguges: “en” y “es” adentro de la carpeta _posts. Adentro de esas caprets tuve que crear tres mas: “pages”, “posts”, y “projects” para aguantar las paginas y entradas en Inglés y Español.

_posts
   ├── en
   │   ├── pages
   │   │   ├── 0001-01-01-about.md
   │   │   ├── 0001-01-02-index.md
   │   │   └── 0001-01-03-projects.md
   │   ├── posts
   │   │   └── 0001-01-01-post1.md
   │   └── projects
   │       ├── 0001-01-01-project1.md
   │       └── 0001-01-02-project2.md
   └── es
       ├── pages
       │   ├── 0001-01-01-acerca-de.md
       │   ├── 0001-01-02-entradas.md
       │   └── 0001-01-03-proyectos.md
       ├── posts
       │   └── 0001-01-01-entrada1.md
       └── projects
           ├── 0001-01-01-proyecto1.md
           └── 0001-01-02-proyecto2.md

Además de los usos mas comunos de Front Matter, como “type” (tipo), “layout” (diseño), “title” (título), “date” (fecha) he añadido dos variables adicionales que crearían la relación entre los dos: “name” (nombre) y “lang” (lenguge). Cada puesto y página tiene una identificación identica de “name” en el otro idioma, por lo que usuarios pueden alternar fácilmente entre los dos idiomas.

English post/page:
---
name: post1
lang: en
---
Spanish post/page:
---
name: post1
lang: es

Despues en _layouts/default, añadí el sigiente hreflang tag para alternar entre los idiomas cuando incitado.

  {% assign posts=site.posts %}
    {% for post in posts %}
      {% if post.lang != page.lang %}
        <link rel="alternate" hreflang="{{ post.lang }}" href="{{ post.url }}" />
      {% endif %}
    {% endfor %}
 

Estos tres pasos son vitales para que de sitio trabaje a propósito. La siguiente entrada explicará cómo crear navegación dinámica con la capacidad de alternar entre los dos idiomas.