So, three posts in three days. So far I love Jekyll, it is easy to customize. To wit, here are a few examples of what you can tweak.

Pimping the front page

Thanks [Jekyll doc]

I put this in index.html at the root of the website, to have a list of posts and a quick summary with it. post.excerpt rules.

{% for post in site.posts %}
      <li>
        <span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
        <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
        <p>{{ post.excerpt | remove: '<p>' | remove: '</p>'}}</p>
      </li>
{% endfor %}

If your website isn’t auto-watched/auto-hooked etc, run

jekyll build

Profit!

Pimping the header

Thanks [Joshua Lande]

  • Create a new page called archive.md in the site’s directory
---
layout: page
title: Archive
permalink: /Archive/
---

## Blog Posts

{% for post in site.posts %}
  * {{ post.date | date_to_string }} &raquo; [ {{ post.title }} ]({{ post.url | prepend: site.baseurl }})
{% endfor %}
  • modify header.html with
<a class="page-link" href="{{ "/feed.xml" | prepend: site.baseurl }}">Feed</a>
  • If your website isn’t auto-watched/auto-hooked etc, run
 jekyll build
  • Profit !

Thanks [David Elbe]

  • Google how to add Next post, Previous post, to posts
  • Copy paste this snippet at the end of post.html
<div style="display:block; width:auto; overflow:hidden;">
 {% if page.previous.url %}
   <a style="display:block; float:left; width:50%; text-align:left;" href="{{page.previous.url | prepend: site.baseurl}}">« {{page.previous.title}}</a>
 {% else %}
<p style="display:block; float:left; width:50%;">First post</p>
{% endif %} 
 {% if page.next.url %}
  <a style="display:block; float:left; width:50%; text-align:right;" href="{{page.next.url | prepend: site.baseurl}}">{{page.next.title}} &raquo;</a>
 {% endif %}
</div>
  • If your website isn’t auto-watched/auto-hooked etc, run
 jekyll build
  • Profit !

Pimping statistics

Thanks [Joshua Lande]

One might wonder why I would want official confirmation that I’m the only one reading this website but hey

  • Suscribe to Google Analytics
  • Google will provide you with a snippet of code
  • Create a file in _include, named google_analytics.html and the code from google
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'XXXXXXXXXXX', 'auto');
  ga('send', 'pageview');
</script>
  • in _layouts/defaults.html, add
 {% include google_analytics.html %}
  • If your website isn’t auto-watched/auto-hooked etc, run
 jekyll build
  • Profit!

Pimping comments

Thanks [Steel]

What a blog without a comment section? Are you sure? why? Again since I’m the only one reading, it is useless, but again i refer you to this

  • Create _include/comments.html with the following code
<script src="https://apis.google.com/js/plusone.js"></script>
  <div class="g-comments"
      data-href="{{site.baseurl}}{{page.url}}"
      data-width="642"
      data-first_party_property="BLOGGER"
      data-view_type="FILTERED_POSTMOD">
  </div>
  • Include this in the post.html file in _layout
	{% include comments.html %}
  • If your website isn’t auto-watched/auto-hooked etc, run
 jekyll build
  • Profit!