If you are using the basic Jekyll theme posts can be found in your _posts directory. You can edit existing blog posts for the site to see how your changes take affect. Additionally creating a new blog post is as easy as adding a new markdown file within the _posts directory.

Protip!

Using the YAML front matter you can set a published state for your posts by setting published: false as a parameter within the front matter.

You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server. jekyll serve also watches & auto-regenerates your site when a file is updated.

To add new posts, simply add a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and include the necessary front matter.

Jekyll & Inline Code Blocks: Syntax Highlighting

Jekyll also offers powerful support for inline code blocks & syntax highlighting:

Example Code Blocks:

The opening liquid statement {% highlight ruby %} followed by {% endhighlight %} will wrap code in a block and highlight based on the ruby syntax. Replace the ruby language name with your preferred language to highlight other languages as well.

Protip!

Liquid tags get processed by the rendering engine before compiling your static pages. In order to write inline liquid you need to wrap your statements in a code block and raw tag as follows.

<code>{% raw %} …liquid tag goes here… {% endraw %}</code>

Extra Protip!

In order to write the code and raw tags above the leading less than character needs to be written as an html entity.

Additionally the returns you would write in well written HTML need to be removed. The pre & code tags are processed as html but leave extra whitespace resulting in code blocks with extra height.

<pre><code>&lt;code>&#123;% raw %} …liquid tag goes here… &#123;% endraw %}&lt;/code></code></pre>

Extra Extra Protip!

As much as writing the above code repeatedly in your “clean” blog post… Markdown has a solution for this. Wrap the code you want to display in tick marks `like this`

`{% raw %}{% highlight ruby %}{% endraw %}`

Will Output

{% highlight ruby %}

Extra Extra Extra Protip!

At this point this is starting to feel like inception, the above code block tick mark exmple is written like this.

<pre><code>`&#123;% raw %}&#123;% highlight ruby %}&#123;% endraw %}`</code></pre>

Tricky Ticks

The following series of double backtick’s & single backticks function similar to double/single quote marks in HTML or javascript. Caveat being that the double ticks need to be place as the wrapping ticks.

``<pre><code>`&#123;% raw %}&#123;% highlight ruby %}&#123;% endraw %}`</code></pre>``

Languages Jekyll Syntax Highlighting Supports:

Jekyll supports syntax highlighting for over 100 languages thanks to Pygments

Example Ruby

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

Example HTML

<div class="post">
  <h1>Heading One</h1>
  <blockquote>I am a blockquote</blockquote>
  <p>Paragraph text</p>
</div>

Example SCSS

  .body{
    background: honeydew;
    color: #333;
  }
  .post-content {
    margin-bottom: $spacing-unit;
  h2 {
    font-size: 32px;
    @include mqmax($large) {
        font-size: 28px;
    }
  }
  h3 {
    font-size: 26px;
    @include mqmax($large) {
        font-size: 22px;
    }
  }
  h4 {
    font-size: 20px;
    @include mqmax($large) {
        font-size: 18px;
    }
  }
}

Example Javascript

var displayComments = true;
function doStuff() {
  if ( displayComments === true ) {
    // do stuff…
  } else {
    // do nothing…
  }
}
dostuff();

Linking Images to Jekyll Templates & Using Them in Markdown

Images in Templates

Using images in Jekyll templates is pretty straight forward, either place them via a liquid variable or straight away as a url inside an HTML img tag

<img src="/assets/unsplash_vadim_sherbakov_26_9.jpg" />
<img src="{{ page.leadImage }}" />

Here my index file contains an if statement to check the page for a leadImage that is defined and will conditionally display the markup.

{% if page.leadImage %}
  <div class="leadImage">
    <img src="/assets/unsplash_vadim_sherbakov_26_9.jpg" />
  </div>
{% endif %}

Images in Markdown

Using images in markdown files is about as easy as it can get. While the image tag styles above will work this isn’t true markdown. At it’s simplest form use the direct url or as a liquid variable

![](/assets/unsplash_vadim_sherbakov_26_9.jpg)

![]({{ page.leadImage }})

Syntax says we need to use HTML alt attributes. The final output looks like this.

![alt text](/assets/unsplash_vadim_sherbakov_26_9.jpg)

![alt text]({{ page.leadImage }})

Add title text by wrapping title in quotes prior to closing the URL parenthesis

![alt text](/assets/unsplash_vadim_sherbakov_26_9.jpg "title text")

![alt text]({{ page.leadImage }} "title text")

That’s initially about it…

Basic Jekyll docs, repo & help repo below

Check out the Jekyll docs for more info on how to get the most out of Jekyll. Bugs & feature requests can be filed at Jekyll’s GitHub repo. If you have questions, you can ask them below in the comments or officially on Jekyll’s dedicated Help repository.