ivetteaddington.com
View Online | View Source Code
I’m a newbie when it comes to coding, but I wanted to be able to show the projects I’ve been working on, documenting my progress and writing about the challenges I’ve tackled to get the code to work. As a newbie, I realize how important to not only show personal progress and clearly communicate the process, but also have a portfolio for potential employers or clients.
About this Blog
From the start, I knew I wanted this blog to be bilingual. I’m fluent in both English and Spanish, and wanted a platform where I can write in both languages with a seamless transition from one language to another. My first thought was to create the blog using rails and using a database to create the relationship between the two languages, but after some research on multilingual site, I came across Jekyll. Jekyll had a lot of pros on its side for blog hosting, for example: rich documentation, no need to create a database and free hosting on github pages. But, after playing around with it for a while, I realized I could customize Jekyll’s front matter to accomplish the transition between the two languages I was hoping to accomplish.
Challenges
Note: I go into a bit more detail and some code on some of these challenges in the blog posts, links will be at the bottom of this post.
Although Jekyll is very user friendly, making the blog bilingual had a few challenges. The first was creating the site structure for both English and Spanish posts, pages and templates. Jekyll comes with some core functionality that it needs in order to run. For example, the _post folder needs to house all blog posts, since it knows to look in there for content. I knew that I wanted to keep the structure as clean as possible and although I could just use front matter to determine what language the content was written in, keeping the orderly was also important. After some trial and error, separating all the content, including blog post, projects and templates according to language made it easy to navigate.
The second was creating one default template that would read the page’s data to determine the language and give the option of transitioning to its language counterpart. To accomplish this I created a ‘lang’ variable inside the front matter, the default template would then capture that information and adjust the site, functionality and information accordingly. Although there are a few ways to create the transition between the two sites, using liquid logic (with ruby’s if/else inspiration) I was able to create just one template for both languages.
The third major hurdle was the dynamic navigation. I didn’t want the navigation to show all the options in English and Spanish, rather, to appear according to the language the site was on, with the ability to transition to the other language. Most of the information I found on navigation was to hard code within the default template, but this really did not make sense for a bilingual blog, so within the _data folder, I created a navigation.yml file that allowed me to edit the navigation accordingly.
Final Thoughts
I knew from the beginning this project would be a bit challenging. First, because I had never used liquid (or for that matter even heard of it) and secondly because there was a lot of information on creating a site using the Jekyll gem, but there was a limited amount of information on making it bilingual. Being able to customize code is an important part of developing, so I’m thrilled read through ways of using the gem and accommodating the logic to my vision.
This project also taught me the importance of breaking down the work. At times, projects seem overwhelming, but taking the time to break down the tasks is such an important part of programming. I used a Trello board for this project. In my case Trello served multiple functions- for starters, it gave me a clear path of the steps I need to take to accomplish this blog. Second, in encouraged me to think about breaking the steps into smaller tasks and work on a specific functionality one by one. Third, it serves as visual inspiration- being able to watch one task go from the “to do” list to “done” helped see daily progress and made the project less daunting.