Back to Documentations

Aspire – Aspire

Theme version: 1.0.3 — 13 August 2018

Table of Contents

Configurations

Aspire theme comes with different customizations in the _config.yml file:

# Site settings
title:       Aspire
logo:        # Logo Image URL
description: Clean News & Magazine Jekyll Theme
baseurl:     '' # The subpath of your site, e.g. /blog
url:         https://aspire-jekyll.aspirethemes.com # The base hostname & protocol for your site
twitter:     https://twitter.com/aspirethemes
facebook:    https://www.facebook.com/aspirethemes
instagram:   https://www.instagram.com/aspirethemes

markdown:  kramdown
permalink: pretty
paginate:  9
sass:
  style: compressed

gems:
  - jekyll-paginate
  - jekyll/tagging

include:
  - _pages

exclude:
  - vendor
  - Gemfile
  - Gemfile.lock

# Tags
tag_page_dir:        tag
tag_page_layout:     tag_page
tag_permalink_style: pretty

# Pages path
defaults:
  - scope:
      path: '_pages'
    values:
      permalink: /:basename:output_ext

# Authors
authors:
  ahmad:
    name:     Ahmad Ajmi
    bio:      Author & developer of Aspire Themes
    gravatar: https://s.gravatar.com/avatar/f83141edd9e6339e678648596a403fd5?s=150
    email:    info@aspirethemes.com
    website:  https://aspirethemes.com
    github:   https://www.github.com/aspirethemes
    twitter:  https://twitter.com/aspirethemes

Deployment

To run the theme locally, navigate to the theme directory and run bundle install to install the dependencies, then run 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.

The following is a post file with different configurations you can add as an example:

---
layout: post
title: Welcome to Jekyll!
featured: true
author: ahmad
tags: [frontpage, jekyll, blog]
image: '/images/posts/welcome.jpg'
---

You can set the author, featured or not, tags, and the post image.

The featured key is to mark the post as a featured post, this will add a simple star icon (☆) to the post card.

featured-post

To keep things more organized, add post images to /images/posts directory, and add page images to /images/pages directory.

To create a draft post, create the post file under the _drafts directory, and you can find more information at Working with Drafts.

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).

As mentioned in the item page, there is a problem with tags when the site is deployed using GitHub Pages, as the tagging gem is not supported, but I managed to fix this by using Netlify for deployment, the code will be on GitHub or BitBucket as usual, it’s only one step to connect the repo and do the deployment, just a fantastic service I use for all of my Jekyll work. This post is a good start.

Pages

To create a new page, just create a new markdown file inside the _pages directory.

The following is the about.md file that you can find as an example included in the theme with the configurations you can set.

---
layout: page
title: About
image: '/images/pages/about.jpeg'
---

Things you can change are: title and image path.

Navigation will be visible in both header and footer. You can control and edit the navigation from the _data/navigation.yml data file. The current navigation links are:

- title: Home
  url: /
- title: About
  url: /about
- title: Style Guide
  url: /style-guide

You can add a title and a URL for each navigation item. For example, if you want to add a link to the contact page, you can append the following to the list.

- title: Contact
  url: /contact

Disqus Comments

Aspire Theme comes with Disqus comments enabled.

Open _includes/disqus.html file, and change the aspirethemes value on line 15 with your Disqus account shortname.

s.src = '//aspirethemes-demos.disqus.com/embed.js';

So, if your Disqus shortname is exampleone, the final code above should be

s.src = '//exampleone.disqus.com/embed.js';

That’s all you need to set up Disqus from the theme side. If you get any issue 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.

Twitter

To set up the Twitter feed:

  • Go to publish.twitter.com.
  • Enter a Twitter URL into the input box and press Enter.
  • Select Embedded Timeline.
  • You will see a Timeline preview and you can customize it as required.
  • Copy the code by clicking the Copy Code button.
  • Open _includes/sidebar/widget-twitter.html file and replace line 4 with the copied code.
  • Save and you are done.
 

Instagram

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:

Second, open the js/app.js file and replace the userId and accessToken values.

var instagramFeed = new Instafeed({
  get: 'user',
  limit: 9,
  resolution: 'thumbnail',
  userId: '',
  accessToken: ''
});

You can control how much images to show by changing the limit number. Theme default is set to 9 images.

MailChimp

Steps to integrate MailChimp newsletter subscription form:

  • Create a mailing list from your MailChimp account, fill all the fields required and save it.
  • From the mailing list page, select Signup forms, then select Embedded forms.
  • Under the preview section, you will find the mailing form code. You will only need the form action value, like the highlighted code in the image below.

mailchimp-code

  • Copy that code and replace it with the current form action value located in _includes/subscribe-form.html file.

mailchimp-code

You are done.

Google Analytics

To integrate Google Analytics, open _includes/analytics.html, and add your Google Analytics code.

Social Media Icons

Social media links are placed in:

  • _includes/social-nav.html
  • _includes/sidebar/widget-social.html
  • _includes/footer.html

The theme is using Evil Icons, which contains very simple and clean icons. The following is a list of the social media icons to use:

Available Social Media Icons

The theme uses Evil Icons to provide simple and clean icons for other social accounts. Here you can find a list of the social media icons to use:

Facebook

<span data-icon='ei-sc-facebook' data-size='s'></span>

GitHub

<span data-icon='ei-sc-github' data-size='s'></span>

Instagram

<span data-icon='ei-sc-instagram' data-size='s'></span>

LinkedIn

<span data-icon='ei-sc-linkedin' data-size='s'></span>

Odnoklassniki

<span data-icon='ei-sc-odnoklassniki' data-size='s'></span>

Pinterest

<span data-icon='ei-sc-pinterest' data-size='s'></span>

Skype

<span data-icon='ei-sc-skype' data-size='s'></span>

SoundCloud

<span data-icon='ei-sc-soundcloud' data-size='s'></span>

Telegram

<span data-icon='ei-sc-telegram' data-size='s'></span>

Tumblr

<span data-icon='ei-sc-tumblr' data-size='s'></span>

Twitter

<span data-icon='ei-sc-twitter' data-size='s'></span>

Vimeo

<span data-icon='ei-sc-vimeo' data-size='s'></span>

VK

<span data-icon='ei-sc-vk' data-size='s'></span>

Youtube

<span data-icon='ei-sc-youtube' data-size='s'></span>

Update favicon

You can find the current favicon (favicon.ico) inside the theme root directory, just replace it with your new favicon.

Your feedback is very welcome ♥

I’m open to your feedback and hear your experience about my themes and work. If you have a few minutes, please send your thoughts through this Google Form.

Thank you for your time!

Support

Have any questions? I’m here to help.

Contact Ahmad
Ahmad Ajmi