Jekyll HMFAYSAL Theme
Project name: Jekyll HMFAYSAL THEME
Author: Hossain Mohd. Faysal
Project type: A Bold Theme for Jekyll
License: GNU GPL V2
Jekyll HMFAYSAL is a minimal, bold, responsive theme for your Jekyll powered blog. This theme powers Hossain Mohd Faysal's blog http://www.theevilgenius.tk/. It is based on Minimal Mistakes Theme -- by designer slash illustrator Michael Rose.
The theme features:
- A bold look, perfect for bloggers.
- Responsive Circular Navigation uses CSS3 transforms for better performance in mobile devices.
- Responsive layout. Looking good on mobile, tablet, and desktop.
- Gracefully degrading in older browsers. Compatible with Internet Explorer 9+ and all modern browsers.
- Minimal embellishments and subtle animations.
- Readable typography to make your words shine. (Uses Electrolize and Abel from Adobe Edgefont)
- Support for large images to call out your favorite posts.
- Disqus comments if you choose to enable.
- Simple and clear permalink structure.
- Calculation of post read-time based on word count.
- Tags for Open Graph and Twitter Cards for a better social sharing experience.
- Vanilla custom 404 page to get you started.
- Stylesheets for Pygments, Coderay and Highlight.Js to make your code examples look snazzy.
- Simple search that overlays results based on post title.
- Grunt build script for easier theme development.
- Sitemap for search engines
Basic Setup for new Jekyll site
- Install Jekyll and read through the documentation if you haven't already.
- Fork the Jekyll HMFAYSAL Theme
- Clone the repo you just forked.
- Edit
_config.ymlto personalize your site. - Check out the sample posts in
_poststo see examples for pulling in large feature images, assigning categories and tags, and other YAML data. - Read the documentation below for further customization pointers and documentation.
Pro-tip: Delete the gh-pages branch after cloning and start fresh by branching off master. There is a bunch of garbage in gh-pages used for the theme's demo site that I'm guessing you don't want on your site.
Setup for Existing Jekyll site
- Clone the following folders:
_includes,_layouts,plugins,assets, andimages. - Clone the following files and personalize content as need:
about.md,technical-details.md,index.html,categories.html,tags.html,feed.xml, andsitemap.xml. - Set the following variables in your
config.ymlfile:
title: Site Title
description: Site description for the metas.
logo: site-logo.png
disqus_shortname: shortname
search: true
#Comment out url when working locally to resolve base urls correctly
url: http://whatever.com
cdn: http://cdn.whatever.com
# Owner/author information
owner:
name: Your Name
avatar: your-photo.jpg
email: [email protected]
signoff_text: Till next time
signoff_link: http://localhost:4000/about
signature_image: signature.png
# Social networking links used in footer. Update and remove as you like.
# To register at HMFAYSAL SOCIAL, visit http://social.hmfaysal.tk
twitter:
facebook:
github:
linkedin:
instagram:
tumblr:
hmfaysalsocial:
# For Google Authorship https://plus.google.com/authorship
google_plus: "http://plus.google.com/123123123123132123"
# Analytics and webmaster tools stuff goes here
google_analytics:
google_verify:
# https://ssl.bing.com/webmaster/configure/verify/ownership Option 2 content= goes here
bing_verify:
# Links to include in top navigation
# For external links add external: true
links:
- title: T-Details
url: /technical-details
- title: Tags
url: /tags
- title: Categories
url: /categories
- title: Blog
url: /
external: false
- title: About
url: /about
# http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
timezone: America/New_York
future: true
pygments: false
highlight_js: true
markdown: kramdown
paginate: 4
paginate_path: "page:num"
# https://github.com/mojombo/jekyll/wiki/Permalinks
permalink: /:categories/:title
Post Front Matter YAML
A new post should have the following structure to utilise the themes functions
---
layout: post
title: "Some Title" # Title of the post
description: Some description # Description of the post, used for Facebook Opengraph & Twitter
headline: Some headline # Will appear in bold letters on top of the post
modified: YYYY-MM-DD # Date
category: personal
tags: []
image:
feature: some-image.jpg
location: Some place
locationlink: http://somewebsite.com/some-place
credit: Some guy
creditlink: http://someguy.com
comments: true
---
Folder Structure
Jekyll-HMFAYSAL-theme/
├───assets
│ ├───css
│ │ main.min.css
│ │
│ ├───fonts
│ │ fontawesome-webfont.eot
│ │ fontawesome-webfont.svg
│ │ fontawesome-webfont.ttf
│ │ fontawesome-webfont.woff
│ │ FontAwesome.otf
│ │
│ ├───js
│ │ │ highlight.js
│ │ │ modernizr-2.6.2.min.js
│ │ │ polyfills.js
│ │ │ scripts.min.js
│ │ │
│ │ ├───plugins
│ │ │ jquery.fitvids.js
│ │ │ jquery.magnific-popup.js
│ │ │ respond.js
│ │ │ simpleJekyllSearch.js
│ │ │
│ │ └───vendor
│ │ jquery-1.9.1.min.js
│ │
│ └───less
│ coderay.less
│ elements.less
│ font-awesome.less
│ forms.less
│ grid.less
│ main.less
│ mixins.less
│ page.less
│ pygments.less
│ reset.less
│ site.less
│ typography.less
│ variables.less
│
├───images
│
├───_includes
│ browser-upgrade.html
│ disqus_comments.html
│ footer.html
│ head.html
│ navigation.html
│ scripts.html
│ signoff.html
│
├───_layouts
│ page.html
│ post.html
│
├───_plugins
│ pluralize.rb
│ read-time.rb
│
└───_posts
Questions?
Having a problem getting something to work or want to know why I setup something in a certain way? Ping me on Twitter @hmfaysal or file a GitHub Issue.
License
This theme is free and open source software, distributed under the GNU General Public License version 2 or later. So feel free to use this Jekyll theme on your site without linking back to me or using a disclaimer.
If you'd like to give me credit somewhere on your blog or tweet a shout out to @hmfaysal, that would be pretty sweet.
Warm Regards and Stay Creative,
Hossain Mohd. Faysal
