This Website!
Statically generated blog site using the Jekyll Now framework!
I wanted to make a blog-style website to serve as a portfolio for all of my project work. For some reason, I really didn’t want to use a website builder like Squarespace or Wix. I had made a few websites in the past using these builders, and while convenient, I found them annoying to use. I wanted complete control of my website, and I wanted it to be exactly how I envisioned it without the constraints of typical website builders. Ultimately, I challenged myself to make this website having minimal web-development experience (only a handful of JavaScript and basic HTML courses). This gave me full control of the website, but sacrificed convenience and some aspects of ease-of-use to do so.
I came across the Jekyll framework for static site generation and was intrigued. It was pretty simple at the top level: setup the basic workings and layouts of the site using templates and themes, then adding a new blog post was as easy as creating a new Markdown text file with some front-matter tagging. Jekyll Now from Barry Clark takes the benefits of Jekyll and makes it even easier by removing a lot of the initial setup process. It also provided a responsive and mobile-friendly base theme. I started off from here.
Improving Images
Making blog posts for my projects were pretty simple, since it was in Markdown, which makes formatting text, links, and inserting photos pretty easy. However, along the way there were a few challenges that I had to figure out. Firstly, I didn’t like how by default, the images were always full sized and centered. I wanted to control the size, alignment, and have specially formatted captions under certain images. There was always the easy option to use the figure HTML element since you can embed HTML directly into Markdown files, but I didn’t like how it looked or worked. Instead, after some quick research, I found that I could create a custom HTML stubs that were easily integratable with Markdown. I could use Jekyll’s support for Liquid templating, and pass in simple parameters to insert an image wherever I liked.
This is what image.html on my website looks like:
<div class="image-wrapper" >
{% if include.url %}
<a href="{{ include.url }}" title="{{ include.title }}" target="_blank">
{% endif %}
{% if include.width %}
<img src="{{ site.url }}/{{ include.img }}" alt="{{ include.title }}" width="{{ include.width }}"/>
{% else %}
<img src="{{ site.url }}/{{ include.img }}" alt="{{ include.title }}"/>
{% endif %}
{% if include.url %}
</a>
{% endif %}
{% if include.caption %}
<p class="image-caption">{{ include.caption }}</p>
{% endif %}
</div>
And here’s what I need to do to put an image on a particular page:
{% include image.html img="/images/MPCNC/cnc-partial.jpeg" width="50%"
title="Table with beginning assembly"
caption="Table with part of the CNC mounted." %}
All I need to do is link the image source, optionally define a width, and give it a title and caption. It’s that easy.
This gave me the control I wanted for captioned images. For my purposes, I didn’t end up needing alignment control for captioned images, since I typically put images that I want to be emphasized and not text-wrapped in places where I wanted captions. I also learned a little inline HTML trick for formatting standard Markdown images:
{: style="float: right; width: 40%; padding: 15px"}
Around the same time as this part of my journey, I also familiarized myself with how stylesheets worked and played with the styling a little.
Better Navigation/UX
I suppose the standard format for a blog is to have a linear feed of posts in some sort of order, such as chronological. As I added more of my projects to the site, I realized that any random person visiting my website might lose track or not scroll down through all of the projects I’ve done. I wanted to be able to navigate the site in such a way that would display all of my projects I had for easy access and better “at a glance” reception. Further, the default homepage feed that came with Jekyll wasn’t to my liking as it only displayed a short 300-something character excerpt and the title for every post. Along the way, I figured out how to create a front-matter tag in Liquid to have a featured thumbnail image for every page, and an accompanying logic/HTML structure to display thumbnails with all of the posts.
As for the navigation, my method of choice (for now) is a dropdown menu. With a dropdown menu, it achieved my goal of having a quick and easy list of projects to link. That said, after some research, this was going to be more complex than just some HTML/JS if I wanted it to be the way I wanted. I ended up settling on the integration of Bootstrap, a powerful front-end library, to acheive my goals. I had already known about Bootstrap from a previous endeavor where I wanted my website’s feed to be in a grid, but I had ultimately decided it was too much effort at the time. But this time, I was committed to making this dropdown menu, so I did research and eventually figured out how to integrate Bootstrap. This website was super helpful to help me understand the integration of the two.
By now, I had realized that by picking an easy-to-use framework like Jekyll now was a little too simple in terms of being able to easily add more advanced features such as a dynamic navbar or making a grid layout of elements or having a simple image carousel. Bootstrap was the answer to these problems. After figuring out the integration and resolving clashes between the master Bootstrap stylesheet and the one that came with Jekyll now that I had been modifying, I had an easy way to add complex elements and basically do whatever I wanted.
Other Challenges
I had no idea how to use continuous integration (CI) or continuous deployment (CD) before making this site. Honestly, it’s still a bit fuzzy to me, but that’s okay because I’m not a software engineer. The typical Jekyll site is usually deployed with Github Pages, which is a CI/CD pipeline. I had minimal experience setting up the Github workflows for this, but luckily a few guides helped out. Along the journey of upgrading and customizing my website, I found out that the GitHub-supported integration with Jekyll didn’t support many plugins or Jekyll 4 (which I had upgraded to). I had many difficulties during this process, but it was a matter of trying out different build & deploy actions from the GitHub marketplace and figuring out the support (or lack of) for certain dependencies and sub-dependencies for the framework.
There also were a number of smaller challenges along the way that I’m probably forgetting, but some of them included accommodating a different organizational structure to show off my school projects, customizing Jekyll’s excerpt system, and more.
Conclusion
Overall, while there were some moments of sheer confusion or hours of troubleshooting, I am satisfied with this website. I have many more features, pages, projects, etc. that I want to add in the future as well. Was this easier or “better” than simply using a website builder? Definitely not. But was this a great learning experience? Absolutely. And I have full control of my website. I wouldn’t say that I like to make things harder for myself, but I enjoy a good challenge.