๐Ÿ‘‹   For the most recent updated documentation, please check the online version  ๐Ÿ‘‰

Table of Contents

  1. Configurations
  2. Deployment
  3. Create Post
  4. Create Page
  5. Navigation
  6. Disqus Comments
  7. Google Analytics
  8. Social Media Links
  9. Credits

Configurations

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


title:              Nubia
logo:               # Logo image URL
description:        Thoughts, Stories and Ideas
baseurl:            '' # The subpath of your site, e.g. /blog
url:                'http://nubia-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:  11
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. Minimalist. I love creating clean and minimal websites.Technical writer at SitePoint.
    gravatar: https://s.gravatar.com/avatar/f83141edd9e6339e678648596a403fd5?s=150
    email:    info@aspirethemes.com
    website:  http://aspirethemes.com
    github:   https://github.com/aspirethemes
    twitter:  https://twitter.com/aspirethemes

Deployment

To install locally, more to the theme root and run bundle install to install the dependencies, then run jekyll serve to start the jekyll server.

I would recommend checking the Deployment methods page on Jekyll website.


Create Post

To create a new post, you can create a new markdown file inside the _posts directory, following the recommended file structure, these are the page configuration you can add.

The following is an example post file.


  ---
  layout: post
  title: Welcome to Jekyll!
  featured: true
  author: john
  tags: [python, ruby, java]
  image: '/images/posts/image.jpeg'
  ---

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

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

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


Create Page

To create a new page, just create a new markdown file inside the _pages directory, and these are the page configuration you can add.

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


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

Things you can change are: title, permalink, and image path.


The navigation on the header and footer will include all the links to the pages you have created.


Disqus Comments

Aspire Theme comes with Disqus comments enabled.

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


    s.src = '//aspirethemes-demo.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 what 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.


Google Analytics

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


Social media icons are placed in:

  • _includes/social-nav.html

The theme is using Evil Icon, which contains very simple and clean icons. Here you can find a list of the social media icons to use:

  • Twitter: <span data-icon="ei-sc-twitter" data-size="s"></span>
  • Facebook: <span data-icon="ei-sc-facebook" data-size="s"></span>
  • Instagram: <span data-icon="ei-sc-instagram" data-size="s"></span>
  • Pinterest: <span data-icon="ei-sc-pinterest" data-size="s"></span>
  • Vimeo: <span data-icon="ei-sc-vimeo" data-size="s"></span>
  • Google-plus: <span data-icon="ei-sc-google-plus" data-size="s"></span>
  • Soundcloud: <span data-icon="ei-sc-soundcloud" data-size="s"></span>
  • Tumblr: <span data-icon="ei-sc-tumblr" data-size="s"></span>
  • Youtube: <span data-icon="ei-sc-youtube" data-size="s"></span>

Credits

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


Go To Table of Contents