A friend of mine recently made a blog using Jekyll and GitHub pages and sent me the tutorials (Jekyll - Static Site Generator | Tutorial by Giraffe Academy) he used. When reviewing them, I found that they differed from my chainmail blog in that they used Ruby and Jekyll locally, which allows for building and viewing the rendered website locally. Implementing those changes would allow me to use Git branching and pull requests with my chainmail blog, fixing one of its most pressing issues. However, I wanted to try using it to learn how to use it before implementing it into my blog. Rather than making a dummy test website, I decided to create this portfolio website so I could make something I needed and learn more about Jekyll at the same time.

  Following the tutorials, I installed Ruby and Gem, then the Jekyll framework. Afterwards, I ran the setup command jekyll new docs, which created a folder called ‘docs’ containing a boilerplate Jekyll website. Next, I updated the file _config.yml to set a title, add footer information, and change the theme to minima dark. To ensure the website functioned when pushed to GitHub, I added a separate section in the _config.yml file for GitHub-specific settings, including a different baseurl value.

  As this is a portfolio website, I needed to include a resume. Additionally, I wanted the resume to be easy to update so I couldn’t hardcode the page. When I discovered data files, I realized they could provide the perfect opportunity to make that possible. I then created the resume.yml data file to contain the necessary resume content grouped into sections and filled it out. Following that, I wrote the resume.html layout using Jinja formatting, which reads the data file so the page would respond to the content updates so I could easily update the data file to update the resume. Lastly, I created the resume.md page and had it use the resume layout so that I would have a clear Resume option at the top of the page available from any page.

  Since this is a portfolio blog, I wanted somewhere to display projects in addition to having a home for the occasional technically oriented blog post. I liked how the homepage displayed posts and decided to base both the blog and projects pages on it. To do that, I added a type value to the front matter and created two layout variants (blog.html and projects.html) of the basic homepage that iterated over all posts and filtered based on the post type, then created two new pages blog.md and projects.md to use those layouts and add the Blog and Projects headings to my website.

  In addition to those macro changes, I made other modifications; I updated the footer and changed the CSS. The footer updates were motivated by a desire to link to the source repo for the website; in the process, I located SVG images for many social platforms and added commented-out placeholders for them in _config.yml. The CSS updates modified the background and text colours to implement my desired colour scheme; I also modified the post-auto-fill form field colour to maintain visual consistency.

  Overall, I found making this portfolio website to be a fun and illuminating project. It has caused me to install Ruby, which I might try using later, given me much more exposure to the Jekyll framework, increased my knowledge of web development and provided me with a platform to showcase my skills to others. Creating a portfolio website is a project that I highly recommend to any programmer. GitHub makes it easy to create and host a website for free; a large part of learning programming is making things, and a portfolio website is the perfect place to show off what you have made.