Live tile for Jekyll

Microsoft introduced live tile for websites for IE in Windows 8, which was improved even further in 8.1 and now it continues in Microsoft Edge for Windows which makes it a great feature to have, because all you have to do is pin the site to Start.

The live tile does not anything special, all it needs is a RSS feed and refresh timing for content polling.

This means a static website can have a live tile. So you can have this feature in a Jekyll based website.

All you have to do is add meta this to the head of your website.

You need to add logo: string to your _config.yml and add the path of your logo.

You can change edit this meta for adding different logo support for each tile size, you can change the color to by editing TileColor content meta.

If you wish to support me keep the Credit comment.

You can pin my website to Start, it has live tile support.

Thank you for reading.

Have a question? Leave a comment.

Adding meta description to Jekyll

Jekyll is a blog aware static website generator written in Ruby that uses Liquid for templating and Markdown or Textile for writing posts and pages. Jekyll also supports CSS preprocessors like SASS, LESS. Here is an easy way to add meta description to your Jekyll powered website.

Meta description helps search engine bots display a short summary to a website’s post or page and helps the user get a short explanation of what content he/she is about to view. The description does not need to be a paragraph of a specific post or page, it can be a small line to explain what the content is about.

Jekyll uses Liquid for templating which makes it easy to add more markup to your source code.

  • Adding description: string to your _config.yml

    example

description: This is an awesome website  

Add these lines to your head.html

You can now add description: string to front-matter of your post or page and add a small summary to it.

Then build your website.

jekyll build  

Now you have meta description for your Jekyll based website.

How to list pages with custom layouts in Jekyll

Jekyll is a blog aware static website generator that is written in Ruby and uses Liquid for templating and Markdown to write posts and pages, Jekyll also offers build in support for SASS, SCSS, LESS and CoffeeScript.

Jekyll follows a naming conversion to differ a post or page. Jekyll knows a specific markdown file is a post when the file is formatted in YYYY-MM-DD-post-name.md, if a markdown file is formatted as name-of-page.md Jekyll knows it’s a page. You can always use a layout: string in the front-matter to select choose a specific layout or template file to be used while parsing and building a Jekyll based Website.

{% for page in site.pages %}

{% if page.layout == "custom-page" %}

<a href="{{page.url}}">{{page.title}}</a>

{% endif %}

{% endfor %}

That is one way to list posts in Liquid. If you want to list a specific layout based page that follows the page naming convention but does not use the layout: as page, we can fix this issue by tweaking the code a bit by adding a if statement to it. We will be using the layout custom-page to separate the stock or default page layout. This small change in the code will list only those pages that use custom-page as layout.

Sitemap for Jekyll

Sitemap let’s search engine index your website and fetch url of your website to display it in the appropriate search result that they are going to be provide to their users for a specific search term, without a sitemap a website would not be indexed correctly and not all links to the website will be available in search results, this might become a reason why the website is viewed/visited in a very small number and has only some links, pages, posts are viewed by a visitor, Most Jekyll users prefer plugins to build their Sitemap and some plugins might take a good amount of system resource which might increase the time it takes to build your website source, Here is how to create a sitemap.xml file using simple Liquid for templating engine the default Jekyll templating language.

Create a sitemap.xml in your jekyll based website folder.

Now add this to your sitemap.xml that we have just created.

Now you can build your website.

jekyll build  

See you website in action.

jekyll serve  

Visit here.

Now we have a sitemap.xml for our website that can be submitted to the prefered search engine webmaster.

If you have any problem feel free to leave a comment below.

Deploy Jekyll using FTP

Jekyll is a blog aware static website generator, Jekyll is mostly used for serving GitHub Pages, You can also run your Jekyll based website on shared hosting, VPS, PAAS and many other hosting platforms. Most hosting platforms do not offer Git to deploy. Most platforms offer FTP and SFTP and sometimes FTP is the only way to transfer files into your server.

I am assuming that you already have Jekyll setup and your Jekyll website complete setup with the matter needed to be filled in the _config.yml.

We will be using Glynn a Rubygem that lets you deploy your Jekyll based website using FTP/SFTP.

Installing Glynn.

gem install glynn --no-ri --no-rdoc # sudo may be required depending on your user privilege.  

Once you have glynn installed you need to add the following to your _config.yml file

ftp_host: '< ftp hostname >'  
ftp_dir: '/your/path/website'  
ftp_passive: false

# optional
ftp_port: 21                  # default 21  
ftp_username: '< ftp username>'     # default read from stdin  

