Zolan - Modern & Minimal Theme for Jekyll
Zolan is a modern and minimal Jekyll theme for sharing your ideas.
Table of Contents
- Features
- Demo
- Deployment
- Posts
- Disqus Comments
- Google Analytics
- Update favicon
- Credits
- Support
Features
100% responsive and clean theme
Optimized for mobile devices
Minimal design
Valid HTML5 code
Post sharing
Subscription form
Supports Disqus Comments
Instagram Feed
Ionicons Icons
Google Fonts
Demo
Check the theme in action Demo
The post page would look like this:
Deployment
To run the theme locally, navigate to the theme directory and run bundle install
to install the dependencies, then run jekyll serve
or bundle exec jekyll serve
to start the Jekyll server.
I would recommend checking the Deployment Methods page on Jekyll website.
Posts
To create a new post, you can create a new markdown file inside the _posts directory by following the recommended file structure.
---
layout: post
title: Time to give gifts to everyone
date: 2018-08-23 16:04:00 +0300
image: 03.jpg
tags: Life
---
You can set the tags and the post image.
Add post images to /images/ directory.
For tags, try to not add space between two words, for example, Ruby on Rails
, could be something like (ruby-on-rails
, Ruby_on_Rails
, or Ruby-on-Rails
).
Disqus Comments
Zolan Theme comes with Disqus comments enabled.
Open _data/settings.yml
file, and change the mr-brown
value on line 26 with your Disqus account shortname.
Comment Section (Disqus)
disqus-identifier: mr-brown # Add your shortname for Disqus Comment. For example mr-brown
That’s all you need to setup Disqus from the theme side. If you get any issue regarding that comments are unable to load. First, make sure you have registered your website with Disqus (Step 1).
And also check Disqus troubleshooting guide if you still have issues.
The Instagram feed is working using Instafeed.js to show the photos.
First, you will need to get your account userId
and accessToken
from the following URLs:
- userId: http://codeofaninja.com/tools/find-instagram-user-id/
- accessToken: instagram.pixelunion.net
Second, open the js/common.js
file and replace the userId
and accessToken
values.
var instagramFeed = new Instafeed({
get: 'user',
limit: 6,
resolution: 'standard_resolution',
userId: '8987997106',
accessToken: '8987997106.924f677.8555ecbd52584f41b9b22ec1a16dafb9',
template: ''
});
Third, open the _data/settings.yml
file and replace the instafeed: false
on instafeed: true
value.
# Instagram Feed
instafeed: false # To enable the instafeed, use the value true. To turn off use the value false.
Google Analytics
To integrate Google Analytics, open _data/settings.yml
, and add your Google Analytics identifier.
# Google Analytics
google-analytics: # Add your identifier. For example UA-99631805-1
Update favicon
You can find the current favicon (favicon.ico) inside the theme root directory, just replace it with your new favicon.
Credits
I have used the following scripts, fonts or other files as listed.
- Google Fonts (Roboto, Sans Serif).
- Ionicons Icons
- FitVids.js
- Medium’s Image Zoom
- Instafeed.js
- jQuery.com
- Preview Images form unsplash.com, pexels.com
License
Mit License
Support
If you like the themes that I create you can become my sponsor on Patreon.
Thank you for your support ❤️