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 more source files using the
//= require source-file.jssyntax - 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@importscss 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 your deployment of your static website to S3 and cloudfront.
Here’s what S3 Website can do for you:
- Automatically sync the
_sitefolder 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.
|
1 2 3 4 5 6 7 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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 _qas3_website push --config-dir _production
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 Minfication during Development
Minification takes time, and significantly slows down development. To disable it, create a _config.dev.yml file, and add the following contents:
|
1 2 3 |
jekyll-minifier: exclude: "*" |
Then, start your development server using the following command:
|
1 |
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: falsein 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.htmlpage (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 meta data 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.
