Creating a Trove exhibition using GitHub

Hi all,

I found a method to create an exhibition using Trove lists on GitHub. It's called DIY Trove Exhibition.

It's really easy to make and install and in a few hours you'll have something up similar to the one I made which can be seen here.

These are the steps you need to take:

1. Go to Trove and Sign up for an account or if you have one, log in. Go to your "User Profile" and click on "For developers" tab. Now sign up for an API. You will need the API key later on.

2. Find some records on Trove and add them to Lists. You can create as many Lists as you like. Make note of the URLs for the Lists. For more information on Lists see here. Remember if you want to exhibit your List on the repository it needs to be set to public. To choose the thumbnail of each list go to Your Profile > Lists > Click List options > click edit list details > click Change list image and choose the thumbnail > click save changes.

2. Create a GitHub account, then go to DIY Trove Exhibition and press the "Fork" button at the top right hand corner 

3. Go to your account and view your repository you had just created, click on the tab "Settings"  Rename your repository to whatever you want to call it.

4. Now click on the tab "Code"

5. Underneath click on the file link index.html

6. Edit the file by clicking on the pencil icon on the top right. 

7. Go to

<h1 ng-hide="listHide" class="ng-hide" id="exhibition-name" class="page-header">Forecasters</h1>

Replace "Forecasters" with your exhibition name.

8. Go to

<h2 ng-hide="listHide" class="ng-hide" id="exhibition-tagline">An assortment of weather prophets</h2>

Replace "An assortment of weather prophets" by your tagline.

9. Go to
<div ng-hide="listHide" class="ng-hide" id="exhibition-description">
    <p>This site displays content from Trove. It is a demonstration of how resources collected using <a href="">Trove lists</a> can be reused through the <a href="">Trove API</a> to create new interfaces and applications.</p>

And replace the wording between <p> and </p> with any wording you choose, if you want to create a link you can too by using a a href= tag. See more about creating links in html.

10. You can also change the Exhibition Credit below be replacing the wordings between <small></small>

<div ng-hide="listHide" class="ng-hide" id="exhibition-credit">
    <p><small>This demonstration was created by <a href="">Tim Sherratt</a> (<a href="">@wragge</a>) to show how easy it is to create your own exhibition.</small></p>

11. Now go to where you see this


Underneath change the parts between the quotation marks after the href= to the link of each list you created in Trove. Replace the parts such as A day in the life of Mr Mares, weatherman to the description to what you want for each list. However, this is only a fallback, as the exhibition will grab the Title and description you had created for the List on Trove.

12. Now go to

var troveAPIKey = "";
Between the quotation marks enter the Trove API Key you created in Step 1.

13. To view your exhibition type the following in the URL.

 https://[your Github user name][your repository name]

14. To change the theme of your repository go to the "styles" folder in the repository. Rename the theme.css by clicking on the file and clicking on the pencil icon and changing the name at the top. I usually rename it to theme.cssOLD click Commit Changes at the bottom.

15. Now go to Bootstrap Live Customiser and download a new theme or go to Bootswatch  and download a theme by downloading bootstrap.css from your preferred theme. Remember to rename the file to theme.css

16. Go back to your repository under the "styles" folder upload the file by clicking "upload files" and then pressing Commit Changes.

17. Go back to  https://[your Github user name][your repository name]  and see if your exhibition looks okay.

18. You can also change to a customise domain if you have registered a domain name already. You will need to register a domain name if you haven't, GoDaddy is a popular one, (hint: make sure you look for coupons online first, it can save you quite a bit). You can then set up a DNS entry by adding a CNAME record if it is a subdomain and point it to

If it is a top level domain name, you will need to set up A records in the DNS and point your custom domain to the following IP addresses:

19. I personally used a different method to set up a custom subdomain, I just downloaded the zip file by clicking on the green "Clone or download" button on the right hand corner of the screen, created a subdomain on my registered domain, go to file explorer on the cPanel, upload the zip file into the folder of the subdomain, and extract it into the folder. This is the result To get a free SSL Certificate and have the https prefix, I used a free service on Cloudflare. Tip: See HOW TO GET FREE SSL CERTIFICATE FOR YOUR WEBSITE for more information on how to do this.

Another tip: To generate a favicon and other icons, I used Favicon Generator and edited my index.html file.

Hope this has been handy, enjoy creating your own exhibitions!

Popular posts from this blog

How to make a chalkboard graphic for free

Search widgets

Make your own online library easily for free!