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/avocado/_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 main details in the _config.yml file.
title: Avocado
description: Avacado is a minimal jekyll theme to show off your skills online.
email: [email protected] # The contact form submission will be done to this email address.
phone: +1-123-456-7890
url: https://avocado.jekyll-themes.com
default-image: /assets/images/avocado-cover.png # This image will be shown on sharing any page on social media. For example Homepage, about page, etc. This image should be bigger than 200x200px. This image is not used for posts. Posts use their own image mentioned in individual posts.
Update a few important third-party keys.
# Google Analytics Tracker
analytics: UA-XXXXXXXX-2 # Sign up with Google analytics and replace with your analytics ID
#Tawk.to integration
tawkto-id: 5cb170e9c1fe2560f3fea30c # Sign up with tawk.to and go to Admin >> Property settings and replace the Site ID here
# Tidio chat script
# Signup with tidio.com and navigate to https://www.tidio.com/panel/channels/widget/integration to find your chat script
tidio-chat-script: '<script src="//code.tidio.co/atcbwe5jq0ftiidebmmfwybifnf.js" async></script>'
# 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 _config.yml can break your site. Be cautious about the indentation.
Color scheme
Color scheme for Avocado theme is set by main.scss. You can find this file in /assets/css/ directory.
Here are a few values you might find in this file.
@charset "utf-8";
$base-ff: 'Work Sans', sans-serif;
$head-ff: 'Work Sans', sans-serif;
$system-ff: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
$base-fs: 18px;
$base-fw: 400;
$small-fs: $base-fs * 0.775;
$base-lh: 1.6;
$color: #444;
$h-color: #eee;
$grey-color: #828282;
$grey-color-light: lighten($grey-color, 40%);
$grey-color-dark: darken($grey-color, 25%);
$brand-color: #83ce2c;
The last value is what the website color scheme is. Change it to any suitable color and the whole website color scheme will change accordingly.
Website sections
All the sections in the Avocado homepage are in _data directory. Here is a screenshot of what you will find inside.
For example, nav.yml has the following data inside.
- title: Home
link: '/'
- title: About
link: '/about/'
- title: Contact
link: '/contact/'
- title: Blog
link: '/blog/'
This generates the menu in the Avocado website. The title, link and order of these menu items can be changed as you wish.
There are many other values you can configure here. Go ahead and try whatever suits your needs. But, keep watching the jekyll serve for errors.