Turning a Zotero bibliography into an online, browsable catalog

You can turn any collection of books and articles from Zotero into a website that is easy to search, accessible to anyone, and customize it the way you like. This approach also works if you are using Mendeley or Papers, or any other program that supports export to CSL-JSON, which stands for Citation Style Language JSON (and JSON is an acronym for JavaScript Object Notation, more on that later). It is a great way to reuse the work you did on your bibliography for the benefit of others!

What you will need is the following:

• Zotero (installed as a plugin for your browser or stand-alone)
• Plenty time for adding entries (Zotero permits all kinds of automatic inclusions, but for the humanities this mostly results in corrupt entries).
• A free account on Github.
• Some knowledge of Javascript and CSS is useful _{^{but isn’t this a great reason to learn it?}}
• A code editor like Visual Studio Code. Trust me, it’s easy enough to learn to use and you will get plenty of use out of it.
• A good look at my chapter “From A Dusty Backroom to the World Wide Web” and the accompanying repository.

What you will get is a fully functional website that makes browsing your bibliography a treat. It has a search bar that disregards capitalization and transliteration (optimized for Islamic Studies) and a sorting function by title, author and year. It even has a multi-lingual interface that you can easily build out to include more than English and German.

You can pop open entries to see more information:

Of course, all the styling such as layout, fonts, and colors can be changed. This will require some work on your part to edit the accompanying CSS-file, but information is widely available. Searching for “font style css” will yield results like this and this, that quickly get you up to speed to understand what you need to change to get the desired result.

How to get there? It starts with exporting your entries from Zotero.

Then select CSL-JSON.

This will save a file on your computer with the extension .json. You can use a code editor to open it. You will notice a very particular structure in the file, one that enables both human readability and machine readability. Here is what it looks like in Visual Studio Code (using a dark color scheme for those late night coding seshs):

See how some thing are in different colors? Whatever is in blue are words that describe a key characteristic of a book. Whatever is in red is the specific value for that one book. They are called key-value pairs. Notice the indentations based on the brackets? A full entry is enclosed by curly brackets, separated by a comma. This makes it very easy for a computer to sort things out.

In this case you don’t need to do much. Let’s first head to Github. You need this entire folder. You need to get it on your own GitHub account. The easiest is to click ‘Fork’ at the top right. This way you immediately have a full copy in your own account to adjust. You could also get it by clicking the green Code button on the master page, or through this website, or by opening the terminal and entering:

curl -LJO URL-of-specific-file

You will have to adapt the files textsGeyerCatalog.json.js and textsInterface.json.js. Either do so in the browser or install Github Desktop to get the files onto your computer synced with those on Github. Obviously, you will need to fill the first with your own catalog data, and change the different parts in the second one with appropriate texts that will fill the interface. You will also want to swap out GeyerExLibris1 and 2 with images that are appropriate for your own purposes.

Now you will need to set your Github repository to enable GitHub Pages. You can find documentation on how to do this: very easy.

Once you have done that, anyone will be able to explore your bibliography as a website!

You can find more information about this here.