Working With Jekyll

Working With Jekyll

Github User Page implemented using Jekyll, a static-site generator. Dec 14, 2014


I’m still learning how to use Jekyll, a static-site generator, used with Github Pages. It’s basically a ruby gem, which is a library of ruby code, that compiles a directory of various file formats, primarily Markdown, into html pages.

Jekyll is a simple, blog-aware, static site generator. It takes a template directory containing raw text files in various formats, runs it through Markdown (or Textile) and Liquid converters, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server. Jekyll also happens to be the engine behind GitHub Pages, which means you can use Jekyll to host your project’s page, blog, or website from GitHub’s servers for free.

Source Jekyllrb.com

It has been a bit of a struggle for me to get the hang of Jekyll. I hope to learn more about how to use it to generate my User Github Page.

I just learned that I had to use Liquid template tags to get code highlighting.

Liquid is an extraction from the e-commerce system Shopify

Ruby

def what?
  42
end

CSharp (C#)

public class Greeting 
{
    private string _greeting = "Hello World.";

    public Greeting()
    {

    }

    public string Greeting { get { return _greeting; } }
}

Example Liquid snippet:

{% raw %} {% highlight php %} // your code here echo “Hello”; {% endhighlight %} {% endraw %}

To display Liquid tags I had to use:

{% raw %} { % raw % } { % endraw % } // but without the space between { and % as shown above {% endraw %}

I also learned that you can specify line numbers by using linenos or linenos=table:

{% raw %} {% highlight ruby linenos %} def what? 42 end {% endhighlight %} {% endraw %}

However, due to problems with the mark-up generated, a better solution would be to create the line numbers using css instead.

Styling HTML Output

Basics In order to specify additional attributes to output in the html on the element, you start it with:

{: }

To specify a class it is

{:.MyClass}

To specify a title attribute it is

{:title="My Title"}

References:

  1. Github Pages
  2. What is a gem?
  3. Jekyllrb.com
  4. Markdown
  5. Liquid
  6. Escape Liquid template tags in Jekyll posts
  7. Shopify
  8. CSS Line Nos
  9. Build A Blog With Jekyll And GitHub Pages
PlaceholderThumbnail