This website has been quite fun to work on, and it has to be one of, if not, my favourite assignment from this class. I think what I like most about it is just that I have the freedom to make the website my way, which in turn lets me learn more about the tools I’m using to make the website. I understand that we were supposed to use Google Sites, but I figured that since I can make a website by hand I would do that, as not only is it something I find fun, but also it would stand out visually from the rest, with a more unique layout to the Google Sites pages.
Now, the way this site works is rather interesting to me, and getting the post working was an issue that
took me the first few days of the assignment to figure out. The reason it took so long is that by default,
Jekyll’s (The tool that sets up the post system) blog system was only made to read posts from one directory,
which is /_posts/. I did not quite know how I could use different directories to achieve what I wanted, which
was separated blog feeds for the different sections.
Now, I’m sure with what I know now I could use different directories, but the solution I came up with is more fun.
For context, each file for the posts, such as this one, contain data at the start of the markdown file called “Front Matter”. Essentially, the front matter is metadata that the Liquid, something Jekyll uses, can read and do operations based off of. The layout for the posts on this website is as follows.
---
title: "This is the title!"
author: "Maple"
layout: blogpage
desc: "A riveting description."
icon: "The path to a cool thumbnail."
section: "Other"
select: "true"
sourcelink: https://www.mybib.com/b/example
---
While most of these are self-explanatory, others may not be.
The layout is what manages what is loaded on the page. This includes things like loading elements like the
navigation bar at the top, or footer at the bottom. The blogpage layout adds the title and other information
at the top of the post, before putting the actual post content in the page.
The section tag controls where on the website you find the post. This was the difficult think I was talking about earlier. It took me a few days to work out a system of ifs and elses that would produce the results I want. The results of my research means that the HTML is rather messy, though it achieves the result I want.
The select tag is what determines what shows up on the front page and what is “featured” in the more specific sections. Because the standard “blog” view is hidden, the only way to find posts that’s section is “Other” (like this one!) is through either the featured posts or the sources page.
The sources page in its current state was an on-the-fly decision I made, as previously it would just be the links sorted by “For Posts”, and “For Website”. You can still see that sorting, but the contents of the accordian were made using the blog functionality, but adding a butting using the source tag.
Unfortunately I don’t have the time to write more of this, but some closing important information:
You can view the source code for this website by clicking on the GitHub logo in the footer, at the bottom of the screen, and this website is linked on my personal website at damidoop.xyz.
Thank you for reading, and see you next time!
(P.S., on GitHub, you can see the commit history to see when I added what, as little snapshots of this project through its development.)