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
- Put source js files under
_assets/scripts
. - Create a main.js file under _assets/scripts, and include one more source files using the
//= require source-file.js
syntax - Include main.js in your HTML files using the
{% js main %}
tag - When you generate static files, Jekyll assets will combine all source files into main.js and version it appropriately.
SASS/CSS Cheatsheet
- Put scss fragments under
_assets/styles
- Put main css files under
_assets/css
, and@import
scss fragments - 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:
- Automatically sync the
_site
folder with your S3 bucket - Invalidate CloudFront cache
- Set mime types on files
- Configure max-age cache headers
- Set redirect rules in S3
- 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:
s3_website push --config-dir _qa
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:
- By default, all pages show up in the sitemap. To disable a specific page or post, add
sitemap: false
in the front matter - If you disable a page, you almost always want to put a disallow rule in your
robots.txt
- If you have an
error.html
page (which you should) – definitely exclude that from sitemap. - 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.