Jorigamy Jekyll Bootstrap4 theme for Github Pages

Jorigamy Jekyll template that use Bootstrap 4 Shards UI Kit with which you can create your website quickly and completely free.

When I say completely free I mean exactly free my friend! No hidden fees no marketing nothing at all!

It's a personal project that I also use to have free hosting on a for my websites and I want to share it with the web!

To use it you can:

  • Host on github pages (fork it and then edit your url and baseurl in the _config.yml file)
  • (simplest way, just click button connect github edit domain name, and done)

  • Or fork it, rename and then Deploy with cloudcannon (cloudcannon give you the possibility to use visual editor to edit your blog posts)

Are not you good at doing these things alone? Try following the installation guide on the jorigamy wiki and feel free to open a new issue or request if you think is necessary.

The advantages of Jorigamy

Jorigamy is not a structured and easily expandable CMS like wordpress, keep it in mind.

Jorigamy is a professional and fast alternative to have a landing page generator for your marketing or a website with a personal blog.


  • The main advantage for this type of tool is that it is completely free, at most you might think about buying the domain name for marketing purposes.

  • In addition, using bootstrap, most front end developers will know the tool and will be at ease, you will also have a bit of weight with HTML5 and CSS3 to create your own web pages.

  • Finally, not least, the speed and responsiveness of the system that stands below, Github Pages, thanks to it your website Jekyll with Jorigamy theme will be a splinter:

Features inside

You can configure many of the feature of the theme from _config.yml file

What you can edit:

  • Google AD Sense
  • Google Analytics
  • Google tag manager
  • Google Optimize
  • Disqus comment system

There are three page layouts

  • post or half-post (used for jekyll posts with 1 or 2 column)
  • index (used for pages and index page)
  • signup (used for lead generation - you'll need to edit this part from the includes/themes/default-signup.html the mailchimp code)
  • gallery (enable the gallery layout to show your favourite photos)

Page template

For every post or page you'll can configure many option for every field that you'll insert in the template section at the top of the file:

layout: index # the type of layout (can be index, page, post, half-post, signup, gallery)
group: "navigation" # if the page/post will be display in the top menu
title: Home # Title, post/page
tagline: The awesome description
css: # load custom css from folder /assets/css/
js: # load custom css from folder /assets/js/
keywords: # header keywods
image: assets/images/shard-1-5x-3.png
custom-head: <meta name="theme-color" content="#0067F4" /> <!-- Load custom html code on the head of the site -->

Post Introduction

<!--more--> # except separator the post preview in the blog main page after this separator will not displayed

Bootstrap 4

The theme is supported by the bootstrap 4 framework, a new generation tool to create the frontend for your websites quickly and easily.

Find out everything you need to know about Bootstrap by reading its documentation


To use parallax effect more info at SimpleParallax website

<img class="simple-parallax-down" src="path">

# in markdown

<img class="simple-parallax" src="path">


This theme is equipped with Animate.css to create simple and quick animations

Class Name
bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp

Full example:

<h1 class="animated infinite bounce">Example</h1>
<h1 class="animated bounce">Example</h1>

Markdown sample

# Example{:.animated .infinite .bounce}


I implemented a javascript library that allows you to create animations quickly and easily. In order to use it you should know a bit of Javascript and read the documentation


A javascript library to quickly create portions of code and share them on your web pages with an excellent highlighter code.

Visit documentation to understad how to use it:

To do

Say thanks

I thank all the people who support or supported the project.

Everyone, through his github account is mentioned below:

@antoniotrento, @docotordeep helps the project to reserve a place

Special thanks

layout: index title: Home tagline: css: js: bg-color.js keywords: canonical: img: image: assets/images/shard-1-5x-3.png custom-head:

layout: page title: Blog tagline: All the posts of theme. group: "navigation" tags : author : Antonio Trento css: js: keywords: img: image: assets/images/antonio-trento-logo-social.jpg floating: shard-1-5x-3.png btn-icon: fa-github btn-text: fork btn-link:

layout: post title: "2011 Welcome to Jekyll!" tagline: "Hello world from a new Jekyll blog" date: 2011-11-08 22:43:35 +0100 categories: jekyll update tags: [ jekyll, update ] img: 1.jpg image: assets/images/1.jpg floating: shard-1-5x-3.png btn-icon: fa-github btn-text: fork btn-link: locker: "yes" locker-content: "

With the secret you'll can metamorph into a new generation web ninja

Testing the locker

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

" locker-header: "Discover The secrets and became a web ninja" locker-description: "Discover The secrets and became a web ninja" facebook-locker: "" locker-tweet-url: "" locker-tweet-text: "This is the text of the tweet" locker-tweet-via: "lantoniotrento" locker-linkedin: ""