https://github.com/mumarshahbaz/jekyll_dynamic_assets
Use simple variables to define your master files, presets and manual insertion. Select your assets dynamically via page front matter and config.yml
https://github.com/mumarshahbaz/jekyll_dynamic_assets
assets-management jekyll liquid ruby
Last synced: 4 months ago
JSON representation
Use simple variables to define your master files, presets and manual insertion. Select your assets dynamically via page front matter and config.yml
- Host: GitHub
- URL: https://github.com/mumarshahbaz/jekyll_dynamic_assets
- Owner: MUmarShahbaz
- License: mit
- Created: 2025-06-03T08:30:01.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-23T13:12:59.000Z (12 months ago)
- Last Synced: 2025-11-04T22:17:18.509Z (8 months ago)
- Topics: assets-management, jekyll, liquid, ruby
- Language: Ruby
- Homepage: https://rubygems.org/gems/jekyll_dynamic_assets/
- Size: 50.8 KB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# JekyllDynamicAssets
JekyllDynamicAssets is a powerful Jekyll plugin for dynamic, flexible, and DRY asset management. It lets you define, group, and inject CSS, JS, and other head assets using presets, per-page config, and custom formatting.
## Features
- Define global (master) assets and per-page assets
- Use asset presets for reusable asset groups
- Pre-defined and overrideable formats and sources for common assets
- Auto, Select, and Inline formats and sources
- Liquid tag `{% inject_assets %}` for easy asset injection in templates and includes
- Error reporting for missing presets and formats
- Absolute/relative URL support
- Supports all head assets: CSS, JS, module JS, fonts, icons, JSON, etc.
## Installation
Add this to your Jekyll site's `Gemfile`:
```ruby
source 'https://rubygems.org'
gem "jekyll"
group :jekyll_plugins do
gem "jekyll_dynamic_assets"
# other gems
end
```
Then add the following to your Jekyll site's `config.yml`:
```yaml
plugins:
- jekyll_dynamic_assets
```
Finally, in your terminal run:
```powershell
bundle install
```
## Usage
### 1. Configure your assets in `config.yml`
```yaml
dynamic_assets:
master:
- main.css
- main.js
source:
base: /assets
github: https://github.com/assets/
css: /css
js: /js
absolute: true # Use absolute URLs (uses `url` and `baseurl` from config)
presets:
blog: [blog.css, blog.js]
project: [project.css, project.js, code-highlight.css, slideshow.js, myApp.js]
formats:
js:
xyz: %s
screen-css:
```
If all your assets are in the same folder, you can simply do:
```yaml
dynamic_assets:
source: /asset_folder
```
**Path rules:** Always use a leading slash, never a trailing slash.
### 2. Per-page or per-collection configuration
In your page or post front matter:
```yaml
dynamic_assets:
files: # See Asset Definition Syntax below
- manual.css
- onscreen.css::screen-css
- no_script.css:::
- github<`):
```liquid
{% inject_assets %}
```
This will output the appropriate HTML tags for all configured assets. The tag should generally be used inside your `` tag but can be used anywhere else.
---
### Asset Definition Syntax
You can use the following syntax anywhere (config or front matter):
```
Source<