If there’s one thing I learnt about creating a static-site with all the bells and whistles, and yet remains clean and elegant, is that out here on the wild wild web, there are so many awesome projects infinite resources to help with setting up a site.
Here’s how I set up this little blog of mine, and hopefully this page here not only helps you in making your own website (if you’re here wondering how certain things were done you’re in the right place.), it also serves as a small thank you of sorts, to all the virtual pats on the back I’ve graciously received throughout the development of this website.
Without further ado, curtain calls for all the technologies that made this site possible.
Jekyll, the static-site generator
Jekyll is a (very) powerful site generator written in Ruby. It’s perfect for creating blogs but works for sites too. Unlike Wordpress or some other content management system (CMS), sites generated with Jekyll have no backend database or other moving parts, only a bunch of files. This makes it really fast and efficient. Plus it’s designed to work well with a version control system like Git and using Markdown (I use Kramdown) and combined with YAML and Liquid suited pretty much every software developer out there. The widely-known fact that the ObamaCare campaign used Jekyll to create the pages was also icing on the cake.
- -You can find the source code for the Jekyll new theme at: http://github.com/jglovier/jekyll-new
- -You can find the source code for Jekyll at http://github.com/jekyll/jekyll
- -And the documentation. I constantly learnt new things from referring to it. Even if it was confusing at times, taking the time to read and understand it really helped.
The Helios Theme
Much as I’m a big fan of customization, it will take me forever to conceive a theme that is as beautiful as this, the Helios Theme by HTML5UP. It is a free HTML5 theme by n33, made responsive using the skel framework which is also by n33 himself. For the unfamiliar, responsive means that the website displays optimally and differently across all devices and different screen sizes. You can find the original theme here.
I’ve ported the theme to work on Jekyll, which you can find the original source for version 1 here and version 2 here. The first version was a minimal port to Jekyll with syntax highlighting support and implementing the article read time feature and responsive image layout, while the second version has even more features like a scroll to top button, font-awesome renaming to prevent social media blocks which ruins the site layout. These are all tagged so you get downloadable zips and can go ahead and start customizing them. Take a look at the website’s repo if you’d like to find out how I got certain things working. In the future I might use Travis-CI to deploy in order to use custom plug-ins but I’ve managed to keep it GitHub Pages friendly for now.
I should probably note that the license for the theme is Creative Commons Attribution 3.0 Unported which is different from the rest of the website. On that note, all my additional code are released under the MIT license.
Although originally bundled with the Helios Theme, I feel that this deserves it’s own mention. Initially when beginning to port the theme over I thought this was an ordinary font, turns out it’s actually a ton of icons that are packaged as a font! The non-rasterized property they have (aka they’re all vectors), make them scalable and infinitely customizable without worry that the icons come out blur. Not only are they pretty (who doesn’t like pretty things?), they’re free and open source. Can’t beat that.
Special shout out to Cloudflare for providing a free DNS Nameserver that provides flexible SSL (this is why you see a green lock next to my website name in your browser) and a ton of awesome tweaks! I was blown away by how much features they gave away for free. Used it mainly to get HTTPS going rather than the insecure HTTP, but ended up using a ton of their extra features too! I should do a blog post about this, but for now here’s a few links on setting up free SSL on Cloudflare for GitHub pages, all comprehensive and easy to follow through.
Also worth mentioning …
Armed with only those tools this website would still not be possible without a lot of self discovery, Google-fu and other helpful bloggers, so here’s a few more note-worthy mentions that you might be interested in using. (apologies if I missed you out, contact me!)
- The Source Sans Pro font
- Sublime Text 3 and Emacs,
-nwbecause it’s the cool way to Emacs.
- List of Posts by Category by Christian Specht
- Getting Post thumbnails by Trong
- Liquid Syntax for Designers, by Shopify
- Yes We Jekyll – A ton of reading was done from this blog
- Reading time without plugins by Carlos Becker
- Back to top Button which I adapted by not using the JQuery supplied and instead the Scrolly script included with the theme
- Responsive Images and Responsive Design allowed for centered images that scale according to screen size! :)
- Favicon Sizes Cheat Sheet by Audrey
- How to set short Jekyll URLs and this blog as well
- Anchor links/Permalinking/Deeplinking by Parker himself, and also Ben Balter