Skip to Main Content

Digital Archiving Platforms

Introduction of CollectionBuilder

What is a template?

A template is a model on which you can base your own work.

Rather than going through prompts and steps to create something new, a template asks you to replace what is already in the model with content of your own.

In CollectionBuilder's case, this means replacing their demo metadata and objects with your own, and then replacing the values in several config files with those that make the template look and feel like the site you want.

You can also use the templates to look at what's going on. Once you copy a CollectionBuilder template, the code and all the files are totally yours to investigate and customize.

CollectionBuilder Docs

CollectionBuilder was designed with learning in mind–and so are these docs!

CollectionBuilder’s workflow is scaffolded in order to help users build web and data literacy skills as they progress towards building and deploying new digital exhibits. 

In order to receive the correct information, make sure to follow along with the instructions of the template file you have chosen to work with as there are multiple templates (Github,CSV,Sheets).


You can also search for specific terms at the top of the page in order to find what you are looking for and it will show where the term is on each page.

Object Types

Depending on the type of template you are using for you project, the object type you can use will vary. 

GH and SHEETS support a small set of object types including jpg, png, pdf, and mp3, plus externally hosted items via YouTube, Vimeo, and external links.

The object files for CB-CSV collections are generally not committed directly into the project repository–the files are usually managed separately to avoid the drawbacks of tracking binary files in Git and the size limitations on GitHub. 


File Extensions

If you are working with a Windows computer, have your files pulled up and select view. You should see a menu appear and the options "File name extensions" and "hidden items" appear. Make sure both are selected in order to see all your files you will be working with. Please refer to the picture below. 

If you are working on a Mac computer, these options will appear similarly as Windows except they will be turned on by default. 


File Naming

Naming your files with no spaces, no strange characters, and using lowercase lettering will help you better manage your files. Using underscores is acceptable. (i.e. file_001.jpg)

Why you should use google sheets

  • Google sheets works well with collaboration with others
  • Excel does not use UTF-8 in the correct way for transferring it into a Jekyll project
  • Excel automatically converts fields such as dates into different formats 

Required Fields

Required Fields for CollectionBuilder-GH and SHEETS. Without values in the fields below, CollectionBuilder will not work properly!

  • objectid
  • filename
  • title
  • format

Google sheets tricks

Follow this tutorial to learn about tips and tricks to organizing your google sheets. 

Demo data

Quick Demo of CollectionBuilder

1. Create a GitHub account. (Video Version)

  • If you don’t have an account, visit GitHub and click the Sign up button. You do not need a paid account for using CollectionBuilder. After signing up, check your email to verify your account.


2. Create a new repository. (Video Version)

  • Log in to your GitHub account and visit the collectionbuilder-gh repository page.

  • Click the green Use this template button and then the Create a new repository dropdown option.

User clicking on use template button and then create a new repository option

  • Leave the repository as Public. Enter a repository name (use a lowercase name without spaces or odd characters, e.g. psychiana-demo) and click Create repository from template.

User entering a repository name and clicking create repository from template button


3. Prepare your metadata for upload. (Video Version)

  • Make a copy of this Google Sheet of demo metadata.

  • Download the spreadsheet as a CSV file by clicking File → Download → Comma Separated Values (.csv)

User downloading the Google Sheet as a CSV file

  • Locate the CSV file on your computer (probably in the Downloads folder).

Warning: Do not open the CSV file to avoid issues with Microsoft Excel scrambling your UTF-8 encoding. Excel cannot correctly export a CSV for use with CollectionBuilder.

  • Without opening the CSV file, rename it using all lowercase letters, no spaces, and no special characters (e.g. psychiana-demo.csv)

4. Upload your metadata file. (Video Version)

  • On the homepage of your repository on GitHub.com, click on the “_data” folder.

  • Then click the Add file button and select Upload files.

