*Urgent help needed setting up a Computer Science ePortfolio

Help
1

Hello,

NOTE the update later in the post! My original issue is no longer an issue I don’t believe.

I’ve never used HTML, Ruby, or Jekyll before, but my last class has me creating an ePortfolio on GitHub Pages for my final project. I forked the following template for my project, but I don’t know how to edit it to be how I want it: GitHub - mmistakes/mm-github-pages-starter: Minimal Mistakes GitHub Pages site starter..

My current ePortfolio looks like this (deleted because new users can only have one embedded image per post):

The GitHub project for the ePortfolio is here, which is what I need to edit: GitHub - trevor-leon/trevor-leon.github.io: This is my ePortfolio for CS-499 Computer Science Capstone

My class is finished this Sunday, and I will fail if this ePortfolio is not done. I did so much work for this class, and I would hate to see it crumble because I wasn’t familiar with Ruby or HTML.

Basically, what I want to do is to get rid of the Pages and Posts completely. I thought I removed all of the Posts logic, but the Recent Posts are still there. I want one page that scrolls and reads like a readme with headers, text, and possibly pictures throughout. I tried editing the index.html file (which is where the “Testing…” text comes from). I noticed, however, that it doesn’t recognize newlines at all and just writes to the site above the Recent Posts area. What is the best method of keeping what I have now, but replacing Posts with just markdown or something. I even thought about putting everything I need for my ePortfolio in my readme, and then just calling the readme to display in the body.

Really, what I’m trying to do is not hard. The issue I’m having is that I have no idea where to start because I know nothing about HTML, Ruby, or Jekyll. I just need to add simple content such as markup language to the body.

EDIT: I restarted my project using pages and posts, however I want to iron something out before it’s too late:
My new issue is knowing how the Recent Posts are ordered. I originally thought they were ordered by most recent update to the .md file, but that didn’t seem to hold true after adding my Enhancement Three post. Check it out:

image
image2560×1241 240 KB

Notice how Enhancement Three: Databases is listed third? It was the most recent one I updated, so I figured it would appear at the top. How do I order these correctly? I want it to be like the following:

About Me
Code Review YouTube Video Link
Enhancement One
Enhancement Two
Enhancement Three

After finishing up these last few things, I’ll be great!

Thanks in advance

2

You can read Jekyll’s documentation on overriding theme defaults : from the comment at the top of the index.html :

# You don't need to edit this file, it's empty on purpose.
# Edit theme's home layout instead if you wanna make some changes
# See: https://jekyllrb.com/docs/themes/#overriding
1 Like
3

Yeah, I read over that a few times, but I don’t really understand what it means. It’s Greek to me. I’ll give it another go though!

Thanks, pcouy

4

In order to better help you (without doing your homework for you), I need to know more about the topics that were covered in this class. Can you share some kind of table of contents of the course?

1 Like
5

Well, I need to include a professional self-assessment, describe three enhancements I made to a project, and link to a code review I made. At this point, I might even restart using a better/easier template. Do you know any easy-to-use templates I could use? I found someone was using al-folio and that looked like something I could use I think.

I’m just starting to get worried because it’s due this Sunday.

6

This is not what i am asking. What I’m interested in is what was taught in the class, so I know how to explain it to you in a way that you understand.

1 Like
7

Right, the class didn’t teach anything. I was just responsible for upgrading three artifacts that we worked on throughout our time in college to show what we learned. That’s all done. Now, I need to lay out each of the three enhancements. Each enhancement includes the artifact name, a description of the original artifact’s functionality (and specifically where it lacked), and our enhancements we performed on it (for example, the code).

It’s basically just an ePortfolio to show to future employers. I originally stated that I wanted to keep it to one page, but that might not be the best idea. I think my instructor might be looking for pages for professionalism.

Right now, I’m kind of thinking that this guide: Build a Data Science Portfolio (Free & Easy) with Jekyll & GitHub Pages | Part 1: Site Configuration - YouTube might be the way to go. I renamed my current repository so that it’s still saved, but I’m basically going to restart today using that guide.

Thank you for your help and determination, pcouy.

8

Follow-up:
I restarted my original concept with the minimal mistakes starter template, and I’m just going to keep pages. I think I’m slowly starting to understand it better. The issue I was/am having is that I’ve never used Jekyll, Ruby, and little HTML.

Thanks!

9

Hi @trevor-leon,

It sounds like you should start with the very basics.

