A free and open-source Jekyll theme. Based on Rohan Chandra type-theme with a few new features:
- Responsive design
- Portfolio page for your projects
- Tags compability
- Bootstrap : Get Bootstrap
- Search feature : Simple-Jekyll-Search
- Math Rendering : KateX
- Seo Tags : Jekyll-seo-tag
- Syntax Highlighting: Easily customable Base16
- Free of rights images from pexels
- Fork and clone the Type on Strap repo:
git clone https://github.com/Sylhare/Type-on-Strap.git
- Install Jekyll:
gem install jekyll
, check #1 if you have a problem. - Install the theme's dependencies:
bundle install
- Customize the theme
- Github Page: update
_config.yml
- Github Page: update
- Run the Jekyll server:
jekyll serve
Here are the main files of the template
jekyll-theme-basically-basic
โโโ _draft # To store your drafts, they won't be published on your site
โโโ _includes # theme includes
โโโ _layouts # theme layouts (see below for details)
โโโ _portofolio # collection of article to be populated in the portfolio page
โโโ _posts # Blog posts
โโโ _sass # Sass partials
โโโ assets
| โโโ js # theme javascript, Katex, jquery, bootstrap, jekyll search,
| โโโ css # isolated Bootstrap, font-awesome, katex and main css
| โโโ fonts # Font-Awesome, Glyphicon, and other fonts
| โโโ img # Images used for the template
โโโ pages
| โโโ 404.md # To be displayed when url is wrong
| โโโ about.md # About example page
| โโโ portfolio.html # Portfolio bootstrapped page
| โโโ search.html # Search page
| โโโ search.json # Specify the search target (page, post, collection)
โโโ _config.yml # sample configuration
โโโ index.html # sample home page (blog page paginated)
Open _config.yml
in a text editor to change most of the blog's settings.
If a variable in this document is marked as "optional", disable the feature by removing all text from the variable.
Configure Jekyll as your own blog or with a subpath in in _config.yml
:
Jekyll website without a subpath (such as a GitHub Pages website for a given username):
baseurl: ""
url: "https://username.github.io"
Jekyll website with subpath (like the Type on Strap demo page):
baseurl: "/sub-directory"
url: "https://username.github.io/"
Please configure this before using the theme.
Meta variables hold basic information about your Jekyll site which will be used throughout the site and as meta properties for search engines, browsers, and the site's RSS feed.
Change these variables in _config.yml
:
theme_settings:
title: My Jekyll Blog # Name of website
avatar: assets/img/triangular.svg # Path of avatar image, to be displayed in the theme's header
gravatar: f98....6bfc # MD5 hash of your email address
description: My blog posts # Short description, primarily used by search engines
Customize your site header/footer with these variables in _config.yml
:
theme_settings:
header_text: Welcome to my Jekyll blog
header_text_feature_image: assets/img/sample3.png
footer_text: Copyright 2017
Change localization string variables in _config.yml
.
English text used in the theme has been grouped so you can quickly translate the theme or change labels to suit your needs.
theme_settings:
str_follow_on: "Follow on"
str_rss_follow: "Follow RSS feed"
str_email: "Email"
str_next_post: "Next post"
str_previous_post: "Previous post"
str_next_page: "Next"
str_previous_page: "Prev"
str_continue_reading: "Continue reading"
str_javascript_required_disqus: "Please enable JavaScript to view comments."
Jekyll works with liquid tags usually represented by:
{{ liquid.tag | filter }}
These are useful to render your jekyll files. You can learn more about them on shopify's doc
Display the site's icon from Font Awesome in the footer. All icon variables should be your username enclosed in quotes (e.g. "username") in _config.yml
, except for the following variables:
theme_settings:
rss: true
email_address: [email protected]
linkedin: ttps://www.linkedin.com/in/FirstLast
stack_exchange: https://stackoverflow.com/users/0000/first-last
Optionally, if you have a Disqus account, you can show a comments section below each post.
To enable Disqus comments, add your Disqus shortname to your project's _config.yml
file:
theme_settings:
disqus_shortname: my_disqus_shortname
To enable Google Analytics, add your tracking ID
to _config.yml
like so:
theme_settings:
google_analytics: UA-NNNNNNNN-N
When KateX is set in _config.yml
:
theme_settings:
katex: true # to Enable it
You can then wrap math expressions with $$
signs in your posts and make sure you have set the katex
variable in _config.yml
to true
for math typesetting.
For inline math typesetting, type your math expression on the same line as your content. For example:
Type math within a sentence $$2x^2 + x + c$$ to display inline
For display math typesetting, type your math expression on a new line. For example:
$$
\bar{y} = {1 \over n} \sum_{i = 1}^{n}y_i
$$
Please refer to the Jekyll docs for writing posts. Non-standard features are documented below.
This are the basic features you can use with the post
layout.
---
layout: post
title: Hello World # Title of the page
subtitle: "This is a subtitle" # A subtitle can be displayed below your title
feature-img: "assets/img/sample.png" # Add a feature-image to the post
thumbnail: "assets/img/thumbnail/sample-th.png" # Add a thumbnail image on blog view
tags: [sample, markdown, html]
---
With thumbnail
, you can add a smaller image than the feature-img
. If you don't want/have a thumbnail you can still use the same image as the feature one.
The page layout have a bit more features explained here.
---
layout: page
title: "About"
subtitle: "This is a subtitle"
feature-img: "assets/img/sample.png"
permalink: /about.html # Set a permalink your your page
hide: true # Prevent the page title to appear in the navbar
tags: [sample, markdown, html]
---
The hide only hides your page from the navigation bar, it is however still generated and can be access through its link. Use the _draft
folder to keep files from being generated on your site.
This is the page layout modified to have bootstrap activated to format your content accordingly with the theme.
---
layout: bootstrap
---
This layout includes the head, navigation bar and footer around your content.
All feature pages besides the "home" one are stored in the page
folder, they will appear in the navigation bar unless you set Hide: true
in the front matter.
Here are the documentation for the other feature pages that can be added through _config.yml
.
This page is the used as the home page of the template (in the index.html
). It displays the list of article in _posts
.
You can use this layout in another page (adding a title to it will make it appear in the navigation bar).
Portfolio is a feature bootstrapped page that will take all the markdown/html files in the _portfolio
folder to create a 3x3 image portfolio matrix.
The portfolio page can be enable/disable in the navigation bar through the _config.yml
via:
# Scripts / Feature
portfolio: true
The search feature is based on Simple-Jekyll-search there is a search.json
file that will create a list of all of the site posts, pages and portfolios.
Then there's a search.js
displaying the formated results entered in the search.html
page.
The search page can be enable/disable in the navigation bar through the _config.yml
via:
# Scripts / Feature
search: true
Tags should be placed between []
in your post metadata. Seperate each tag with a comma. Tags are recommended for posts and portfolio items.
For example:
---
layout: post
title: Markdown and HTML
tags: [sample, markdown, html]
---
Tags are case sensitive
Tag_nAme
โtag_name
All the tags will be listed in tags.html
with a link toward the pages or posts.
The tags page can be enable/disable in the navigation bar through the _config.yml
via:
# Scripts / Feature
tags: true
You can use Type-on-strap as a gem. Checkout an example in the gem-demo branch. To make the feature pages available in from the gem I created them as layouts that can be invoked in the pages folder.
So if you're using the template as a theme, Make sure you have:
- A
index.html
file - The right
_config.yml
with the theme setting such astheme: type-on-strap
uncommented - The feature page included. (ex: as it is already in
pages
) - Some content ready in
_posts
and_portfolio
to be displayed
Now you can use any theme gem with github pages : 29/11/2017 Github Pages Broadcast