Why you should learn Jekyll today

Friday 4 October 2013

TL;DR - Jekyll is great for Portfolios and Landing pages. And Faggy Dux just rocks electro-funks.

Jekyll As a web software engineer, I sometimes get requests from Friends and Family to help them build a webpage. Usually, they can be translated to landing page to test a new idea, or portfolio to showcase their work. My goal is to be the most efficient possible when saying yes to these requests, in other words I need to minimize the time spent to build and maintain those projects. This post will explain how to leverage Jekyll to build a one-page portfolio.

Idea and Specification

My brother is a music producer student. In the last two years, he worked on different projects. Next year, School will be over, so basically he will need to find clients to work for, as a freelance. Thus he must let the world know of his talent, and one good mean is to provide a web portfolio.

So after some brainstorming we decided to go for a one page website showcasing videos and tracks, and came up with this basic mockup:


As you can see in the mockup, nothing fancy here. For the sake of maintainability, I want my brother to add more videos and tracks without me knowing. One idea which comes to mind is to use a CMS and a database to store those videos and tracks. Why don't I setup a Wordpress and go from there?

I felt like Wordpress is too big for the requirement. After all, it's just a one-page can which can be built with HTML in a couple of hours. But the one big HTML file would not be really easy to handle for my non-technical brother. He might fear to break something while editing this huge chunk of code.

Here comes Jekyll. Jekyll is great to generate static blog-aware websites. Let's ditch the blog part for now, all we need is two models, videos and sounds, and let Jekyll know about them. Fortunately, Jekyll has categories, which allow you to tag information. Let's name them video and remix.

Now we can simply implement a for loop to display all videos, and all remixes.

{% for video in site.categories.videos %}
  <!-- Display the video -->
{% endfor %}

{% for remix in site.categories.remix %}
  <!-- Display the remix -->
{% endfor %}

One more requirement is to display both Vimeo and Youtube videos. Leveraging Jekyll posts metadata, let's introduce two post variables, youtube_id and vimeo_id, and render different HTML blocks based on what the post contains.

{% if video.youtube_id %}
  <iframe src="//www.youtube.com/embed/{{ video.youtube_id }}"
          frameborder="0" allowfullscreen></iframe>
{% else %}
  {% if video.vimeo_id %}
    <iframe src="//player.vimeo.com/video/{{ video.vimeo_id }}"
            frameborder="0" allowfullscreen></iframe>
  {% endif %}
{% endif %}

Then my brother just has to create a new file in _posts to add a new video, like this:

categories: video
youtube_id: 0QsmwNNp2_k
name: Audi Talents Awards - Symbiosis

Our vision of the first corporate video from the Audi Talent Awards 2013.
Our purposal wasn't selected, despite of hard work and many efforts.
But we plan to go further for the next edition!

Dead easy, right? You can view the full source code for including remixes and videos on Github.


You may argue that this is still a bit more complicated than giving access to a Wordpress back-office, and you may be right. Creating a new file in _posts (following the date name convention) may be harder than clicking on "New post", testing locally with start_jekyll.sh more mysterious than hitting "Preview". And using a text-editor instead of a web form to create content might be reserved to hackers.

Those points are valid, and Jekyll may not be suited for everybody in its raw form. That's why people try to make it more user-friendly, like Prose.io (Read this) or Spinto. I really like the power of Markdown and static websites. It feels like the right amount of technology for delivering portfolio and landing pages.


Curious about the result of this little project? Check out Faggy Dux and follow @faggydux, especially if you're into Electro-Funk music! It is hosted on Github Pages, and my brother uses Github for Mac instead of git push. He really likes this workflow. There is no command line involved, he just opens Sublime Text, make changes, create new posts, and deploy with hitting the Sync button of Github for Mac. Dead easy. No FTP, no database. He could even directly use Github as a web based editor, so Sublime isn't event required.


Next time you come up with an idea, try it out with a landing page. You can use LaunchRock, Unbounce or setup your own with Jekyll (you'll have more control on the code). For the latter, you can fork quartzmo/email-land-page to start from a solid base, and deploy it to Github Pages or Heroku.

Happy hacking!

Would you like to learn programming? I am CTO of Le Wagon, a 9-week full-stack web development bootcamp for entrepreneurs, and would be happy to have you on board!

comments powered by Disqus