Table of Contents
- Configurations
- Deployment
- Create Post
- Create Page
- Navigation
- Disqus Comments
- Google Analytics
- Social Media Links
- 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.
Navigation
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 Links
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.
- Evil Icons
- FitVids.js
- jekyll/tagging
- Preview Images form unsplash.com & pexels.com