User clicking on add file button and then upload files

  • Click Choose your files, navigate to the location of your metadata CSV (probably in your Downloads folder), and select the file. Press Enter to begin the upload.

  • Scroll down to the Commit changes box, write a short commit message describing what you did (e.g. Add demo metadata), and then click the green Commit changes button.

If you want to learn about creating, updating, and uploading your own metadata, visit our CollectionBuilder-GH Metadata Documentation.


5. Upload your objects. (Video Version)

  • Download the demo-objects.zip file (includes image files, PDFs, and mp3s).

  • Double click on this file to unzip it.

  • On your repository homepage, click on the “objects” folder, find the unzipped demo-objects folder, and drag your mouse down the list to select all the objects to add. Press Enter to begin the upload.

Warning: Make sure to select all the object files in the demo-objects folder instead of just uploading the demo-objects.zip file.

  • Write your commit message (e.g. Add collection objects) and commit your changes.


6. Configure your site settings. (Video Version)

  • On your repository homepage, click on the “_config.yml” file.

  • Click on the edit button (the pencil icon) to edit the file.

User clicking on pencil icon to edit the file

  • Under the SITE SETTINGS section, replace the title placeholder text with a title of your choice.

For example:

title: Psychiana Demo Collection
  • Optional: Write a new taglinedescription, and author.

  • Under the COLLECTION SETTINGS section, replace the metadata placeholder text with the filename of your uploaded metadata file without the CSV extension.

For example:

metadata: psychiana-demo
  • Write your commit message (e.g. Update site settings) and commit your changes.

7. Generate your site. (Video Version)

  • On your repository homepage, click the Settings tab in the top right and then click Pages in the left side menu.

User clicking on Settings and then Pages

  • Under Source leave the dropdown option as Deploy from a branch.

  • Use the dropdown to change from “none” to “main” (leave the folder option as “/root”). Then click the Save button.

User generating the GitHub pages site

It will take a few minutes for your site to go live. You will see a message that your site is currently being built.

Screenshot text reads 'Your GitHub pages site is currently being built from the main branch.'

After waiting a bit, refresh the page. If the build is successful, an alert will appear providing the URL to your live site. The URL will follow the pattern: https://username.github.io/repository-name

Screenshot text reads 'Your site is live at https://juliastone0729.github.io/psychiana-demo/.'

You can visit this URL to see changes to your live site. To ensure any changes you commit are complete, look for a green check mark instead of an orange dot in the Code section of your repository’s homepage.

Tip: You may need to refresh the collection website for the changes to display.


  • On your repository homepage, click on the “_data” folder and then click on the “theme.yml” file.

  • Under the HOME PAGE section, replace the objectid placeholder text with the objectid of an image in the collection that you want to be the top image on the homepage.

For example:

featured-image: psychiana005

Visit your live site and use the Browse page to view potential featured images.

User clicking on browse option in the website navigation bar

To find the objectid for an image, click on the image title and then check the end of the URL of the item page. The URL will include the objectid after id=.

User clicking on an item and then highlighting the object ID in the URL

For example:

For the URL, https://juliastone0729.github.io/psychiana-demo/item.html?id=psychiana005, the objectid is psychiana005.

Tip: It is best to choose a large horizontal image if possible.

  • After you have updated the featured image, write your commit message (e.g. Add featured image) and commit your changes. View your changes by visiting your site’s URL.

9. Edit the About Page. (Video Version)

  • On your repository homepage, click on the “pages” folder and then on the “about.md” file.

  • Write some text on this page using Markdown.

  • Optional: Practice using example code from our Feature Includes Bonanza page.

  • After you are done editing the About page, write your commit message (e.g. Edit About page) and commit your changes. View your changes by visiting your site’s URL.


10. Explore potential next steps. (Video Version)

Your collection website is complete! To implement additional Customization Options, your next steps could be:

If you want to get into more Advanced Options, you could explore:

To build your own custom digital collection website, you can follow these steps again after creating your own metadata file.