Hacked Jekyll is a minimalist Jekyll theme that renders a personal homepage as a JSON object, complete with a matching 404 page, and is designed for a tiny personal website.
What is Hacked Jekyll?
Hacked Jekyll is a Jekyll microtheme that outputs a single homepage and a 404 page. The homepage displays user information in a format that mimics JSON, supporting strings, arrays, and hashes. Content is defined in _data/json.yml as a list of key-value pairs, and each value can optionally become a hyperlink. The theme is built by piazzai and uses typed.js to rotate through multiple lines of text for the main description. It also incorporates normalize.css for style resetting, the Open Color palette for colors, and the Hack monospaced typeface for a terminal-like appearance.
Key Features
- JSON-style homepage — Renders the user's information as a JSON object, with strings, arrays, and hashes defined in
_data/json.yml. - Typed.js text cycling — A string element, typically the user's description, can cycle through multiple lines of text using typed.js.
- Open Color palette — Colors come from the Open Color library, with five configurable variables (
color_bg,color_punct,color_key,color_value,color_hover) that accept names likeindigo-5orgrape-7. - Hack monospaced font — The Hack typeface is served with the site, reinforcing the JSON-code aesthetic.
- Flexible data entry — Each item in the YAML data file can be a plain string, a multi-line array, a hyperlink (via
url), or a nested hash when items have their ownkeyandvalue. - Gem-based installation — Install via Bundler (
gem "hacked-jekyll") orgem install hacked-jekyll; theme files can be overridden by creating local files with the same names. - Custom SCSS overrides — Add
_sass/_custom.scssto define new styles or overwrite the theme's defaults; it is compiled automatically during build. - 404 page included — A built-in 404 page matches the JSON/terminal styling of the homepage.
Who is it for?
Hacked Jekyll is suited for anyone who wants a minimal, code-inspired personal website. Developers can use it to present their name, links, and a rotating typed description in a JSON layout. Academics can structure their affiliation, office, and contact details as arrays and hashes, with hyperlinks where appropriate. Designers and creatives can customize the Open Color variables to match their brand while keeping the page compact and responsive.
What can you do with Hacked Jekyll?
- Personal homepage: Publish a one-page site that shows your key information in a JSON format, with a typed description that cycles through multiple lines.
- Link-in-bio style profile: Use arrays of hyperlinks (e.g., Instagram, LinkedIn) to list profiles, and use a hash layout for contact details like office, phone, and email.
- Minimal 404 page: Provide visitors with a themed error page that stays consistent with the JSON aesthetic.
How does Hacked Jekyll work?
Install the theme by adding gem "hacked-jekyll" to your Gemfile and theme: hacked-jekyll to _config.yml, then run bundle. Populate _data/json.yml with key-value pairs; each entry can include an optional url to render as a hyperlink. For arrays, list multiple value lines; for hashes, provide nested key and value fields. Set site variables in _config.yml to adjust colors, quotes, commas, lowercase transformation, and link behavior. Build the site with Jekyll to generate the static HTML.
Pros and cons
- Pros: Lightweight and focused; no bloat; highly customizable colors and text formatting.
- Cons: Limited to a homepage and a 404 page, so it does not support blogging or multi-page navigation out of the box.
FAQ
Where can I get Hacked Jekyll?
Hacked Jekyll is available on GitHub at piazzai/hacked-jekyll. You can install it by adding gem "hacked-jekyll" to your Gemfile and setting theme: hacked-jekyll in your _config.yml, or by cloning the repository and using the files directly.
How do I install Hacked Jekyll?
Add gem "hacked-jekyll" to your Gemfile and set theme: hacked-jekyll in _config.yml, then run bundle. Alternatively, run gem install hacked-jekyll or clone the demo folder to start from a working setup.
Can I change the colors?
Yes. Set any of the color_bg, color_punct, color_key, color_value, or color_hover variables in _config.yml to an Open Color name like indigo-5 or lime-8. The theme accepts the full Open Color palette.
Can I add links to my JSON content?
Yes. Each entry in _data/json.yml can include a url field, and array items can each have their own value and url, letting you build lists of linked profiles.
Does Hacked Jekyll support a blog?
No. The theme is intentionally a microtheme consisting of only a homepage and a 404 page. It does not include blog templates, post layouts, or category/tag pages.
