July… the time of year when the temperatures rise, the flowers bloom, the children celebrate their freedom, and I bang my head against the computer trying to update my website. On the off chance that the dear reader has come across my previous website you might know that I updated it last year at around this same time. That website was built using the Django web framework, which turned out to be absolutely terrible for my purposes (i.e documenting my projects). Of course there’s a very high chance I was just using it wrong, but Django seems like it would be a lot more useful if you’re webiste has dynamic content or requires a database to keep track of large amounts of information, all of which my website neither has nor needs. Furthermore, the only way that I ever saw to actually write your own content was through the Django admin page, which requires a rich text editor plugin to be even remotely useable. Honestly, it wouldn’t be too hard to integrate one of those, but simply the fact that I had to persuaded me against using Django anymore for my website.
And so I searched far and wide for my website’s new digital home that would both be advanced enough for blogging yet simple enough that a web-design-infant such as I could use it. Enter: Jekyll. A static site generating machine that offers robust support for blogging applications in an intuitive system. If those people who’ve visited my last website are still reading they might still be wondering what the point of this entire project was since this site is literally a carbon-copy of the other aesthetically. But as they say, “beauty is only skin deep.” Because of Jekyll’s simplicity I was able to explore and include features that I otherwise wouldn’t have with Django, such as a code highlighter:
# a useless piece of python
def sum(x,y):
sum = x + y
return sum
num1 = 10
num2 = 20
mySum = sum(num1,num2)
print(mySum)
I can also use LaTeX for math expressions:
$$ e^{(i\pi)} = cos(x) + isin(x) $$
Furthermore, Jekyll’s intuitiveness makes me much less daunted by the thought of adding new features, and I’ve already got a couple of future additions in mind. In particular, once I add some more projects to the site I’d like the ability to filter projects by certain attributes. I also want to add an interactive resume that summarizes my projects/education/experiences in a memorable and unique way (I’m not exactly sure what form this will take yet). In summary, keep checking back because I plan on updating this site much more regularly than my other one! And if you want a little more of a technical overview for the site, read on…
Jekyll is static site generator that is based on the Ruby programming language, although proficiency with Ruby is not at all required to make a website with Jekyll; all you need is it installed on your computer. Before I continue, an important distinction should be made between dynamic and static websites: a static website’s content is simply premade html served by the web server and is not influenced by user input, while on the other hand the pages of a dynamic site are dynamically generated based on content in a database. That’s a gross oversimplification, but it highlights what I like about static sites: they require no backend and they’re easy to update. Probably the most important part of Jekyll is the frontmatter on all your pages: this is data in the YAML format that is unique to each page and can be customized in virtually any way you want. Here’s a look at the first part of this very article you’re reading, where the frontmatter is inside the triple dashes:
---
layout: post
name: A Project Website
image: assets/images/blog/jekyll.png
type: project
keywords: website, jekyll, static website, FinnLearns, portfolio, personal website, project, web design
---
### Here We Go Again
July... the time of year when the temperatures rise, the flowers bloom, the children celebrate their freedom, ...
As you can see, there is data for the name, an associated image (the one you see in the project card), and keywords that will hopefully help with the visibility of my posts. There’s also the type frontmatter, which distinguishes between posts meant to be displayed in the Projects page or in the Life page. Finally, the layout frontmatter tells Jekyll which layout to apply to this page. Layouts in Jekyll are essentially CSS templates that wrap around the content of the site. Furthermore, layouts can inherit from other layouts, and in my case the post layout inherits from the default layout. The latter includes the CSS and styling for the navbar, the site colors, and all the CDN links needed for the code highlighter, styling, and LaTeX.
Speaking of the code highlighter, I am using Prism for that purpose, and it is being served through a CDN link. If you would like to do the same, I recommend just browsing the main page of its website which contains practically everything you need to start using it. For LaTeX I am using MathJax, which is a JavaScript library for formatting math expressions. Setting it up was extremely easy, mostly thanks to this informative blog post. I’m also using the Bootstrap library for a couple of features throughout the site, most notably the cards in the Projects and Life pages. Also, utilizing static content in Jekyll is an absolute breeze compared to Django: inside a folder named “assets” you place your static content in appropriately titled subfolders for CSS, images, and JavaScript. And then when you want to access these resources you simply pass in the file path. Finally, to host the site I’m using Netlify, which is barely an inconvenience to setup as long as you follow their instructions. I’m not too familiar with it yet, so as of now I can’t offer any opinions that go beyond the setup process.
So there you have it! A (kind of) new website brimming with potential. Visitors of my previous site were undoubtedly dissapointed by the pace of my output (only six posts in a year), but I have ideas for some intersting projects in addition to more updates that I’d like to apply to the website, so check back often.