Category: Jekyll
Welcome to the category page. Here, you can find all of our posts we published over the years for a given category. On this page, posts in that particular category are listed in chronological order, from the newest posts at the top to the oldest posts at the bottom.
- Total number of categories: 25
- Available categories:
Jekyll 23
-
Add Hotjar tracking to a Jekyll website
![thumb]()
Hotjar allows you to understand what your websites visitors want, care about and do on your website by visually representing their clicks, taps and scrolling behavior - which are the strongest indicators of visitor motivation and desire. Such information can be very useful for deciding how best to deliver content. The Hotjar Tracking Code needs to be installed within our website in order to start collecting data. Below, I’ll explain how to add Hotjar Tracking Code to a Jekyll website hosted on GitHub Pages.
Continue reading → -
Add Google AdSense Matched content to a Jekyll website
![thumb]()
Google AdSense is a free and easy way to earn money by placing third-party advertisements on a website. Did you know that you can use Google AdSense to also show related posts in Jekyll? Yes, there is a feature called “Matched Content”, and it is 100% responsive (mobile-friendly). You also have the option to monetize this unit with relevant ads that are shown alongside your related posts. I decided to try this feature in action to add the related posts unit at the end of each blog post, just above the comments section. In this article, I will show you how to easily use Google AdSense Matched content to show related posts in Jekyll.
Continue reading → -
How to fix: jekyll | Error: undefined method 'to_i' for #<Date:
![thumb]()
After successfully installing the Jekyll Algolia Plugin (the gem
jekyll-algolia), I tried to push the content of my Jekyll website to an Algolia index. But when I run thejekyll algoliacommand it throws the following error message:$ bundle exec jekyll algolia Configuration file: /Users/arthur/sites/mywebsite/_config.yml Processing site... Extracting records... jekyll 3.6.2 | Error: undefined method `to_i' for #<Date: 2017-08-25 ((2457991j,0s,0n),+0s,2299161j)> Did you mean? to_time to_sContinue reading → -
How to fix: bundler: command not found: jekyll
![thumb]()
We can set up a local version of our Jekyll GitHub Pages website to preview our website before making the changes public. But after upgrading MacOS to version “High Sierra” on my MacBook, when I run the jekyll
bundle exec jekyll servecommand it throws the following error message:$ bundle exec jekyll serve bundler: command not found: jekyll Install missing gem executables with `bundle install`
Continue reading → -
How to fix: Your user account isn't allowed to install to the system RubyGems
![thumb]()
This happened to me after upgrading MacOS to version “High Sierra” on my MacBook. I cloned my application repository and went to execute a bundle install command, but it throws the following error message:
Continue reading → -
The problem with highlighting PHP code with Rouge
![thumb]()
By default Jekyll version 3, ships with Rouge syntax highlighter. It has built in support for syntax highlighting of over 100 languages. I’m using Rouge with fenced code blocks in markdown. But I noticed that in the case of PHP code, the highlighting does not work at all.
Continue reading → -
Jekyll + Bootstrap: Dynamic navigation bar with highlighting of the active element
![thumb]()
I love using Jekyll and Bootstrap to create static websites. Jekyll is pretty cool, but doesn’t have really much helper utils to get common tasks done well and fast. In building a website powered by Jekyll, I want to have ability to create a dynamic navigation bar with highlighting of the active element in the bar. I also wanted the bar to support the second level elements (i.e. Bootstrap Dropdown menu). Since I don’t like hard coded HTML navigation links, I therefore worked out an alternative, configurable way. This is the solution I arrived at after a few hours of thinking and code writing.
Continue reading → -
How to fix: Jekyll build/serve error message
![thumb]()
We can set up a local version of our Jekyll GitHub Pages website to preview our website before making the changes public. But when I run the
Continue reading →jekyll [build | serve]command it throws the following error message: -
Making smart sticky elements by using a jQuery plugin
![thumb]()
Sometimes when I surfing the Internet I see the sticky elements that applied on website. Most often it’s a sticky ads that placed in sidebar. Sticky ad is an ad unit that stays in place while the page scrolls. Some are fixed completely when others (often placed at the end of sidebar content) scroll until they are in view then stay in a fixed position as the user scrolls further down the page.
Continue reading → -
Including the jQuery library to website
![thumb]()
In addition to custom JavaScript files many developers find jQuery useful. jQuery is the most popular JavaScript library available that allows developers to easily and quickly add enhancements to the appearance and behaviors of their projects. So developers can perform common JavaScript functions while using less code.
Continue reading → -
Social Media Share Bar for Jekyll blog/website
![thumb]()
Allowing users to share your articles on social media is a common blog/website feature. More share is equal to more eyeballs on your article. Shares will drive traffic to your blog/website and sometimes it may go viral. But, if you read a lot over the internet then you know how hard it is to share an interesting article with your friends if it doesn’t have a share buttons, so it is necessary to provide an option to share. In this article I show you how I added the social media share bar widget to this Jekyll website.
Continue reading → -
Exclude Pages from Navigation Menu in Jekyll
![thumb]()
My Jekyll based website have a small number of first-tier pages that I would like to display in the navigation menu, but I also have some second-tier pages that I would like to not junk up the navigation menu. There are many ways to exclude pages from the navigation menu in Jekyll, but I’m trying to avoid using plugins, because I believe that the simplest solution is to just exclude second-tier pages from the navigation menu entirely. One quick and easy way I found is to simply harness the power of Jekyll’s Front-matter for any page I want to exclude. It’s a simple two-step process.
Continue reading → -
Adding an email subscription form to your blog by using Feedburner
![thumb]()
A great way to keep up to date with a blog that you love to follow is to subscribe to an email subscription of their posts. That way, when a new post is made, it lands right in your email inbox. If you want to offer this to people who visit your blog, it is easy to do. In this article I show you how to add to your blog an email subscription form that connected to Feedburner.
Continue reading → -
Adding an email subscription button to your blog by using Feedburner
![thumb]()
A great way to keep up to date with a blog that you love to follow is to subscribe to an email subscription of their posts. That way, when a new post is made, it lands right in your email inbox. If you want to offer this to people who visit your blog, it is easy to do. In this article I show you how to add to your blog an email subscription button that connected to Feedburner.
Continue reading → -
Adding a comment count to your blog with Disqus
![thumb]()
Most blog owners that uses the Disqus comments system want to display the comment count for each page with comments, on their home page. Luckily Disqus has built in support for comment count. The setup isn’t difficult, but does require a bit of theme editing.
Continue reading → -
Replace the Rouge highlighter with Prism.js in Jekyll
![thumb]()
By default Jekyll 3, ships with Rouge syntax highlighter. But for some reasons you may want to replace it with Prism.js syntax highlighter. Prism.js is a very lightweight JavaScript library to provide code highlighting on websites. In this article I will show you how to set up it on Jekyll-based website.
Continue reading → -
Disable the Rouge - Jekyll's default syntax highlighter
![thumb]()
By default Jekyll version 3, ships with Rouge syntax highlighter. For some reason, you may want to disable it. For example, if you replace the built-in Rouge to another syntax highlighter such as Prism.js or your own custom highlighter.
Continue reading → -
Fixing the Jekyll + GitHub Metadata warning
![thumb]()
We can set up a local version of our Jekyll GitHub Pages website to preview our website before making the changes public. But when I run the
jekyll servecommand it throws the following error message:GitHub Metadata: No GitHub API authentication could be found. Some fields may be missing or have incorrect data.
Continue reading → -
Syntax Highlighting in Jekyll
![thumb]()
Jekyll has built in support for Syntax Highlighting of over 100 languages. You can have code snippets highlighted so that they are easier to read on your GitHub Pages website. In this post I will show you how you can integrate Rouge into your Jekyll setup.
Continue reading → -
Integrate Flatr button to Jekyll website
![thumb]()
Flattr is a free and easy way to earn money from blog posts. My Github hosted Jekyll website is being used primarily as a blog as you can see. By placing a small Flattr button at the end of each blog post, just above the comments section, I can ensure that visitors of my blog have an opportunity to thank me for the article. In this article, I will show you how to easily use Flattr to show “Thanks” button in Jekyll.
Continue reading → -
Jekyll post not showing up
![thumb]()
Some time ago I was faced with such a problem. I have tried to add a new post to my Jekyll website, but I could not see it on the generated pages when I run jekyll serve. So what are the some common reasons for a Jekyll post to not be generated?
Continue reading → -
Add Google Analytics to a Jekyll website
![thumb]()
Google Analytics allows you to get information about your websites visitors such as the devices or OS they were using and their location. Such information can be very useful for deciding how best to deliver content. Below, I’ll explain how to set up a Google Analytics on Github website that is built using Jekyll.
Continue reading → -
Add Google AdSense to a Jekyll website
![thumb]()
Google AdSense is a free and easy way to earn money by placing third-party advertisements on a website. My Github hosted Jekyll website is being used primarily as a blog as you can see, so I wanted to host an advertisement at the end of each blog post, just above the comments section. In this article, I will show you how to easily use Google AdSense to show advertisements in Jekyll.
Continue reading →
