SO, Basically, we have very easy three steps to import theme in any Jekyll project.
STEP:1 Add this lines of code in YOUR Gemfile. (so just copy it and paste it on your gemfile)
GEMFILE ->
source "https://rubygems.org"
gem "jekyll", "~> 3.9.0" // JEKYLL VERSION SHOULD BE SAME
gem 'best-blogging-theme', '~> 0.1.2' //THEME NAME SHOULD BE SAME, BUT VERSION WILL BE CHANGED AFTER LATEST UPDATE, SO PLEASE FOLLOW OUR RUBY GEMS: https://rubygems.org/gems/best-blogging-theme, WHERE YOU CAN CHECK IN WHICH LATEST VERSION RUNNING IN THE THEME.
gem "kramdown-parser-gfm" // THIS WILL BE SAME
FOLLOWING PLUGINS ARE ALSO REQUIRED:
group :jekyll_plugins do gem "jekyll-feed" gem "jekyll-sitemap" gem "jekyll-include-cache" gem 'jekyll-paginate' end
STEP: 2 Also add this line of code in _config.yml. (so just copy it and paste it on your _config.yml)
permalink: /blog/:title // IF YOU ARE SERVE BLOG SITE LIKE, WWW.DOMAIN.COM THEN USE /title. // BUT IF YOU ARE SERVE BLOG SITE LIKE, WWW.DOMAIN.COM/BLOG THEN USE SAME AS GIVEN PERMALINK: /blog/title.
paginate: '12' // BY DEFAULT 12 BLOG POST IN SINGLE PAGE, IF YOU WANT TO CHANGE THEN CHANGE ACCORDILY. paginate_path: '/blog/page:num/' // PAGINATE-PATH DENOTE WHEN WE WENT ANOTHER BLOG PAGE, THOSE URL LIKE THAT, WWW.DOMAIN.COM/BLOG/PAGE1/, ALSO CAN CHANGE.
theme: best-blogging-theme //ENSURE THAT THEME NAME WILL BE SAME AS IN GEMFILE THEME NAME. IT IS MANDTARY ALSO IN CONFIG.YML FILE markdown: kramdown // IT WILL BE SAME .
when you paste all these things in your files. after that open terminal and write command: bundle install
ENSURE THAT, WHEN WE CHANGED THESE FILES. THEN WE NEED TO DELETE GEMFILE.LOCK AFTER THAT, HIT BUNDLE INSTALL PLEASE THIS WILL REQUIRED BEFORE HIT BUNDLE INSTALL.
STEP: 3 SO, AFTER BUNDLE INSTALL
-----------------------------------------------------
ALL THE DEPENDENCY HAS BEEN INSTALLED IN YOUR PROJECT.
------------------------------------------------------
----------------------------------------------
SUCCESFULLY THEME IMPORTED NOW IN YOUR PROJECT.
----------------------------------------------
Before blog layout use, I hope theme will be imported in your project successfully. If not then GO TO TOP:
WE HAVE FOLLOWING TWO BLOG LAYOUTS:
CREATE FILE FOR BLOG LAYOUT IN ROOT DIR:
OR ANYWHERE ITS DEPEND UPON YOU.
//ensure that file extention will be .html, if .md then i am sure that you blog post pagination won't works.
layout: blog title: BloggingSite //Title of blog
another example:
layout: blog title: BloggingSite //Title of blog
CREATE FILE FOR CATEGORIES LAYOUT IN ROOT DIR:
layout: categories title: BloggingSite Categories // TITLE OF BLOG Categories permalink: /categories
layout: categories title: BloggingSite Categories // TITLE OF BLOG Categories permalink: /blog/categories
THESE LAYOUTS DATA DRIVEN BY JSON DATA OR YML FILES, YOU IF YOU WANT CHANGE FOR EXAMPLE:
UNDER THESE FOLLOWING JSON OR YML FILES. YOU CAN CHANGE DATA ACOORDING ON YOUR PROJECT.
Manpreet: name: Manpreet singh image: /assets/images/manpreet.png bio: Author4 of Mediumish, a Bootstrap Medium styled template available for WordPress, HTML, Ghost and Jekyll. You are currently previewing Jekyll template demo. twitter: https://twitter.com/home
h1: Latest Posts from our Blog tagline: Best Blogging Site
// REMOVE --- END OF THE LINE, ITS NOT REQUIRED.
{ "navbarBrandText": "", //NAVTEXT LIKE "bloggingsite" "navbarBrandLogo": "/assets/images/bebo-logo.svg", //LOGO "navItems":[ { "name":"home", //navlinks "url":"/home" // navurl }, { "name":"blog", "url":"/blog" } ] }
you can add nav links according to your requirements.
Icons from https://fontawesome.com/
label: 'Share' platforms:
- type: Twitter icon: 'fab fa-twitter' link: 'https://twitter.com/intent/tweet?url=URL'
- type: Facebook icon: 'fab fa-facebook-square' link: 'https://www.facebook.com/sharer/sharer.php?u=URL'
- type: Linkedin icon: 'fab fa-linkedin' link: 'https://www.linkedin.com/sharing/share-offsite/?url=URL'
{ "footerMenu": { "color": "deepskyblue", "dropdown": [{ "categoryName":"Cricket Posts", "links": [ { "name": "blog1", "url":"/" }, { "name": "blog2", "url":"/" }, { "name": "blog3", "url":"/" } ] }, { "categoryName":"Latest Posts", "links": [ { "name": "blog1", "url":"/" }, { "name": "blog1", "url":"/" }, { "name": "blog1", "url":"/" }
]
},
{
"categoryName":"Website Name",
"links": [
{
"name": "Terms and conditions",
"url":"/"
},
{
"name": "Privacy Policy",
"url":"/"
},
{
"name": "Disclaimer",
"url":"/"
}
]
}
]
},
"socialIcon":[
{
"target": "_blank",
"href": "https://www.facebook.com/",
"i": "fab fa-facebook-square"
},
{
"target": "_blank",
"href": "https://twitter.com/",
"i": "fab fa-twitter-square"
},
{
"target": "_blank",
"href": "https://www.linkedin.com/",
"i": "fab fa-linkedin-in"
},
{
"target": "_blank",
"href": "https://github.com/",
"i": "fab fa-github"
},
{
"target": "_blank",
"href": "https://slack.com/intl/en-in/",
"i": "fab fa-slack"
}
]
}
sO, NOW YOU CAN DISQUSS COMMENT SYSTEM VERY EASILY IN YOUR PROJECT. FIRST, YOU NEED TO CREATE ACCOUNT ON DISQUSS LINK: https://disqus.com/ AFTER THAT, CREATE ACCOUNT AND SETUP COMMENT SYSTEM FOR WEBSITE.
AFTER, CREATING ACCOUNT FOR WEBSITE, DISQUSS GIVE YOU SHORTNAME : FOR EXAMPLE : MYSITE
JUST COPY THAT SHORTNAME AND PASTE IT IN CONFIG.YML. FOR EXAMPLE:
CONFIG.YML
disquss: shortname: yourshortname
after that you can see that comment system added to your website.
so now you can also change color of theme for ex:) footer color,socialicons,expore section etc. and also added google analtyics
you just need to put you google analatyics id in _config.yml for example look like- google_analytics: 'G-Your Id'
and also change the color in data driven files that we will provide in the top. now updated you can see that );;