Here is the first in a series of 5 videos I created to help people get up and running that know nothing about GitHub Pages or Jekyll. While the videos are a little older, you will still find your way around, and this will hopefully get you where you need to go.

If you open this in YouTube directly, it will auto-play to the next video.

2 Likes
10

Hey! Thanks, Bill!

I’m making some decent progress right now, but I will definitely check that out if I get stuck again. I managed to edit the files provided to what I’m going to need. At this point, I am sticking to the posts and pages, but not Categories or Tags. Next, I’ll need to edit the respective .md files for each post. I have already inserted my text into two of my enhancement posts, but I’ll need to add either pictures or code snippets. Code snippets might just be easier.

Thanks again, you guys!

11

Very good. Feel free to keep asking, then. By the way, HTML is the standard by which all web pages are created on the Internet. On almost any website displayed on a computer, you can right-click the browser, select show source (or something similar), and see all the HTML.

For example, if you want to display text on your website that looks like this:

Welcome to my website

Hello World
Here is a link to my website.

You type the HTML code:

<h1>Welcome to my website</h1>
<p>Hello <strong>World</strong>
<p>Here is a <a href="https://agilinaction.com">link<a> to my website.

Where <h1> is Heading 1 and <p> is a new paragraph, and <a href... is a way to provide a link for a reader to select.

Learning HTML is good for everyone to know. However, imagine you are a writer in the zone, typing away. Remembering all those opening and closing brackets and the proper HTML elements can distract you from writing.

That is where Jekyll and many other web technologies come in super handy because they use markdown. You write Markdown, and Jekyll converts it to HTML for you!

Let’s take the same example above, this time writing it in Markdown:

