5 Absolute Must Have Jekyll Plugins If You Care About Performance and SEO

If you are using Jekyll to build a static website, here is a list of awesome plugins that will help you achieve your performance and SEO goals.

Plugin #1 – Jekyll Assets Plugin

Jekyll Assets is an assets pipeline for Jekyll. It combines and versions CSS/js files. This plugin doesn’t minify files though – for that you have to use Jekyll-Minifier.
The documentation for Jekyll Assets is a bit sparse, perhaps because it assumes you know sprockets. Here are our notes to get the best of Jekyll Assets.

Javascript Cheatsheet

1. Put source js files under _assets/scripts.
2. Create a main.js file under _assets/scripts, and include one more source files using the //= require source-file.js syntax
3. Include main.js in your HTML files using the {% js main %} tag
4. When you generate static files, Jekyll assets will combine all source files into main.js and version it appropriately.

SASS/CSS Cheatsheet

1. Put scss fragments under _assets/styles
2. Put main css files under _assets/css, and @import scss fragments
3. Use the syntax {% css main %} to include a css file within a HTML file

Images/Fonts Cheatsheet

Although Jekyll Assets can version images and other static files, it’s a pain in practice because you have to use the asset_path tag in your HTML and CSS.
Instead, it’s best to follow a convention – never modify images/fonts once committed. You can then set a 1 year max-age cache header. If you ever need to change the file, rename it.
In practice, images and fonts are rarely modified and are only referenced in a couple of files. So renaming them is usually not a big problem.

Plugin #2 – S3 Website Plugin

The wonderful S3 Website gem automates the deployment of your static website to S3 and CloudFront.
Here’s what S3 Website can do for you:

1. Automatically sync the _site folder with your S3 bucket
2. Invalidate CloudFront cache
3. Set mime types on files
4. Configure max-age cache headers
5. Set redirect rules in S3
6. Enables gzip compression

Max Age Cache Headers

This is hashedin.com’s configuration for cache headers.

max_age:
   "favicon.ico": 31536000
   "assets/*": 31536000
   "img/*": 31536000
   "fonts/*": 31536000
   "*.html": 300

The assets folder is automatically versioned by Jekyll Assets. The img and fonts folders are manually versioned.

Redirect Rules

Here are the redirect rules we use on hashedin.com

redirects:
  about.html: /about/
  about.html: /about/
  about-us: /about/
  hashers.html: /about/
  contact.html: /contact/
  careers.html: /careers/
  jobs: /careers/
  blogs.html: /blogs/
  blog.html: /blogs/
  blog: /blogs/

Separate QA and Prod Configuration

s3_website supports a config-dir flag to help you setup multiple configurations. Create two folders _qa and _production, and move s3_website.yml file to these folders. Then, use the --config-dir flag to choose the appropriate configuration file.
For example, here are the commands to deploy to QA vs Prod:

1. s3_website push --config-dir _qa
2. s3_website push --config-dir _production

[/et_pb_text][et_pb_text admin_label=”Plugin #3: Jekyll Minifier” _builder_version=”3.0.86″ background_layout=”light”]

Plugin #3: Jekyll Minifier

This relatively unknown plugin minifies HTML, CSS and js files automatically. It’s perhaps the most painless plugin because no configuration is necessary, and it just does it job without much fanfare.
Jekyll Minifier is an alternative to the more popular Jekyll Press. However, the gem hasn’t been updated since 2013. We ran into “uninitialized class variable @@mmtimes”, and decided Jekyll Minifier works better for us.

Disabling Minification during Development

Minification takes time and significantly slows down development. To disable it, create a _config.dev.yml file, and add the following contents:

jekyll-minifier:
  exclude: "*"

Then, start your development server using the following command:

jekyll serve --config _config.yml,_config.dev.yml  --incremenlal

Plugin #4: Jekyll Sitemap

Jekyll Sitemap generates sitemap.xml for google search engine. Once configured, it will place sitemap.xml at the root of your website.
Installing and configuring the plugin is super easy, just follow the instructions on GitHub.
Additional Notes:

1. By default, all pages show up in the sitemap. To disable a specific page or post, add sitemap: false in the front matter
2. If you disable a page, you almost always want to put a disallow rule in your robots.txt
3. If you have an error.html page (which you should) – definitely exclude that from sitemap.
4. Share Ideas and Solutions. Write.

A big part of the job description for a tech fellow is being able to communicate technical designs and ideas and convince people of their importance. Writing coherent and compelling emails is a must. Typically these emails would have a succinct not-so-technical description of the problem, a few possible solutions, a recommendation with supporting arguments and a call for feedback or comments. These emails are like call-to-arms. e.g. Nobody likes refactoring. It means extra work and risk, without any new features. So the onus is on the tech fellow to convince that the refactoring or other good technical ideas are necessary and can be executed without too big a risk and will be more efficient in the long run.

Why: Having a great technical idea is not enough. Its also your job to cajole some, convince others, sometimes fight through resistance and make sure that ideas are implemented, all that while meeting business goals and without creating big fail risks. Explaining the need is the only way to get that done.

Plugin #5: Jekyll SEO Tag

Jekyll SEO Tag sets title and meta description tags for you. It also sets all kinds of rich tags, including open graph metadata and JSON LD tags. While you can do all of this manually, it’s easier to let it do.
The documentation for this plugin is great, so just follow the instructions and you should be set.

Looking to build a marketing website? HashedIn can help. Contact us to learn more.