Figuring Out the Basics

Category: code

I spent a little bit of time this morning looking at the structure that’s used to actually create this blog. I have some background in HTML (that dates back to the 1990s), and that’s about it. So I’ve got a lot to learn. But I’m going to focus on one modification at a time.

The Big Picture

Right now, there are three types of pages:

  • Main index page: This is the index.html page that shows up first. The file for this is found in the main folder.
  • About page: This is the page that’s linked at the top. This is generated through the about.md file.
  • Posts: These are the individual blog posts. These are generated by the files in the /_posts/ folder.

As far as I can tell, the only page that is a “true”(?) HTML page that gets processed is the main index page. Everything else is generated out of markdown files. (There’s an HTML file in the /_layouts folder that acts as the template, but that’s not a specific page itself.) I want to test making some HTML pages and see if they show up. I don’t really know how the files go from my repository and then get posted. My understanding is that Jekyll creates static pages, so they have to get processed into HTML and then stored somewhere. But I have no idea where “somewhere” is.

Minor Modification: Adding the Date

In my past blogging experiences, I’ve been able to see the dates that things were posted. Using this setup, the dates are displayed when you look at a specific post (at the bottom), but you don’t see the dates on the main page. This is strange to me. So I set out to fix it.

Looking at the index.html file, I was able to determine some information about how information is encoded. There’s a for loop that loops through posts in site.posts, which seems to run through some list/array that contains all of the posts. For each post, it then displays the title, an excerpt (post.excrept – which is apparently the first paragraph of the post by default), and a direct link to the full post.

Then I went to the post.html file in the /_layouts/ folder and found the code that posts the date at the bottom of each blog post. I copied it over into the index.html file and had to change the variable reference to match the loop, and there it was.

But I didn’t like that it was the same font size as the other stuff. I noticed that the date portion was placed inside of a <div class=date> tag, so I went into the style sheet (style.scss) and updated the date class to be a smaller font. The normal font size is 18px, so I dropped the font size of the date class to be 12px.

This is a very small modification, but it’s helped me to wrap my mind around the logic of the language that Jekyll uses. I can see the structure of the for loops, and I see how the variables are used to create the pages.

Minor Adjustment: Excerpts

Now that I know how excerpts work, I’m going to try to focus on writing blog posts with some sort of short introductory paragraph so that the excerpt only catches that portion and doesn’t get too long. I don’t yet know whether the main page will just get longer and longer as I make more posts, or if there’s a default paginating process. I guess I’ll find out when I get there.

Written on April 25, 2020