# Welcome to my website
Hello **World**
Here is a [link](https://agileinaction.com) to my website.

When you write that, Jekyll converts it to standardized HTML for you, like this:

<h1>Welcome to my website</h1>
<p>Hello <strong>World</strong>
<p>Here is a <a href="https://agilinaction.com">link<a> to my website.

Notice how you had to type # to get a heading, two ** to get bold text, and a few []() to create a link? So much easier to remember!

Here is a website that will teach you step-by-step how to use markdown:

https://www.markdowntutorial.com

Any file in Jekyll with the extension .markdown or .md that contains a minimum of two lines of three dashes at the top will get processed.

For example:

mypage.md

---
---
# Here is my markdown text

Will display in the browser like this:

Here is my markdown text

You can combine Markdown and HTML, so:

# Welcome to my site!
I <strong>hope</strong> you enjoy it, so let's get _started_!"

Will output to your Jekyll website like this:

Welcome to my site!

I hope you enjoy it, so let’s get started!"

I hope this helps you on your journey!

2 Likes
12

Cool! Thanks!

My new issue is knowing how the Recent Posts are ordered. I originally thought they were ordered by most recent update to the .md file, but that didn’t seem to hold true after adding my Enhancement Three post. Check it out:

image
image2560×1241 240 KB

Notice how Enhancement Three: Databases is listed third? It was the most recent one I updated, so I figured it would appear at the top. How do I order these correctly? I want it to be like the following:

About Me
Code Review YouTube Video Link
Enhancement One
Enhancement Two
Enhancement Three

After finishing up these last few things, I’ll be done!

Thanks in advance

13

Hey pcouy,

I wanted to let you know to check up on my update above if you would like. It might better help you understand what I’m trying to do. Originally, I didn’t want to use pages and posts, but I think it’ll be just fine. However, I have a new concern that should probably be fixed:

My new issue is knowing how the Recent Posts are ordered. I originally thought they were ordered by most recent update to the .md file, but that didn’t seem to hold true after adding my Enhancement Three post. Check it out:

image
image2560×1241 240 KB

Notice how Enhancement Three: Databases is listed third? It was the most recent one I updated, so I figured it would appear at the top. How do I order these correctly? I want it to be like the following:

About Me
Code Review YouTube Video Link
Enhancement One
Enhancement Two
Enhancement Three

After finishing up these last few things, I’ll be done!

Thanks in advance

14

Jekyll will always display your posts in descending order by the post’s date. That way, guests always get to see the latest post you write first.

If you have these two filenames:

2010-01-07-post-modified.md
2010-02-05-post-notice.md

Then Jekyll will display them in this order:

  1. 2010-02-05-post-notice.md
  2. 2010-01-07-post-modified.md

Jekyll focuses on the date in the filename. If you have a date in your YAML front matter (which you do on some and don’t for others), you Jekyll will use that instead, so be consistent.

I see you created your own last_modified_at YAML front matter. I do not know if you did that or if the theme can use it, but let’s say you created it. You can edit the layout or even create a brand new page called “latestposts.md” and link to it.

The code would look something like this:

latestposts.md

---
title: Latest Posts
---

{% comment %} 
    Remove `| reverse` if you want it to sort ascending instead of descending
{% endcomment %}
{% assign myposts = site.posts | sort: 'last_modified_at' | descending %}

{% for post in myposts %}
    <p><a href = "{{post.url | relative_url}}">{{post.title}}</a>
{% endfor %}

The above code will read the last_modified_at field and sort it descending, so the latest will be displayed first. The for loop displays each post’s title with a link to the post.

All that said, Jekyll is a static site generator, so trying to manage the last modified date is a painful process. It is usually best to let Jekyll sort by the post date.

2 Likes
15

I kind of thought that’s what it went by, but they’re all the same date: 2023-03-23. What does it go by then?

I think you’re right; there is at least one file that includes a date in the front matter. I’ll have to either implement it on each file or get rid of it. If it’ll help my issue of ordering my posts, I will absolutely try to implement it. Although, I’m not familiar with this date format:

---
title: "About Me"
date: 2023-06-23T15:34:30-04:00
---

If I had to guess, I’d say it’s like this: [date]T[HR]:[MIN]:[SEC]-[TIMEZONE]?
Did I get that right? :smiley:
If I implemented this front matter on each page’s .md file by adjusting the time, would it sort them correctly?

But no, I did not include my own last_modified_at front matter. I’ll have to check it out. It must be on one of the posts I’m assuming? Otherwise, I’m not sure where it is or if it would be useful. To be honest, I’ve never seen or worked with YAML front matter before yesterday, so I feel like I dove into the deep end. At least it’s coming along well now!

Like I said, I’ll definitely check out your videos too if I get stuck again.

Thanks again!

16

Yes, either put a date: in the YAML front matter of every file or don’t and let Jekyll handle it based on the filename. A best practice is to put the date in the front matter; that way, you can easily see the date while editing the post, and if you decide to future-date posts or multiple posts in a day, you can specify a date and time.

You are almost right about the date format! It is slightly different than what you thought, though:

date: 2023-06-23T15:34:30-04:00

2023-06-23
[Year in 4 digits]-[Month in two digits]-[Day in two digits]
The dashes are separators

T
[T is a separator that indicates the time portion of the date]

15:34:30
[UTC 15 hours]:[34 minutes past the UTC hour]:[30 seconds past the UTC hours and minutes]

-04:00
[The timezone offset from UTC (-4 hours)]
In this case, the dash means something different.
Offsets can be "-" or "+"

From my US America perspective, the post occurred at 11:34 AM Eastern (NYC/Atlantic) time. To learn more about UTC and offsets, go here.

Adding the hour, date, and time is a good idea if you post multiple times daily. However, if you do not post multiple times daily, you can type in a regular YYYY-MM-DD format, just like the filename. For example:

:white_check_mark: Valid

---
title: "My first post"
layout: post
date: 2023-06-23
---

:white_check_mark: Also valid

---
title: "My first post"
layout: post
date: 2023-06-23T15:34:30-04:00
---

BTW, you can mix and match these. If you usually use the YYY-MM-DD format and suddenly happen upon the need to write two posts that day, it is okay. Use the UTC-formatted time on both posts, and Jekyll should properly sort them for you.

UTC is only defined in the YAML front matter using the date: field. You cannot specify hours, minutes, and seconds in the post’s filename. This is another good reason to consistently use the date: field in the front matter even though the date is in the filename.

1 Like
17

Oh okay, sounds good. Everything is looking good and coming together! I have one last question I believe, and my site should be perfect! How do I remove the feed.xml button at the bottom of the site? There isn’t anything in the footer or anything from what I can see. Where is it coming from?

image
image2450×803 60.7 KB

18

How do I remove the feed.xml button at the bottom of the site? There isn’t anything in the footer or anything from what I can see. Where is it coming from?

We’re back to the first answer I posted. Basically, your website behaves as if the files from the minimal mistakes theme were in your project. Look back at the documentation I linked in my first reply, create the layout file that you need to override from the theme in your project, and you should be good

1 Like