Jekyll Blog Overview

   
   
 jekyll  liquid  
 ssg  
Table of Content

Preface

Installing Jekyll is something cool.
Having an example of working site is something else.

Github allow a site hosted directly from a GitHub repository as announced in pages.github.com. Further than just using github.io, it allow user to use any domain using CNAME and stuff.

Jekyll transform your plain text into static websites and blogs. Using Jekyll, you can blog using beautiful Markdown syntax, and without having to deal with any databases. Static database can be emulated with simple yaml data/collections.

Instead of server-side scripting, Jekyll utilized Liquid, a template engine. A Front Matter in YAML format. And a built-in support for Sass/Scss. With Scss, CSS can be organized easily. All you need is a text editor. An ideal environment for beginner. You can test your markdown with live preview here

There’s a good reading here from Ramona Harrison on how to build a blog using Jekyll. And there is another review from Smashing Magazine. Even Official Manjaro Site is using Jekyll.

As a site growing up, the more feature it needs. Don’t worry. Many things can be achieved, with only Jekyll built in feature. Most of them can be found ini Jekyll Tips site.

If you are looking for a ready to use one. Just look at examples in this repository. This showcase is more like a list to do for site owner, But it it is already included this repository. So there is no need for beginner to reinvent the wheel.

SASS Vendor

  • Bootstrap, CSS Framework. I only need, the responsive layout.

  • Awesome Font, The iconic font and CSS toolkit. Using font instead of images to reduce http headers.

Assets

  • jQuery Javascript Library (temporary).

Themes

There’s a bunch of Jekyll theme here. But I’d rather start from simple html and build my own using Bootstrap Tutorial. I found this layout Code Snippet, and create my first layout based on this.

Example: Site Wide

All code, utilized Liquid.

  • _data (yaml): navigation. For flexible navigation menu.

  • _data (yaml): author. For multi author blog.

  • _data (yaml): site owner. Usually in footer, containing site owner’s social media account.

  • Social share. Share your post to social media. Based on So Simple Code here.

  • Open Graph Protocol to enhance SEO. Based on So Simple Code here.

.

Example: Pages and Layout

All code, utilized Liquid.

Example: External Service

  • Yandex Metrica, A free tool for evaluating site traffic and analyzing user behavior.

  • Google Analytic, a freemium web analytics service offered by Google that tracks and reports website traffic.

  • Disqus Comment, a blog comment hosting service for web sites and online communities.

  • Muut Comment, The complete discussion system for your site.

Source

Not Finished yet

There are more to come. just give me time to do it.

kitten