Let's start with the task at hand and the information given to us during class (found in the portfolio_2025 repository):
We'll be needing these files here.
_data/mario_metadata.yml
images/mario_animation.png
# Ok, but how do we create a new subdirectory?
# Google!
And the liquid statement in index.md in portfolio_2025
Once we add the mario_metadata.yml and images/mario_animation.png, we should be seeing green build deploys. HOWEVER, once we add the liquid statement to index.md, we'll see that it fails to deploy with Jekyll. Oh no!
If you're running this on VSCode, we can look at the error it returns. It'll be something along the lines of
couldn't find file home.html under _includes/nav/
What? What is home.html?
If we go back to the portfolio_2025 repo, we see that there is a file home.html under _includes/nav/. Ok, great. Just copy over the home.html from the portfolio_2025 repo to _includes/nav/ under your own personal repo, and we're done...right? WRONG.
When we go back to deploy, it should be successful (yay!), but there's no Mario on our page (very sad). Ok, well what's wrong? If we look at the header in index.md under portfolio_2025, we see a few items:
Under portfolio_2025
---
layout: base
title: Course Descriptions
description: An overview of Computer Science pathway at Del Norte High School
author: John Mortensen, Vivian Ni, Bria Gilliam
image: /images/mario_animation.png
hide: true
---
And under your own personal repo, it'll look something like this:
---
layout: base
title: Student Home
description: Home Page
hide: true
---
The author item isn't important, but image: is. If you recall our previous actions, we added a mario_animation.png under the images/ directory, but we aren't declaring it on our own homepage, and thus -- no Mario!
The fix is simple. Just add this line to your own header:
---
layout: base
title: Student Home
description: Home Page
image: /images/mario_animation.png
hide: true
---
And done! Yay! Celebrate!
If it doesn't work... it's DEBUGGING time. OH NO! Shouldn't come to this though, hopefully.
Adding Mario to the Website
Let's start with the task at hand and the information given to us during class (found in the
portfolio_2025repository):Once we add the
mario_metadata.ymlandimages/mario_animation.png, we should be seeing green build deploys. HOWEVER, once we add the liquid statement toindex.md, we'll see that it fails to deploy with Jekyll. Oh no!If you're running this on VSCode, we can look at the error it returns. It'll be something along the lines of
What? What is
home.html?If we go back to the
portfolio_2025repo, we see that there is a filehome.htmlunder_includes/nav/. Ok, great. Just copy over thehome.htmlfrom theportfolio_2025repo to_includes/nav/under your own personal repo, and we're done...right? WRONG.When we go back to deploy, it should be successful (yay!), but there's no Mario on our page (very sad). Ok, well what's wrong? If we look at the header in
index.mdunderportfolio_2025, we see a few items:The author item isn't important, but
image:is. If you recall our previous actions, we added amario_animation.pngunder theimages/directory, but we aren't declaring it on our own homepage, and thus -- no Mario!The fix is simple. Just add this line to your own header:
And done! Yay! Celebrate!
If it doesn't work... it's DEBUGGING time. OH NO! Shouldn't come to this though, hopefully.
Take this cat for celebration!