Aspire – Aspire
Theme version:
1.0.3 — 13 August 2018
Table of Contents
- Configurations
- Deployment
- Posts
- Pages
- Navigation
- Disqus Comments
- MailChimp
- Google Analytics
- Social Media Icons
- Update favicon
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.
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
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.
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.
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: https://codeofaninja.com/tools/find-instagram-user-id/
- accessToken: instagram.pixelunion.net
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.
- Copy that code and replace it with the current form action value located in
_includes/subscribe-form.html
file.
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:
<span data-icon='ei-sc-facebook' data-size='s'></span>
GitHub
<span data-icon='ei-sc-github' data-size='s'></span>
<span data-icon='ei-sc-instagram' data-size='s'></span>
<span data-icon='ei-sc-linkedin' data-size='s'></span>
Odnoklassniki
<span data-icon='ei-sc-odnoklassniki' data-size='s'></span>
<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>
<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!
