Keep in mind, this post will not be teaching you how to make a website but will help describe the process and resources I used to make mine.
Jekylling For The First Time
Jekyll is a blog-aware static site generator that has been become popular in the recent years. After being adopted by GitHub and their easy to use website hosting platform GitHub Pages, I decided to use this as the main tool for this website. This has been immensely useful as I am able to customize all of the components for the HTML, CSS and Javascript rather than being reliant on a third party service.
As an example, I can put a chess game in the middle of my post easily. Try it out!
Theme/Framework
After deciding to use Jekyll, I found a website called jekyllthemes.org. They have a variety of themes that anyone can pull from. After exploring through the themes I found one called Notetheme. This was built off another theme called MatJek, both of these themes not being so popular. What stood out to me was the ability to create categories/tags. I believe that useability in any website is the most important thing, so the ability to categorize each post to make it simple for the user to find what they need made this theme an easy choice.
Since my website initially looked like this, I enjoy looking back seeing how much I was able to change.
Each of these themes are using Materialize as their front-end framework. Their documentation is very informative, though this framework seems to be less customizable than I wish it was. I was able to work around this by overriding their CSS on occasion.
Design
Deciding on the look for the website was difficult. I first researched on different color palettes but eventually decided on my favourite colour combination red, white and black. There is also a useful website called coolors.co which gave me a variety of options to generate and modify the palette for my site.
CodePen was a game changer for me. I was able to see so many amazing creations from other developers and it also helped me learn more about animation with CSS. For the Typewriter Animation effect on my front page, I was able to get it off codepen.io and make some modifications. Animista is also a great place to create simple animations in CSS.
Additional Resources
Design Resources For Developers: Catalog of web design resources I will definitely be using in the future.
Web Host Canada: Where I bought the domain name.
GitHub Desktop: Tool to deploy changes to github pages.
Toledo Javascript Chess Game: Where I got the chess game code from.