Making Personal Portfolio Site with Jekyll

One of my friends are super into Jekyll. He’s build a few cool web apps and blog sites. He swears by it. I was looking for a static site generator technology make my portfolio site. I initially thought I would go with Gatsby because I know React well and the company I just joined at the time was using Gatsby for their marketing site. But, every time I talked to him, he told me how great Jekyll was. So, I decided to give it a go. I have built my personal portfolio site with Jekyll.

The repository is open-sourced (https://github.com/mydatahack/portfolio-site-jekyll).

The site is hosted on Github page(https://mydatahack.github.io/portfolio).

Jekyll is a static site generator powered by Ruby. It has own template language base on Ruby, called Liquid. You don’t really need to know much about Ruby, but need to learn the Liquid syntax. Luckily, the documentation is really good. As it has a large user base, you can pretty much google your issues and answers can be found. However, I found the capability of liquid syntax is limited compared to making a static site with Gatsby as you can use full power of JavaScript. Learning the syntax has its own learning curve although it is not steep, but can be annoying. In fact, I kept asking my friend for help whenever I got stuck with an issue.

It has a heaps of plugins, so you don’t need to write your own logic. It has a heaps of templates, too if you want to get the site up and running quickly. I didn’t use a template for my project. I just created one by myself. It is easier than Gatsby because it is a html, css and js without ceremony code that comes with react.

It integrates well with Github although other static site generator would be just fine to deploy as we can use Github actions. Jekyll is the default static site generator of GitHub pages. But, I am not sure if this is the advantage. For the deployment, I have a blog post about it here.

All in all, I am glad that I picked up Jekyll. I learned a new technology and built another website. It was very cool. I am super grateful for my friends to convince me to use it.

Jekyll has its own flaws. But, from my experience, if you are making a blog site or portfolio site, I highly recommended to give it a go.

Please let us know about your experience with Jekyll!

Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …