Designing a website is more than just picking colors and slapping text on a page. It’s a journey of trial, error, and discovery. When I first started learning Jekyll, I felt like I had entered a new game engine… only without a visual editor to guide me. Every step had a chance to feel like a puzzle to solve. Luckily, with the advent of AI, things have eased up, but that doesn’t mean building a good-looking Jekyll site is easy.
In this post, I want to share three key lessons I learned along the way. Whether you’re a seasoned developer or just dipping your toes into web design, I hope my experiences resonate and inspire you to take the leap with your own projects. Let’s dive in!
1. AI Is A Drastic Productivity Booster
When it comes to tasks like implementing a modal or a section with a grid, artificial intelligence (especially ChatGPT) has been of major help on this part. Of course, AI isn’t 100% reliable and it depends on the AI being used; local models and cloud models like ChatGPT and Gemini may not excel in the same areas. Still, I’m not understating its usefulness as a productivity booster. In fact, I would consider it a blessing!
For example, the Skills, Services, and Portfolio sections were created with ChatGPT and then given some code touchups by me! The Portfolio section was intended to replace the Projects page that came with the WhatATheme theme, to further solidify the idea of the site being mostly a single page.
If you are new to AI tools, don’t worry! They’re easier to integrate into your process than you’d think. A little experimentation goes a long way.
2. Jekyll Is Cool But Hard
Have I told you what Jekyll is? No? Well, for starters, it’s an open-source static site generator that’s blog-aware. It can handle pages written in HTML or Markdown. Most importantly, it pairs well with GitHub Pages!
When you’re on your own and you have rudimentary knowledge of HTML and CSS, it’s easy to get lost on what to do when making anything more complex than plain text on a section and it seems more intimidating than WordPress. WhatATheme uses the Bulma framework so it was even easier for me to get lost in battling HTML, given the vast amount of classes I was unfamiliar with but thankfully managed to get the idea of pretty quickly.
However, as I said before, you can alleviate some of the challenges with AI but you shouldn’t completely rely on it for your work, you should make edits as you see fit. So, while I can’t say I recommend Jekyll over WordPress, it’s definitely a good free alternative if you’re willing to work directly with code (and fight your own sanity in the process)!
3. Simplicity Is Key
I discovered Jekyll when I was looking to rebuild my game studio’s website. My first Jekyll site was simple; it was for myself, it was built with the default theme Minima, and it was my first foray into web design after a while of not using WordPress. Overall, the first version is pretty different to what you see now, but that’s not the main point. This section will explore how to incorporate simplicity into your sites.
When it comes to web design, less is often more. Early on, I found myself overcomplicating the Portfolio section, experimenting with a Flickity-powered carousel that didn’t appear to look good out of the box. It wasn’t until I settled for a grid design that my site started to shine brighter; it seemed more complete as a single page site!
Tips for Simplicity in Web Design
- Focus on Functionality: Prioritize features that enhance user experience over flashy extras.
- White Space Is Your Friend: Don’t be afraid to leave areas of your design empty. It creates balance.
- Consistency Is Key: Stick to a limited color palette and font family for a polished look.
Remember, simplicity doesn’t mean boring. It means thoughtful design. Try these tips in your next project and see how much of a difference they make!