Installation
Once you receive the download.zip file, extract it and serve it locally using bundle exec jekyll serve.
If you do not have bundler then delete the Gemfile and use jekyll serve. This should work as long as you have all the gems used in the theme.
If a gem is missing - let’s say jekyll-paginate is missing - you might see the following error.
Configuration file: /home/bryce/_repos/user/blackcurrant/_config.yml
Dependency Error: Yikes! It looks like you don't have jekyll-paginate or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- jekyll-paginate' If you run into trouble, you can find helpful resources at http://jekyllrb.com/help/!
jekyll 3.1.2 | Error: jekyll-paginate
In the above error code, you can clearly see that you are missing jekyll-paginate. You can solve this by installing the missing gem using the command
gem install jekyll-paginate
Configurations
Change the site settings in the yml file found in _data/settings.yml file.
title: Blackcurrant
description: Blackcurrant is a minimal theme to show off your skills online.
url: https://blackcurrant.jekyll-themes.com
Update few important third-party keys.
# Google Analytics Tracker
analytics: UA-XXXXXXXX-2 # Sign up with Google analytics and replace with your analytics ID
# Comments by Disqus # Sign up with Disqus to get your shortcode. Leave it blank if you do not want to run diqus code on the website.
disqus: webjeda-demo
Disable mathjax and chartjs if you are not using them.
# Mathjax setting
enable-mathjax: yes
# Charts
enable-chartjs: yes
Editing settings.yml or _config.yml can break your site. Be cautious about the indentation.
Color scheme
The color scheme for Blackcurrant Jekyll theme is set by _config.yml.
Here are a few values you might find by default.
color-scheme: '#1abc9c' # Green
# color-scheme: '#2693e6' # Blue
# color-scheme: '#987ce6' # Purple
# color-scheme: '#ea67a8' # Pink
# color-scheme: '#ec632b' # Orange
Remove the # of any color scheme and place it below all other color schemes. That should do it.
Menu
Menu items can be found in _data/settings.yml. You can change the menu title and link that you would like in the sidebar to appear.
# Menu items in the sidebar
# Use a maximum of 3 items
menu:
- title: Projects
link: /projects/
- title: Blog
link: /blog/
- title: Contact
link: /contact/
Once you edit the link, make sure you have the same permalink: /something/ in the page as well. For example, here Contact menu item has a link /contact/. If you open the contact.md file inside _pages directory, you will see that the permalink is set to /contact/.
Social share buttons
Social share buttons are also found in the settings.yml file. The icons are from font-awesome. Usually a font awesome icon code will be like this,
<i class="fa fa-quora" aria-hidden="true"></i>
We will be using only fa-quora part of the above code to configure the icons.
# Social icons in the sidebar
# use font awesome icon code in the 'icon:' value
social:
facebook:
icon: fa-facebook-square
link: https://facebook.com
twitter:
icon: fa-twitter
link: https://twitter.com
linkedin:
icon: fa-linkedin
link: https://linkedin.com
github:
icon: fa-github
link: https://github.com
Add or remove icons from this list and change the link: to appropriate social page.
Expertise section
Expertise is a bar graph with smooth animations displayed on the homepage. This can be customized according to your skills. Select the colors you choose to make it look attractive.
expertise:
- title: HTML5
level: 45
color: rgb(247, 205, 182)
- title: CSS3
level: 65
color: rgb(113, 178, 222)
- title: jQuery
level: 50
color: rgb(80, 185, 185)
- title: PHP
level: 40
color: rgb(124, 142, 222)
- title: WordPress
level: 75
color: rgb(160, 158, 158)
- title: SEO
level: 90
color: rgb(112, 195, 148)
- title: Photoshop
level: 70
color: rgb(230, 133, 172)