This page explains how to turn a course assignment into a working page on the Campus History site. Your course syllabus explains the assignment, grading, due dates, and reflection requirements. This guide only covers the site workflow: making a page, adding images, checking metadata, and submitting your work for publication.
In GitHub, a fork is your own copy of the Campus History repository. You can edit your fork without changing the public site until you are ready.
Fork in the upper-right corner.Create fork.Bookmark two pages:
https://github.com/YOUR-USERNAME/campus-historyhttps://YOUR-USERNAME.github.io/campus-historyYour fork can generate its own preview version of the website. Use that preview to check page content, links, images, and formatting before submitting. Fork previews can behave a little differently from the public Campus History site because they live under your GitHub username, so do not change _config.yml or site-wide settings unless your instructor specifically tells you to.
Settings.Pages in the left sidebar.Build and deployment, choose Deploy from a branch.master branch and the /root folder.Save.Settings > Pages and open the published site link.GitHub Pages takes about a minute to rebuild your site and show your latest changes.
All essays live in the essays folder. Each essay has its own folder and an index.md file inside that folder. The easiest way to begin is to copy one of the starter essay folders and rename it for your topic.
Use one of these:
starter-essay-simple — best for most essays. Includes a basic structure, one image, captions, an AI-archive comparison section, and a bibliography.starter-essay-advanced — use this if you want optional components like a pullquote, image grid, and before/after image slider.Do not edit the starter folder directly. Copy it first, then rename the copy.
If you are using GitHub’s web code editor, open your fork and press . to launch the editor. Then copy the starter folder inside essays, paste it in the same essays folder, and rename the copied folder with your topic name.
Your copied folder should be named like this:
essays/mesa-vista-hall
Folder names must be:
Good folder names look like mesa-vista-hall, maxwell-museum, or duck-pond.
Inside your copied folder, keep the file named index.md. Your folder should now look something like this:
essays/mesa-vista-hall/index.md
essays/mesa-vista-hall/images/sample-archive-photo.jpg
Every essay begins with metadata between two lines of three hyphens. The directory, homepage cards, and page header use this metadata, so fill it out carefully.
---
title: Mesa Vista Hall
author: Your Name
layout: essay
date: 2026-11-12
header-title: Mesa Vista Hall
category: Dormitory
popup-teaser: A one-sentence teaser for the map or directory.
card-description: A two-sentence description that helps readers decide to open your essay.
card-image: /essays/mesa-vista-hall/images/example.jpg
header-image: images/example.jpg
---
When you copy a starter essay, replace the starter metadata with your own information. Pay especially close attention to:
titleauthorheader-titlecategorypopup-teasercard-descriptioncard-imageheader-imagestartThe card-image path starts from the root of the site, so it should include your essay folder name: /essays/mesa-vista-hall/images/example.jpg.
The header-image path starts from inside your essay folder, so it usually looks shorter: images/example.jpg.
Use one of these preferred categories when possible:
Academic BuildingAdministrationArts VenueAthleticsCampus ServicesClassroom BuildingDiningDormitoryHistoric BuildingLandscapeMuseumOfficePublic ArtStudent ResourceThe current Campus History directory is generated from essay metadata. You do not need to update a separate spreadsheet for the public directory unless your instructor gives you a separate course-specific sheet.
The starter essay already includes an images folder with sample images. Replace those sample images with your own images from the archive, or upload additional images to the same folder.
Your folder should look like this:
essays/mesa-vista-hall/index.md
essays/mesa-vista-hall/images/mvh-construction.jpg
essays/mesa-vista-hall/images/mvh-today.jpg
Image paths must match exactly, including capitalization, spaces, punctuation, and file extension. mvh.jpg, MVH.jpg, and mvh.jpeg are three different filenames.
Save images at least 768 pixels wide, and closer to 1500 pixels if the archive gives you the option. The text column is 768 pixels, so anything narrower gets stretched to fit and looks blurry on the page. Downloading the largest version a digital collection offers is almost always the right move — the site will scale it down cleanly, but it cannot invent detail that is not in the file.
Before/after sliders are stricter. Both images should be at least 768 pixels wide and roughly the same shape, because the slider is sized from the first image and crops the second one to match. Two landscape photographs work well; a tall document paired with a wide photograph will get its top and bottom cut off.
If the only scan you can find is small, use it and say so in your pull request rather than stretching it — a note about a low-resolution source is more useful than a blurry image.
Use the Campus History image include instead of regular Markdown image syntax:
{% include images/figure.html
class="img-center"
width="100%"
caption="Construction of Mesa Vista Hall in 1950. This image shows how the building was originally framed as a residential solution for postwar enrollment growth. Source: Center for Southwest Research, collection and box information."
image-path="images/mvh-construction.jpg"
%}
Captions should explain why the image matters, not just identify what is in the picture. Include a source, box number, collection name, or link whenever possible.
The code samples page shows the current snippets for:
Copy snippets from that page rather than inventing your own HTML. The site is built to keep student essays visually consistent, and the snippets do most of that work for you.
Before submitting, open your preview site and check:
/essays/your-folder-name/.When your page is ready, send your work back to the main Campus History repository with a pull request.
Contribute or Pull requests.Open pull request or New pull request.Create pull request.After that, your instructor can review the page and merge it into the public Campus History site.