Table of Contents

  1. Theme Information
    1. Key Features
    2. Theme Structure
  2. Installation
    1. Method One
    2. Method Two
  3. Theme Configuration
    1. Author Information
    2. Sidebar Configuration
    3. Social Links
  4. Other Theme Options
    1. Favicon
    2. 404 Page
    3. Images
    4. Site Navigation
  5. Support
  6. Updates
  7. Credits

A. Theme Information

  • Name: BlogInn
  • Description: Responsive, bold & minimal Jekyll theme
  • Current Version: 1.0.1
  • Released: 07/04/2016
  • Creator: JustGoodThemes.com
  • Jekyll version: 3.1.2

1. Key Features

  • Mobile first & fully responsive (wide, normal, narrow, mobile)
  • Retina display ready – all icons are optimized for retina devices
  • Clean, well commented code, easy to customize
  • Author information
  • Tag page support
  • Code syntax highlighter
  • Disqus commenting
  • Sharing post integration
  • Social media icons
  • Tag cloud and latest posts widgets
  • Regular theme updates

2. Theme Structure

Here's an overview of the theme file structure.

.
├── _config.yml
├── _includes
│   ├── disqus.html
│   ├── footer.html
│   ├── image_caption.html
│   ├── image_full.html
│   └── sidebar.html
├── _layouts
│   ├── default.html
│   ├── page.html
│   └── post.html
├── _posts
│   ├── 2016-03-01-the-advantages-and-disadvantages-of-working-from-home.md
│   ├── 2016-03-02-set-up-your-new-iphone-6-the-Right-Way.md
│   ├── 2016-03-19-basic-rules-for-walking-in-the-mountains.md
│   ├── 2016-03-22-a-week-with-the-apple-watch.md
│   └── 2016-03-23-Graphic-Designer-On-The-Road.md
├── _sass
│   ├── _general.scss
│   ├── _icons.scss
│   ├── _reset.scss
│   └── _variables.scss
├── _site
├── css
│   └── main.scss
├── fonts
│   ├── fontawesome.eot
│   ├── fontawesome.svg
│   ├── fontawesome.ttf
│   └── fontawesome.woff
├── images
│   ├── 404.jpg
│   ├── aboutPage.jpg
│   ├── authorimage.png
│   ├── banner.jpg
│   └── posts
│       ├── Apple-Watch-In-Car.jpg
│       ├── Apple-Watch.jpg
│       ├── Desk.jpg
│       ├── Mountain.jpg
│       ├── Mountain2.jpg
│       ├── design.jpg
│       ├── iPhone-6.jpg
│       ├── iPhone-In-Hand.jpg
│       └── road.jpg
├── js
│   ├── custom.js
│   └── plugins.js
└── tags
    └── index.html
├── about.md
├── style-guide.md
├── 404.md
├── favicon.ico
├── feed.xml
├── index.html

The following guide assumes you have some knowledge of the Jekyll platform, including setting up of its prerequisites and a suitable server environment. Further information on this can be found in the official Jekyll Documentation.

B. Installation - top

Sites built using Jekyll can be deployed in a large number of ways due to the static nature of the generated output. A few of the most common deployment methods are described below.

Method One

  • Login to your hosting environment via (S)FTP, or preferred file transfer method.
  • Navigate to the directory you wish to install the blog. If you have an already existing Jekyll install, it's recommended to start a new blog, and transfer the files over to the new install.
  • Copy the contents of 'bloginn' into the newly created directory.
  • Edit the _config.yml file. More information on the available options can be found in the Customization section of this document.
  • Using SSH, run jekyll serve within the directory.

Method Two

Just about any traditional web hosting provider will let you upload files to their servers over FTP. To upload a Jekyll site to a web host using FTP, simply run the jekyll build command and copy the generated _site folder to the root folder of your hosting account. This is most likely to be the httpdocs or public_html folder on most hosting providers.

C. Theme Configuration - top

These options can be found within the _config.yml file. More information about Jekyll configuration can be found in the Jekyll documentation.

  • title - the title of your blog, shown in the page and description areas.
  • description - a description of your site for social meta tag, search engines, and feed.xml.
  • tagline - a tagline shown next to the site title.
  • baseurl - the subpath of your site, e.g. /blog, for generating urls. If baseurl is set, you will need to prepend the baseurl to these settings: author image, site navigation, post images.
  • url - the base hostname and protocol of your site for where absolute urls are needed.
  • disqus - your Disqus shortname. Enter the Disqus shortname here if you wish to have Disqus comments enabled, leave blank to disable comments.
  • paginate - the option responsible for posts per page count.

Author information

  • author_name - name of the post/blog author.
  • author_bio - author biography which is shown at the bottom of each post.
  • author_url - URL of the author website.
  • author_location - author location e.g. London, UK.
  • author_image - author profile image, shown at the bottom of each post. Author image can be found in bloginn/images/authorimage.jpg location.

Sidebar Configuration

Ad Banner

  • banner_url - the banner URL.
  • banner_image - the banner image path. Banner image can be found in bloginn/images/banner.jpg location.

Newsletter Signup

  • mailchimp_url - your form action URL for MailChimp newsletter signup form.

To enable social links in the footer simply enter your social profile username, for example twitter_username: "justgoodthemes" . If a field is left blank, the social icon will not be shown.

  • twitter_username
  • facebook_username
  • googleplus_username
  • github_username
  • codepen_username
  • dribbble_uername
  • medium_username
  • instagram_username
  • pinterest_username
  • linkedin_username

D. Other Theme Options - top

Favicon

To change the favicon, replace favicon.ico file located in the root folder of the theme.

404 page

The 404 page is located in the root folder of the theme. The image of this page is located in bloginn/images/404.jpg location.

Images

Images for pages are located in the bloginn/images folder and the images for posts are located in the bloginn/images/posts folder.

Image With Caption

Within your blog posts you can include captions for images. This requires using some HTML markup.

The example below illustrates how to include an image with a caption in a blog post:

{% include image_caption.html imageurl="/images/posts/Apple-Watch-In-Car.jpg" 
title="Apple Super" caption="supertest" %}

Add the following code into your post/page markdown and change its attributes accordingly.

Full Width Image With Caption

The example below shows how to include a full width image with a caption in a blog post:

{% include image_full.html imageurl="/images/posts/Apple-Watch-In-Car.jpg" 
title="Apple" caption="This is caption" %}

Add the following code into your post/page markdown and change its attributes accordingly.

Site navigation can be found in the _config.yml file. To add a page to site navigation simply add your new page in markdown format (e.g. newpage.md) in the theme root folder. Next edit your navigation menu located in _config.yml file on line 26. To add a new item in navigation you have to add the item name and url. For example:


    navigation:
    - text: New Page
      url: /newpage/

E. Support - top

The documentation included provides all the information needed to get the theme installed and customized. However, if you have any questions you can email us at justgoodthemes@gmail.com, and we will be happy to help you.

If you have any bug reports, or feature requests, please let us know!

F. Updates - top

We’re dedicated to keeping our BlogInn Jekyll theme up to date.

G. Credits - top

We have used the following scripts, fonts or other files as listed.

Go To Table of Contents