Today I’ll be sharing why I chose Jekyll to develop my website and why it wasn’t trivial for me.
First I thougt to start blogging in WordPress, but after using it for some projects I felt like my idea of frontend and web development is to make things from scratch when possible.
I like making things, not using Boostrap or other frameworks which are good tools for some people or to solve some problems but not for this one. I made a list of things I would like to have after dismissing few ideas:
1 Blog 2 Projects 3 Interviews with web developers 4 About 5 Twitter 6 GitHub 7 RSS Feed 8 Email 9 FAQ
- Styleguide (pending)
I realized that having this sections would easy be managed via static files so I started looking for a tool and found one, Jekyll a Static Site Generator, which isn’t officially supported on Windows but it is still possible to run it as I did because I use Windows 10 for now.
Having only static files on the server means its fast and secure and with no needs of data bases to serve assets dynamically.
Advantages of static site generators over dynamic sites
While Jekyll manages your content, it is not a CMS in the way Wordpress is. Since there is no back-end GUI, Jekyll relies on hand coding which I love. This has its pros and cons depending on the site you want to build.
- Speed – your website will perform much faster, as the server does not need to parse any content.
- Security – your website will be much secure, since there is nothing that can be exploited server side.
- Simplicity – there are no databases or programming languages to deal with. HTML and CSS is enough.
- Flexibility – you know exactly how your site works, as you made it from scratch.
How Jekyll works
Jekyll then works its magic by combining YAML front matter with the Liquid Tempting System. Jekyll will search for files with YAML front matter, any file that has it will be able to use variables from Liquid. That, in combination with your HTML, CSS, and JS files will tell the site how to look and behave.
Finally the importance of its modularity helping you follow the DRY principle of programming from a folder that begins with an underscore like so:
Furthermore, any time I want to make a change to either, I only have to update it in one place and it’s pushed out to the entire site.
Of course, dynamic sites have their advantages as well, with no back-end GUI tu manage updates, plugins and for no tech-savvy people would be more difficult to admin the website, write content and push changes to the server.
GitHub Pages to the rescue
GitHub Pages accepts static HTML but can’t execute languages like PHP, or use a database in the way you’re probably used to, so you’ll need to output static HTML files. You can host your static website for free directly from your GitHub Repo.
Iterating is the key
I then spent the following 7 months iterating and iterating. During this period, other projects fell by the wayside as I got distracted by yet another feature addition, performance improvement or design detail.
I have lot of things to do:
- Refactor lot of CSS classes which aren’t ok. Classes aren’t well suited defining the HTML structure.
- Want to help people with disabilities to navigate my site in a better way, making it accesible which is not.
- Optimize my website assets and code to get
100/100 on Google Pagespeed which I have not.