Getting Started

A few weeks ago, I met someone at a Girl Develop It meetup who had recently relocated to the States from South America. She mentioned how great is was to see a thriving community of women in tech, but wished there was more Latinas to share their stories with the Spanish speaking community.

After that chat, I was inspired to start writing about my own experiences, in both English and Spanish, but was not quite sure what the best approach for a bilingual blog was. After some research I came across articles about the healthcare.gov website. The developers commissioned with creating this site used Jekyll, a simple, static site generator without a relational database. I was skeptical at first, but its ease and great documentation really made using Jekyll a no brainer. As a single language blog, Jekyll is pretty much ready to go once you install the gem and run it, but making the blog bilingual took a bit more work.

Before going any further, I want to point out that this, and any other posts about the creation of this blog, does not go over the general concepts or Jekyll verbiage. Besides going through the documentation, I found the videos on Team Treehouse’s Jekyll track to be very helpful with general concepts.

I wanted the users to be able to navigate to a post’s language counterpart from wherever they were on the site, so I had to create a relationship between all the posts. This is where Jekyll’s Front Matter functionality became especially handy.

First thing was to utilize the _posts folder to house both English and Spanish pages and posts. I created an “en” and “es” folder and each of those housed a pages, posts, and projects folder.

_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

In addition to the more commonly used front matter, like “type”, “layout”, “title”, “date”, I added the two additional variables that would create the relationship: “name” and “lang”. Each post and page has an identical identifying “name” in the other language, so users can easily alternate between the two languages.

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

Then in _layouts/default, I added the following hreflang tag to alternate between the languages when promted.

1
2
3
4
5
6
7
  {% assign posts=site.posts %}
    {% for post in posts %}
      {% if post.lang != page.lang %}
        <link rel="alternate" hreflang="{{ post.lang }}" href="{{ post.url }}" />
      {% endif %}
    {% endfor %}
 

These three steps were vital to making the site work as intended. The next post will explain how to create dynamic navigation with the ability to alternate between both languages.