I’ll just pretend my last post was last week and proceed as if nothing happened, I’ll also spare you the bad excuses why I didn’t stick to my self-proclamed new schedule.

This time a little post about how incredibly easy it is to actually add disqus to your default jekyll site with the minima theme.

  1. Create a disqus account at the disqus website
  2. Confirm your e-mail address
  3. create a _layout directory in the root of your jekyll site
  4. create and fill posts.html in your newly created directory
  5. add your disqus shortname to _config.yaml ( you can find your shortname on the disqus settings page)

That’s it!

posts.html is simply the same as in the gem, except with an added variable called comments in YAML Front Matter. I’m adding it below for easy copy / pasting.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
---
layout: default
comments: true
---
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">

  <header class="post-header">
    <h1 class="post-title" itemprop="name headline">{{ page.title | escape }}</h1>
    <p class="post-meta">
      <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
        {% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
        {{ page.date | date: date_format }}
      </time>
      {% if page.author %}
        • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>
      {% endif %}</p>
  </header>

  <div class="post-content" itemprop="articleBody">
    {{ content }}
  </div>

  {% if site.disqus.shortname %}
    {% include disqus_comments.html %}
  {% endif %}
</article>

A little trick I had to figure out to show the above block without actually rendering some jekyll logic as well is making use of the raw tag like this, put the highlight and raw tags on the same line, otherwise it won’t work.

1
2
3
4
  {% highlight %}{% raw %}
    <html>yourhtmlhere</html>
    <p> the '-' in the next two tags are there to not break the block <p>
  {% end-raw %}{% end-highlight %}