https://github.com/george-gca/jekyll-cache-bust
A Jekyll plugin to force updating cached files
https://github.com/george-gca/jekyll-cache-bust
cache-bust cache-busting hacktoberfest jekyll jekyll-plugin plugin
Last synced: 11 months ago
JSON representation
A Jekyll plugin to force updating cached files
- Host: GitHub
- URL: https://github.com/george-gca/jekyll-cache-bust
- Owner: george-gca
- License: mit
- Created: 2025-01-23T03:16:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-23T23:49:58.000Z (over 1 year ago)
- Last Synced: 2025-06-01T10:32:34.264Z (12 months ago)
- Topics: cache-bust, cache-busting, hacktoberfest, jekyll, jekyll-plugin, plugin
- Language: Ruby
- Homepage:
- Size: 6.84 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jekyll-cache-bust
[](http://badge.fury.io/rb/jekyll-cache-bust)
Have you ever updated a CSS file or an image, but the browser kept showing the old version? This plugin enables to easily cache-bust your site's assets. Cache-bust is a technique to force the browser to fetch a new version of a file whenever it changes, ignoring the cached content. It does so by appending a hash of the file's content to the file's name. This way, whenever the file's content changes, the hash changes and the browser will fetch the new file. The hash is calculated using the MD5 algorithm. Based on the implementation made by [Bryan Schuetz](https://distresssignal.org/busting-css-cache-with-jekyll-md5-hash/).
## Installation
1. Add `gem 'jekyll-cache-bust'` to your site's Gemfile
2. Add the following to your site's `_config.yml`:
```yml
plugins:
- jekyll-cache-bust
```
## Usage
There are currently two ways to cache-bust your assets:
### 1. Cache-busting individual files
To cache-bust a single file, simply use the `bust_file_cache` filter in your templates:
```liquid
```
This will output something like:
```html
```
Note that this can be used to cache-bust any type of file, not just CSS.
### 2. Cache-busting all sass files
This is useful when you have a lot of sass files that are imported into a single CSS file. For example, you have a `_sass/` directory with lots of files, and they are all imported into your `/assets/css/main.scss`, like this:
```scss
---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";
@import
"variables",
"themes",
"layout",
"base",
"components"
;
```
To create a hash for your `main.scss` file considering the content of the whole `_sass/` directory, use the `bust_css_cache` filter in your templates:
```liquid
```
This will output something like:
```html
```