🌎 Portfolio using Jekyll

Monday 1 January 2018

Summary

Upgraded my personal website to leverage more modern tech such as bootstrap, jekyll and masonry. Improved a lot of issues such as image load times and responsiveness.

Rationale

I decided to refactor lachlanmckay.com at the beginning of 2018 as a way to learn some more modern technologies in front-end web dev such as Bootstrap and Jekyll. I heard about Jekyll being the engine behind Github pages, and being a strong advocate of Git over other VC solutions, I wanted to check it out. From my initial research it looked like a great alternative to Hugo, (which is what I was using for version 1 of this site) so I dove in.

Objectives

My goal for the second phase was to address the following issues with the site as it was in version 1:

All images much too big for the area they actually occupy, which costs far too much page load time
Hugo does not allow me to use variables everywhere I want to; it is difficult to keep the source organized
Responsiveness for mobile is okay, but not ideal for maximum readability - I am simply scaling elements up/down in some areas

Solutions

I resolved these issues as described:

Solved using the srcSet css attribute to load different images based on the width of the browser window
Thankfully Jekyll has far greater flexibility over Hugo regarding where you can define and use variables, which is a big win for source organization
Bootstrap has amazing responsiveness out of the box through it’s 12 column grid system. I can see why this tech is so widely used

Tricks

Centering issue - scrollbar shift

When a vertical scrollbar is present, centering (using automatic margins) becomes slightly shifted to the left - off center. I leveraged a combination of two solutions, one from Ayke van Laëthem and another from Chyno Deluxe to produce this solution:

html,
body {
  margin-right: calc((100vw - 100%) * -1);
}

Here’s how it works:

html, body {
  margin-right: calc((100vw - 100%) * -1);
}

calc(100vw - 100%)
/*  Width of entire viewport including scrollbar
    subtract
    Width of entire viewport excluding scrollbar */

* -1);
/*  multiplied by -1
    = negative width of scrollbar */

margin-right:
/*  Increase the right margin by this amount.
    The page will shift to the right by the exact amount taken up by the scrollbar,
    which will be 0 if it is not present. */

Technologies

The tables below give a complete list of all the technologies involved in the second phase of this site, and how I put them to use.

Hosting Tech

Technology	Use
Github	Source code hosting
AWS S3	Static file hosting
Google Cloud Storage	Media file hosting (images/video/pdfs etc.)

Development Tech

Technology	Use
Jekyll	Static HTML generation. Main development tool
Sass	CSS preprocessing (built into Jekyll)
Bootstrap	Responsive styling
Jquery	Powerful javascript extension, required by other .js plugins
Parallax	Nice moving background images
Prism	Code syntax highlighting
Git	Version control
Font Awesome	Social media buttons without having to host the images
Masonry	Layout beautifier. Used with image galleries
Images Loaded	Used to notify masonry when to reload its layout
Bootstrap-Toc	Uses ScrollSpy to create a dynamic table of contents
Real Favicon Generator	Creating favicon files for many platforms

Retrospective

What went well?

Jekyll very flexible and easy to learn, great source organization
Very fast development thanks to leveraging many open-source tools & plugins listed above
Homepage is still impressive, but unlike v1, is now great with SEO, has much better load time and unlikely to be skipped
Image load times have improved
Site load times faster in general due to using cdn’s for plugins and minifying site html
Navigation is clear, does not require hovering
About me page is less cluttered, but has more information
Site is cleaner and more readable in general

What could be improved?

Jekyll build watch must be restarted every time \_config.yml is updated

What still puzzles me?

Is there a way to reload \_config.yml automatically?