jorigamy.github.io
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.ymlfile)
(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.
Advantages
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
canonical:
img:
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
SimpleParallax
To use parallax effect more info at SimpleParallax website
<img class="simple-parallax-down" src="path">
# in markdown
{:.simple-parallax}
<img class="simple-parallax" src="path">
Animate.css
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}
Popmotion
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
Prism.js
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: http://prismjs.com/
To do
- deploy to Netlify button
- deploy to cloudcannon
- use https://cdnjs.com/ to load js/css componets
- implement https://statically.io/ loading
- deploy to heroku button
- Expand wiki
- Add maichimp api in config.yml file
- Configure pagination (never be able to install jekyll-paginate plugin don't works)
-
Make a branch for fully compatibility with https://www.siteleaf.com/(cancelled: siteleaf don't provide a free forever plan) - Implement https://popmotion.io/
- Check out how to create a gem to implement quickly the theme
- Implement Google custom search https://cse.google.com/cse/
- Implement prism.js from http://prismjs.com/
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
- https://cloudinary.com for hosting eavy images
- https://ezgif.com/optimize for gif optimization
- http://www.gradient-scanner.com/ for image gradient analisys
- https://grahammacphee.com for creating some gifs
- https://proofleads.com/ for the free social proof script
- https://namecheap.com for premium domains name
Special thanks
- @antoniotrento to make all the theme for Jekyll
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 jorigamy.github.io 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: https://github.com/jorigamy/jorigamy.github.io
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: https://github.com/jorigamy/jorigamy.github.io 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.
