A Jekyll template built with Bootstrap 4 suitable for bloggers. Highly inspired by Medium's website layout. Suiable for blogging, collections, resources, reviews websites.
Features
- Built for Jekyll
- Compatible with Github pages
- Featured Posts
- Index Pagination
- SEO
- Feed
- Sitemap
- Post Share
- Post Categories
- Prev/Next Link
- Category Archives (Compatible with Github pages)
- Jumbotron Categories
- Post Reviews with Stars
- Blurred Spoilers
- Table of Content
- Lazy Load Images
- Integrations:
- Disqus Comments
- Google Analaytics
- Mailchimp Integration
- Adsense
- Design Features:
- Bootstrap v4.x
- Font Awesome
- Masonry
- Layouts:
- Default
- Post
- Page
- Archive
- Categories (for 100% compatibility with Github pages)
What’s Jekyll
If you aren’t familiar with Jekyll yet, you should know that it is a static site generator. It will transform your plain text into static websites and blogs. No more databases, slow loading websites, risk of being hacked…just your content. And not only that, with Jekyll you get free hosting with GitHub Pages! If you are a beginner we recommend you start with Jekyll’s Docs. Now, if you know how to use Jekyll, let’s move on to using this theme in Jekyll:
How to use “Mediumish” theme
- Download or
git clone https://github.com/wowthemesnet/mediumish-theme-jekyll.git
From the rood of your downloaded/cloned folder, open your terminal and install:
gem install bundler
Then:
bundle install
Edit _config.yml options. If your site is in root: baseurl: ''. Also, change your Google Analytics code, disqus username, authors, Mailchimp list etc.
Again, from your terminal:
bundle exec jekyll serve --watch
You should be able to see your Jekyll project now, at the address provided in terminal.
Start populating your blog by adding your .md files in _posts. Mediumish already has a few examples.
YAML front matter options:
- featured post -
featured:true - exclude featured post from “All stories” loop to avoid duplicated posts -
hidden:true - post image -
image: assets/images/mypic.jpg - external post image -
image: "https://externalwebsite.com/image4.jpg" - page comments -
comments:true - meta description (optional) -
description: "this is my meta description"
YAML Post Example:
---
layout: post
title: "We all wait for summer"
author: john
categories: [ Jekyll, tutorial ]
image: assets/images/5.jpg
description: "Something about this post here"
---
YAML Page Example
---
layout: page
title: Mediumish Template for Jekyll
comments: true
---
Rating
---
layout: post
title: "We all wait for summer"
author: john
categories: [ Jekyll, tutorial ]
image: assets/images/5.jpg
description: "Something about this post here"
rating: 4.5
---
Adsense
Enable this option by editing _config.yml.
# Adsense (change to "enabled" to activate, also your client id and ad slot. Create a new ad unit from your Adsense account to get the slot.)
adsense: "disabled"
adsense-data-ad-client: "ca-pub-3412143450191416"
adsense-data-ad-slot: "1363087678"
Lazy Load Images
Enable this option by editing _config.yml.
# Lazy Images ("enabled" or "disabled")
lazyimages: "enabled"
Table of Contents
Add toc:true on your post YAML.
---
layout: post
title: "Education must also train one for quick, resolute and effective thinking."
author: john
categories: [ Jekyll, tutorial ]
image: assets/images/3.jpg
beforetoc: "Markdown editor is a very powerful thing. In this article I'm going to show you what you can actually do with it, some tricks and tips while editing your post."
toc: true
---
beforetoc adds a paragraph before the TOC is displayed. Demo
