The Web is always evolving through new technologies, trends, and so much more.
As web developers, we must keep up with these changes. Not only because our passion necessitates new ideas and new inspirations, but also because previously designed websites, might now look painfully outdated.
Prototypes are more convincing, engaging and “real” then wireframes If you want to learn more about using frameworks to create interactive prototypes, check out my online course that teaches UX designers how to make interactive, clickable prototypes using HTML, CSS, and Javascript.
Creating clickable & functional prototypes is by far the best part about my job. It’s one thing to create low-fi or high-fi wireframes/screens and hand those to a stakeholder or a user. Giving them something they can play with in the browser is infinitely better. My personal preference is to create a series of clickable screens in InVision for quickly testing interactions and then move into an HTML/JS/Jekyll prototype or Framer.js. HTML/JS/Jekyll and Framer prototypes require that you know how to write a bit of Javascript. If you’re curious about learning more about prototypes, I can’t recommend the “Flavors of Prototypes” blog post by Marty Cagan enough. I have also created a couple bare bones Jekyll repos on Github for Bootstrap and Foundation that I use for all my prototyping needs.
For my new web design portfolio, I decided to make the switch from WordPress to Jekyll.
WordPress powered my previous website, which I was using back then for most of my projects. I’m always excited to learn new web technologies and try new stuff. So when rebuilding my website, it’s a good time to change my gear.
In this post, we’re going to explore 10 advantages of using Jekyll and Github pages for your online portfolio.
1. Blog aware – ideal for blogs and portfolios
One of Jekyll’s best aspects is that it is “blog aware”. Jekyll supports Markdown out of the box and has myriad extensions for other formats as well. Jekyll also has built-in support for syntax highlighting of over 100 languages thanks to Pygments, including a code snippet in any post is easy.
2. Preprocessor Support
Out of the box, Jekyll has a CSS preprocessors and supports Sass and CoffeeScript without any need for plugins or Grunt files. Just put your .sass, .scss and .coffee files anywhere in your website’s directory, it will get processed into a compressed file every time you save.
3. Flexible – Easy theming
Jekyll is ideal for people that like to hand-code their HTML and CSS. Jekyll uses a templating language created by Shopify called Liquid. Liquid is relatively easy to learn and quite flexible.
4. Work anywhere
Jekyll comes with a built-in server that enables you to work completely offline and preview your web-site live locally at http://localhost:4000. Start new posts, work on code changes, and save all your work to push live later, all without internet access.
5. The power of Git
Web developers are nowadays expected to possess a new set of baseline skills, especially when working in a team with developers. One of those skills is the use of version control systems to track file changes. GitHub provides automatic version control of your website and is the largest code host on the planet. There’s no way around it: you need to learn how to use Git.
6. Simplicity – Keep it simple, stupid
Your Jekyll website will include absolutely no functionality or features that you aren’t using. Jekyll strips everything down to the bare minimum, eliminating a lot of complexities. Jekyll gets out of your way and allows you to concentrate on what truly matters: your content.
7. Easier without a database
Unlike WordPress and other content management systems (CMS), Jekyll doesn’t have a database. Without a database, there’s less to set-up and less to manage.
8. Fast and Powerful – Built for speed and performance.
All posts and pages converted to static HTML prior to publication makes Jekyll blazing fast and is great for loading speed because there are no database requests when a page loads.
9. Security
The vast majority of vulnerabilities that affect platforms like WordPress don’t exist because Jekyll has no CMS, database or PHP. So, you don’t have to spend as much time installing security updates. You also have a backup advantage of having a complete copy of your website on your local machine.
10. Free hosting
Sick of dealing with hosting companies? GitHub Pages are powered by Jekyll, so you can easily deploy and host your Jekyll website using GitHub for free with custom domain name and all.
Conclusion
Jekyll offers a great way to generate a static site, and GitHub provides a wonderful (free) vehicle for publishing. If you don’t require database-driven content, you can achieve plenty with a super fast static site to show off your skills for your next online portfolio.