CollectionBuilder-DHSI Workshop Tutorial

Day 3 - Understanding the Structure and Workings of CollectionBuilder/Jekyll

A look into how Jekyll and CollectionBuilder work, and how to use Markdown to write with CollectionBuilder collections.

Day 3: Wednesday, June 9

Topics: YML, CSV, Markdown, Liquid Includes, Jekyll Layouts, Bootstrap

Major Learning Objectives:

Conceptual

• Understand the difference between CollectionBuilder and Jekyll
• Understand the nested (‘russian doll’) nature of a Jekyll project
• Be familiar with Markdown and how one can use it to interpret CollectionBuilder exhibits*

Technical

• Be able to edit and add to your collection’s metadata and objects
• Be able to customize your collection’s pages using the config files available.
• Be able to reconfigure the home page layout using _layout/home_infographic.html
• Know how to write an about page and include an image from your collection.*

Day 3 Workshop Recording:

https://youtu.be/4TqpTKZy-hE

Day 3 Outline:

1. Review process of editing CollectionBuilder repository on your computer
   • Answer questions related to this process and last night’s homework

2. Quick insert – how to clone directly from GitHub Desktop

3. CollectionBuilder components and design overview - slides (Evan)

4. Demonstrate how to add new items and make changes to metadata in Google Sheets, and add the revised metadata CSV to your repository https://collectionbuilder.github.io/cb-docs/docs/metadata/uploading/#update-metadata (Olivia)

5. How Jekyll Builds the Home page - bullets \ model (Devin)
   • Jekyll Layouts (_layouts/home-infographic.html)
   • Bootstrap columns
   • Liquid Includes in layout
   • TimelineJS include on home page (_includes/feature/timelinejs.html)
6. Begin Customizing About page (Evan)
   • Introduce Markdown (headers, paragraphs, links, lists)
   • Introduce Liquid Includes
   • Add an image (_includes/feature/item-figure.html)
   • Add a card (_includes/feature/card.html)
   • Update About nav (_includes/feature/nav-menu.html)

Homework

Continue customizing your collection, add content to your collection’s About page, and customize the layout of the Home page

1. Finish up any site customization using the _data/theme.yml and _data/ config CSVs.
   • Customize your site using _data/theme.yml: https://collectionbuilder.github.io/cb-docs/docs/theme/
   • Customize your site using the config CSVs in the _data folder: https://collectionbuilder.github.io/cb-docs/docs/customization/

2. Customize your Home page layout by moving around/deleting/adding includes and changing the Bootstrap grid: https://collectionbuilder.github.io/cb-docs/docs/pages/home/

3. Add some content to your About page. At the very least we’d like you to create the following content in markdown. Follow the documentation for help: https://collectionbuilder.github.io/cb-docs/docs/pages/interpretive/:
   • Write two paragraphs about your collection (https://evanwill.github.io/_drafts/notes/markdown-minute.html)
   • Create a list
   • Add an include of your choice (https://collectionbuilder.github.io/cb-docs/docs/pages/interpretive/#feature-includes)
4. Play around with changing the collection’s look and feel by altering the following (but don’t feel obligated to make these changes permanent):
   • Built-in Bootswatch themes: https://collectionbuilder.github.io/cb-docs/docs/theme/advanced/#bootswatch
   • Font family and size: https://collectionbuilder.github.io/cb-docs/docs/theme/advanced/#theme-fonts

5. Continue to practice Git by pulling, committing, and pushing your work.

6. Get in touch if you run into any issues or have any questions!

« Previous Step Next Step»