Amateur coder daunted by Jekyll


#1

Okay, so I happened upon Jekyll by pure coincidence. Before I get started let me reiterate that “amateur coder” may be an overestimation of my skill.

I have a few static sites, but have no idea what seemingly simple, integral code like this

{{ page.title }}{% if site.title %} - {{ site.title }}{% endif %}

does.

I have found several tutorials, but even the most simple ones (Jekyll for Dummies) seem to be a bit over my head.

I am extremely interested and willing to learn to use Jekyll, but I even needed help from HackHands in order to install the gem.

I am a bit discouraged, and have begun to consider WordPress or Blogger as an alternative, but I don’t really want to pay for hosting or premium themes.

If anyone has any interest in helping or pointing me in the right direction, I would be extremely grateful.

Many thanks.


#2

there are lots of videos on youtube - there are last 2 different playlists that go into lots of detail.

It can be a little daunting at first, but it is pretty logical. Getting Jekyll to run on your computer can be a giant PITA but if you have gotten past that then I would keep going.

Your code example is fairly simple ((page.title}} is pulling in the page variable for, well, title - this would be in the front matter at the top of each page where there are 2 sets of 3 dashes:

---
title: Cool widgets
---

{% if site.title %} - {{site.title)) {% endif %} is saying, if there is a title set in the site config, then also add that with a dash in front of it after the page title. Most likely this is for the title in the head of the html, and would do something like:

Cool widgets - Widget Co

Assuming in the config.yml file (site variables) there was title: Widget Co and then in the front matter of that particular page there was title: Cool widgets.

{% %} vs {{}} is an important thing to understand, not sure I can explain it properly - the ones with % are usually if statements or loops, the ones with {{}} are for actual variable values.

Try this series by Thomas Bradley:


#3

Thank you so much for your thoughtful response. I will check out the tutorial you linked.

Unfortunately, I included the example code merely to demonstrate how little I understand about all of the parameters that go into using Jekyll. I have never used templates, and honestly don’t even know what programming language said example code is in. I appreciate your explanation, as going forward I will be informed when I encounter these commands.

I found another tutorial that suggested forking someone else’s Jekyll oriented repository, but I would prefer to be able to build the site on my own. I have a meagre static site already set up. Is it possible to integrate Jekyll into an existing site, or should I start from scratch?


#4

Hmm… if you like to get your hands dirty (code), if you go to Wordpress you’ll endup trying to learn some PHP at some point… why not learn something that will help you improve your static workflow?

While Wordpress makes use PHP templates, Jekyll uses the Liquid template language. As @rdyar has pointed out, it can be as straight as {{ page.title }} being used get the… page title. If you really wanna create your themes, you’ll at some point learn something about loops (“for all pages under the category X do Y”) and things like that, but again, you’ll stumble on the same kind of stuff while dealing with PHP (and database etc…).

Two things that helped me a lot:

Jekyll has a great documentation, make use of it o/

Once you understand the basic structure and the difference between themes and templates, take a look at stable projects (even better, edit and make use of). I really like how clean and simple the original Minima theme is, and I am huge fun of @chrisanthropic’s themes. But there a bunch of great projects out there, I’ve mentioned only these because they were the themes that helped me to get started. (:


#5

Almost none of the more complex things in jekyll are required, you do not have to use any variables or loops or ifs, those just add more functionality.Your example was pretty good and used the two main pieces of liquid that will be helpful to you.

If you already have a static site, you can probably just drop in a _config.yml file (might even be able to have it be blank) and see if jekyll will build it - which won’t really do anything other than move all the static files into the _site folder. Then you can add front matter to your existing files and start separating out the head of each file into an include (since the head is usually repetitive info) and use templates to put everything back together. I think a _config.yml file is the only requirement to use jekyll. You can add the _layouts and _includes folders (as well as others) as you need them. There is no need to run jekyll new, there is no magic to it other than it creates a mock site and the files that go with it.

One thing I personally don’t like about the current Jekyll is that if you just do jekyll new you get a new site with a gem based theme that is sort of hidden from you so you don’t get to see the templates - they are hidden in a gem. To me this makes it pretty hard for a beginner to see what the code is doing and appears to be more magical than it really is. This is where forking an existing simple site that doesn’t use a gem based theme would be a great idea.


#6

When learning to develop Jekyll Sites from scratch, you’ll need to have a certain skill set at your command.

  • Use and interpret command-line-interfaces
  • Experience with installing Ruby and Rubygems (packages of Ruby code)
  • Be familiar with the templating language: Liquid
  • Basic HTML/CSS/Sass/JS

Additionally, Jekyll’s official Documentation has got your back covered. Refer them to help you overcome basic issues.


Integrating Jekyll into an existing site

Like the comment above stated, all Jekyll really needs is a simple _config.yml to exist at the root of the project directory. Just make sure that the config file contains key/value pairs like title: My Blog, or, gems: ["jekyll-feed", jekyll-sitemap"]

To fully convert an existing site to a Jekyll Site, you’ll have to understand how Jekyll Directory Structure works alongwith the config file, various template files and Front Matter Data.
Refer the official docs to get a clear picture of these aspects.
Referring existing Jekyll Sites will give you additional insights on how things work.

The learning curve is a bit steep but easily scalable in comparison to learning a whole new language like PHP to create sites with Wordpress.