Setting up book collection page using Jekyll, including Twitter share links!

23 Nov 2019

My site currently runs on Github Pages. It's a static site, but I'm seeing how far I can push it, and make it a truly awesome site that no one will realise is actually static.

My current aim, is to create a page which lists a bunch of books that I have read and have provided an overview, raw notes and tips for. This post assumes that you already know how to use Jekyll.

Collections

In Jekyll, you can create individual posts and pages. Collections are for things that don't fall into those categories, like books and recipies etc.

Gah, I have a bit of a headache going on so will just capture the code for now and write a proper tutorial once I've finished the book page.

_config.yml


collections:
  books:
    output: true
    permalink: /books/:path

_books/the-pragmatic-programmer.html


---
title: The Pragmatic Programmer
authors: David Thomas and Andrew Hunt
quote: '"Kaizen" is a Japanese term that captures the concept of continuously making many small improvements.'
img_url: /assets/img/book-covers/the-pragmatic-programmer.jpg
share_link:
category: Tech
---

<article class="overview">
  <h1>Overview</h1>
  <p>My favourite book on programming! Filled with actionable advice for levelling up your career as a developer.</p>
</article>

<article class="tips">Tips</article>
<article class="raw-notes">Raw Notes</article>

books.html


---
layout: default
title: Books
permalink: /books/
---

  <article class="book_card">
    <h1>The Pragmatic Programmer</h1>
    <p>David Thomas and Andrew Hunt</p>
    <blockquote>"Kaizen" is a Japanese term that captures the concept of continuously making many small improvements.</blockquote>
    <img src="/assets/img/book-covers/the-pragmatic-programmer.jpg" alt="The Pragmatic Programmer book cover">
    <a href="https://twitter.com/intent/tweet?text=[What is your favourite takeaway from The Pragmatic Programmer]&url=https://becca9941.github.io/books/prag-prog&via=becca9941&related=becca9941" rel="nofollow" target="_blank" title="Share on Twitter">Share</a>
    <a href="/books/prag-prog">read more</a>
  </article>

  <article class="book_card">
    <h1>The Pragmatic Programmer</h1>
    <p>David Thomas and Andrew Hunt</p>
    <blockquote>"Kaizen" is a Japanese term that captures the concept of continuously making many small improvements.</blockquote>
    <img src="/assets/img/book-covers/the-pragmatic-programmer.jpg" alt="The Pragmatic Programmer book cover">
    <a href="https://twitter.com/intent/tweet?text=[What is your favourite takeaway from The Pragmatic Programmer]&url=https://becca9941.github.io/books/the-pragmatic-programmer&via=becca9941&related=becca9941" rel="nofollow" target="_blank" title="Share on Twitter">Share</a>
    <a href="/books/the-pragmatic-programmer">read more</a>
  </article>