You can deploy your website by running glynn inside you Jekyll website. Glynn will read your _config.yml file and ask you for your ftp account password

glynn # Thats it.  

If prefer not entering your ftp account password every time you deploy your website, you can do that too. You can add the ftp account password as a string in the _config.yml

ftp_password: '< ftp account password >'  

Now Glynn won’t ask you for a password while deploying.

Done!

Jekyll on Raspberry Pi

Jekyll is a blog aware static website generator written in Ruby that converts Markdown files into static HTML files. It supports many Markdown interpreter here are some of them RDiscount , Maruku, Kramdown and RedCarpet. Jekyll stores its configuration in a ‘_config.yml’ file that contains information about how to built the static website and which module and plugins should be used, Jekyll is one of the most widely used static website generators. Jekyll is recommended due to its popularity and large community support and active development.

It also supports plugin to add more functionality and extensions that are not available by default, these plugins can be written in Ruby and can be placed under the ‘_plugins’ folder, The file must end with the ‘.rb’ extension. Any file placed under the ‘_plugins’ folder will be loaded before the website is generated.

It is available as a Ruby gem that installs with its dependencies, Jekyll is easy and fast in terms of usage and performance.

Here is how you can get Jekyll running on your Raspberry Pi. We will be compiling Ruby 2.1.2 using RVM, we also would be installing Node.js to avoid the ExecJS issue, I have chosen Node.js over the ‘TheRubyRacer’ gem because Node.js is faster more stable and installs in a shorter time than ‘TheRubyRacer’, If you want a pure Ruby based Jekyll setup you can skip the Node.js install step and go with ‘TheRubyRacer’ gem, It’s all based upon personal preference. The big reason why I am compiling Ruby is that I prefer the latest version of Ruby and compiling Ruby make Jekyll and other Ruby stuff, even more, faster due to adaptation to the CPU cycles. I highly recommend not to overclock you Raspberry Pi over 800 MHz as this process uses means of compiling and might cause damage if you don’t have a stable source of power supply.

I have used PiBang Linux Server Edition, but you can use Raspbian. PiBang Linux is based on Raspbian but it does not come with the extra educational software that Raspbian offers, PiBang Linux Server does not come with GUI or Xorg. I have used SSH to follow the instruction below.

Installing

We need to first install RVM on our Raspberry Pi.

\curl -sSL https://get.rvm.io | bash -s stable

Once RVM is installed we need to exit the terminal.

/bin/bash --logout

Now RVM can be executed.

We can now fetching dependencies needed to compile Ruby on Raspberry Pi. This command will ask you for your user password by default on Raspbian it’s.raspberrypi If you are I PiBang Linux user it depends on what you have set as the password while going through the setup screen, You have to enter the password of the user you what to log in as.

rvm requirements  

Once we have the build essential and the required packages for compiling Ruby on our Raspberry Pi, we can now install Ruby. ‘2.1.2’ is the current latest version of Ruby at the time of this post being published. Installation of Ruby will take a least 2 hours or more depending on the internet connection and clock speed.

rvm install 2.1.2 # installing Ruby  

Now that we have Ruby installed, we can now finally install Jekyll. By choosing not to install ‘ri and ‘rdoc’ we are saving time and avoiding to install thing we don’t require.

gem install jekyll --no-ri --no-rdoc  

To avoid the ‘ExeJS’ error we need to install Node.js on your Raspberry Pi. A precompiled version of Node.js is already available for the Raspberry Pi. You can install Node.js by reading this post. If you want to build Jekyll based website purely using Ruby you can install ‘TheRubyRacer’ gem. TheRubyRacer takes a lot of time to as it needs to build native extensions.

gem install therubyracer --no-ri --no-rdoc  

Now we can create our Jekyll project/website.

jekyll new website # jekyll new   

Now you can get into the directory.

cd website/  

Once you are in the directory you can start the Jekyll preview server.

jekyll serve  

You can now enter your Raspberry Pi IP address with the port set to ‘4000’ example.

http://192.168.1.2:4000  

You will get Jekyll running with its stock setup on your web browser.

You can edit the _config.yml and customize the website. You can read the It documentation and learn more about customization over here.

You can deploy your static website that we just created using ‘Glynn’ or ‘Git’, It depends all on you.

Now we have Jekyll installed on our Raspberry Pi. Thanks for reading and feel free to subscribe using RSS. If you have any problem feel free to leave a comment below.