Ultimate Jekyll dependency manager
npm install ultimate-jekyll-manager
Site | NPM Module | GitHub Repo
Ultimate Jekyll is a template that helps you jumpstart your Jekyll sites and is fueled by an intuitive incorporation of npm, gulp, and is fully SEO optimized and blazingly fast.
bash
npm start
`š¦ How to sync with the template
1. Simply run npm start in Terminal to get all the latest updates from the Ultimate Jekyll template and launch your website in the browser.š Publishing your website
1. Change the url in _config.yml to your domain.
2. Push your changes to GitHub using npm run dist in Terminal.ā³ļø Flags
* --browser=false - Disables the browser from opening when running npm start.
`bash
npm start -- --browser=false
`
* --debug=true - Enables logging of extra information when running npm start.
`bash
npm start -- --debug=true
`
* --ujPluginDevMode=true - Enables the development mode for the Ultimate Jekyll Ruby plugin.
`bash
npm start -- --ujPluginDevMode=true
`
* --profile - Enables Jekyll build profiling to see how long each phase takes.
`bash
npm start -- --profile
`
* --all-posts - Disables the development post limit (15 posts) and builds with all posts. Useful when you need to test with full blog content.
`bash
npm start -- --all-posts
`$3
`bash
UJ_PURGECSS=true # Enables PurgeCSS to remove unused CSS (normally only happens in production builds)
`Running Specific Tasks
You can run specific tasks using the npm run gulp command with the appropriate task name.Some of these require environment variables to be set and other tasks to be run first.
Here are some examples:
$3
`bash
Run the audit task
npx uj auditRun with a Lighthouse URL (defaults to "/" if not provided)
npx uj audit -- --lighthouseUrl="/contact"Add autoExit to continue developing and testing AFTER the audit
npx uj audit -- --lighthouseUrl="/contact" --autoExit=false
`$3
`bash
Test translation with GitHub cache (requires GH_TOKEN and GITHUB_REPOSITORY)
GH_TOKEN=XXX \
GITHUB_REPOSITORY=XXX \
UJ_TRANSLATION_CACHE=true \
npx uj translationTest with only 1 file
UJ_TRANSLATION_ONLY="index.html" \
GH_TOKEN=XXX \
GITHUB_REPOSITORY=XXX \
UJ_TRANSLATION_CACHE=true \
npx uj translation
`$3
Test image optimization with GitHub cache in development mode:
`bash
Test with GitHub cache (requires GH_TOKEN and GITHUB_REPOSITORY)
GH_TOKEN=XXX \
GITHUB_REPOSITORY=XXX \
UJ_IMAGEMIN_CACHE=true \
npx uj imageminOr run locally without cache
npx uj imagemin
`
The imagemin task will:
- Process images from src/assets/images/*/.{jpg,jpeg,png}
- Generate multiple sizes (1024px, 425px) and WebP formats
- Cache processed images in cache-imagemin branch (when using GitHub cache)
- Skip already processed images on subsequent runs
š Developing
1. Clone the repo to your local machine.
2. Run these commands
`bash
npm install
npm run prepare:watch
`$3
Create 12 test blog posts in the _posts directory with the blogify task. This is useful for testing and development purposes.
`bash
npx uj blogify
`Page Frontmatter
You can add the following frontmatter to your pages to customize their behavior:$3
`yaml
---
Layout and Internals
layout: themes/[ site.theme.id ]/frontend/core/minimal # The layout to use for the page, usually 'default' or 'page'
permalink: /path/to/page # The URL path for the page, can be relativeControl the page's meta tags
meta:
index: true # Set to false to disable indexing by search engines
title: 'Page Title' # Custom meta title for the page
description: 'Page description goes here.' # Custom meta description for the page
breadcrumb: '' # Custom breadcrumb for the pageControl the page's theme and layout
theme:
nav:
enabled: true # Enable theme's nav on the page
footer:
enabled: true # Enable theme's footer on the page
body:
class: '' # Add custom classes to the body tag
main:
class: '' # Add custom classes to the main tag
head:
content: '' # Injected at the end of the head tag
foot:
content: '' # Injected at the end of the foot tag (inside )
---
`$3
`yaml
---
Post pages
post:
title: "Post Title" # Custom post title for the page
description: "Post description goes here." # Custom post description for the page
author: "author-id" # ID of the author from _data/authors.yml
id: 1689484669 # Unique ID for the post, used for permalink
---
`$3
`yaml
---
Team Member pages
member:
id: "member-id" # ID of the team member from _data/team.yml
name: "Member Name" # Name of the team member
---
`$3
uj-signin-btn: Automatically handles signin (just add data-provider="google.com" to the button)
uj-signup-btn: Automatically handles signup (just add data-provider="google.com" to the button)uj-language-dropdown:
uj-language-dropdown-item$3
#### Max-Width Utilities
Ultimate Jekyll includes max-width utility classes based on Bootstrap's breakpoint sizes. These classes constrain an element's maximum width to match Bootstrap's standard responsive breakpoints:
-
.mw-sm - Sets max-width to 576px
- .mw-md - Sets max-width to 768px
- .mw-lg - Sets max-width to 992px
- .mw-xl - Sets max-width to 1200px
- .mw-xxl - Sets max-width to 1400pxUsage Examples:
`html
`These utilities are particularly useful for:
- Improving readability by preventing text from spanning too wide
- Creating consistent content widths across different sections
- Constraining forms, cards, and modals to reasonable sizes
- Maintaining design consistency with Bootstrap's grid system
$3
The
element has data attributes for JavaScript/CSS targeting:| Attribute | Values |
|-----------|--------|
|
data-theme-id | Theme ID (e.g., classy) |
| data-theme-target | frontend, backend, docs |
| data-bs-theme | light, dark |
| data-page-path | Page permalink (e.g., /about) |
| data-asset-path | Custom asset path or empty |
| data-environment | development, production |
| data-platform | windows, mac, linux, ios, android, chromeos, unknown |
| data-device | mobile (<768px), tablet (768-1199px), desktop (>=1200px) |
| data-runtime | web, extension, electron, node |
| aria-busy | true (loading), false (ready) |$3
Ultimate Jekyll supports dark/light/system theme switching with user preference persistence.
JavaScript API:
`javascript
webManager.uj().appearance.get(); // Returns 'dark', 'light', 'system', or null
webManager.uj().appearance.set('dark'); // Save and apply preference
webManager.uj().appearance.toggle(); // Toggle dark/light
webManager.uj().appearance.cycle(); // Cycle: dark ā light ā system
`HTML Dropdown Example:
`html
`$3
Ultimate Jekyll includes an automatic protection system that prevents users from clicking buttons before JavaScript is fully loaded, eliminating race conditions and errors.
#### How It Works
1. Pages start with
data-page-loading="true" on the HTML element
2. Certain buttons are automatically protected from clicks during this state
3. When JavaScript finishes loading, the attribute is removed and buttons become clickable#### Protected Elements
During page load, these elements are automatically protected:
- All form buttons (