81 lines
2.7 KiB
Markdown
81 lines
2.7 KiB
Markdown
# Protocol Oral History Project website
|
|
|
|
A project of the [Media Economies Design Lab](https://www.colorado.edu/lab/medlab/) at the University of Colorado Boulder, directed by Nathan Schneider. Site design by [Drew Hornbein](https://www.dhornbein.com/).
|
|
|
|
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](https://git.medlab.host/dhorn/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:
|
|
|
|
```yaml
|
|
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:
|
|
|
|
```yaml
|
|
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.*
|