A book group website built with Jekyll
HTML CSS Ruby
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
_includes
_layouts
_plugins
assets/images
public
.gitignore
2001.html
2002.html
2003.html
2004.html
2005.html
2006.html
2007.html
2008.html
2009.html
2010.html
2011.html
2012.html
2013.html
2014.html
2015.html
2016.html
2017.html
404.html
LICENSE.md
README.md
_config.yml
_config_prod.yml
about.md
atom.xml
complete.html
index.html
sitemap.xml
years.html

README.md

ORT - A book group website

Version 1.0

Author: Scott Wilson http://www.thatsoftwareguy.com

Overview

For many years, I have been building a static website by hand for my book group. The Amazon Affiliate program allows you to easily build the HTML that produces the link and provides the image of the book. However, this technique was not without problems. Finally, in late 2016, I discovered that link rot had affected some of the links created a few years ago (they no longer worked due to changes by Amazon), so I realized I had to take a different approach.

I knew the best solution would be to use an API to generate the links under the control of a static site generator, but I wasn't aware of any SDK toolsets that facilitated the use of the Product Advertising API. Since I had very carefully not searched for any such utilities, this lack of awareness was mostly cluelessness on my part. :(

I initially wanted to use Hugo, but I stumbled upon a gem that took care of the Amazon Affiliate lookups, so I realized that Ruby was the way to go. So here are the tools I chose:

  • Jekyll - A static site generator
  • Hyde - A fork of the Hyde template which is compatible with Jekyll 3.x
  • jekyll-amazon - A gem that converts Jekyll tags into Amazon affiliate links with associated images and data.

Usage

Your first step is to get an Amazon Affiliates account. Once you have done this, you will need to create an AWS Account associated with your affiliates account to use the Product Advertising API. The steps for this are shown in the documentation.

Next, install Jekyll and find a template you like. I used Hyde because it had sidebar navigation, which is useful if you have a lot of content pages, but there are many choices. Try setting up some pages and adding some content to get a feel for using Jekyll.

Then do a gem install jekyll-amazon to get the Jekyll tag generator. See the documentation on that gem for the environment variables you need to set in order to use the API.

Once you have the tools installed and working, it's just a matter of building pages in Markdown or HTML that contain links to your selections, i.e.

{% amazon <ASIN> detail %}

(Note that I used the tag short_detail because I wanted less information, with a different layout.)

Pages with layout set to page will appear in the navbar. I limited the number of pages shown in the navbar to make the site easier to use on mobile, but you can change this by updating _includes/sidebar.html and setting MAX_NAV_PAGES to some large value.

To build the site during development, use the command

$ jekyll build

which will put the output in the _site directory.

To build for production, use the command

$ jekyll build --config=_config_prod.yml

which will build the output in the directory specified in the destination variable in _config_prod.yml.

The build also produces a sitemap.xml file, which may be used with Google Webmaster tools.

Author

Scott Wilson

License

Open sourced under the MIT license.

History

Here's the Amazon Affiliate link for The Ruby Programming Language, produced by the Amazon Affiliate product search tool in January 2017.

<a target="_blank"  href="https://www.amazon.com/gp/product/0596516177/ref=
as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0596516177
&linkCode=as2&tag=thatsoftwareg-20&
linkId=7dd3b7d895b70055f8c1aa8213403a63">
<img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8
&MarketPlace=US&ASIN=0596516177&ServiceVersion=20070822
&ID=AsinImage&WS=1&Format=_SL250_&tag=thatsoftwareg-20" ></a>
<img src="//ir-na.amazon-adsystem.com/e/ir?t=thatsoftwareg-20&l=am2
&o=1&a=0596516177" width="1" height="1" border="0" alt=""
style="border:none !important; margin:0px !important;" />

There are several reasons why this is not valid XHTML:

  • The & character should be coded as &amp;
  • There is no alt tag for the image
  • The first img tag is not closed

But there's a bigger danger: the path for the image used in this link is subject to change by Amazon. Here's an Affiliate link from 2013 that worked for several years, but then just stopped working. (The issues noted above have been fixed in this code block.)

<a href="http://www.amazon.com/gp/product/B0052HKL4G/ref=as_li_tf_il?ie=UTF8
&amp;tag=thatsoftwareg-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325
&amp;creativeASIN=B0052HKL4G">
<img border="0" src="http://ws.assoc-amazon.com/widgets/q?_encoding=UTF8
&amp;Format=_SL160_&amp;ASIN=B0052HKL4G&amp;MarketPlace=US&amp;ID=AsinImage
&amp;WS=1&amp;tag=thatsoftwareg-20&amp;ServiceVersion=20070822" alt="" /></a>
<img src="http://www.assoc-amazon.com/e/ir?t=thatsoftwareg-20&amp;l=as2
&amp;o=1&amp;a=B0052HKL4G" width="1" height="1" border="0" style="border:none 
!important; margin:0px !important;" alt="Nemesis" />

API-generated links will get the most current image paths from Amazon, and are thus safer.