Protocol Oral History Project website

A project of the Media Economies Design Lab at the University of Colorado Boulder, directed by Nathan Schneider. Site design by Drew Hornbein.

Developed in Hugo.

Development

Be sure to have a recent Hugo extended version installed.

Navigate to the project directory and:

npm install

Then, to serve the site locally:

hugo server

Deployment

Thanks to the MEDLab Hugo template, the site is set up to deploy automatically to the MEDLab server via GitLab CI. To do so, when developing locally, use these git commands:

git push origin
git push origin main:publish

A push to publish should trigger a pipeline in GitLab to deploy the site. If it doesn't, check for errors in Gitea and GitLab.

Interviews

see /archetypes/interview.md for the interview template. You can create a new interview with:

hugo new content content/interviews/lastname-interview_title.md

This will create a new interview in the content/interviews directory with the current date and the title you provide. You can then edit the file to add your content.

Alternately, you can manually add a file there in the proper format.

Headshots

Optionally you can add a headshot photo to your interview. To do this:

1. Place your image file in the /assets/headshots/ directory
2. Add a headshot field to your interview's front matter with just the filename. For example:

headshot: "firstname_lastname.jpg"

Note: Name is case sensitive, might as well use lowercase letters and hyphens in your filename.

Narrator links

You can add links to an interview that relate to the narrator. To do this, add a links field to the front matter of the interview. The value should be a list of objects, each with a text and url field. For example:

links:
  - text: "My Website"
    url: "https://example.com"
  - text: "My Twitter"
    url: "https://twitter.com/example"

This will include the links in the interview page. The links will be displayed as a list with the text as the link text and the URL as the link target.

Open Graph Image

You can add Open Graph image (for social media sharing) to an interview. To do this, add a ogImage field to the front matter of the interview. The value should be the path to the image file. For example:

ogImage: "/images/my-image.jpg"

Note: The image should be at least 1200x630 pixels for best results. Make sure to place the image in /static/images/ directory so it can be served correctly. The path should be relative to the static directory.