This repo is for my blog posts, its design is built from the ground up with simplicity at it's core. I am hoping it will be useful to others as a remote theme for their github pages.
A lightweight, customizable Jekyll blog with support for multiple themes, a Vanta.js animated background, and clean styling using Milligram CSS. Built with Liquid templates for flexibility and supports deployment on GitHub Pages.
โจ Features
Dynamic Theming: Choose from multiple pre-defined themes (e.g., Gruvbox, Dracula, Cupcake, etc.)
Persistent Preferences: Stores selected theme and Vanta background state in localStorage
Animated Background: Uses Three.js + Vanta.js for an interactive dots animation
Remote Theme Support: Can be used as a GitHub Pages remote theme
Simple & Minimal: Built with Jekyll, Liquid, and Markdown
๐ How to Use This Theme
1๏ธโฃ Using as a Remote Theme (for GitHub Pages)
You can use this Jekyll theme in your own GitHub Pages project without cloning the repository. Simply add this to your _config.yml:
remote_theme: ronynn/blog
๐ ๏ธ Customization
๐จ Adding More Themes
You can define additional themes in assets/css/milligram.css. Example:
[data-theme="pastel"] { --bg: #fffbf2; --text: #ff7f50; --border: #ffb6c1; --button: #ff69b4; --button-hover: #ff1493; --input-bg: #fff; --input-border: #ffc0cb; --input-text: #ff7f50; }
Then, add it to the theme selector in _layouts/default.html.
๐ผ๏ธ Changing Favicon
Replace assets/images/favicon.png with your own favicon and update _layouts/default.html:
๐ง Technologies Used
Jekyll โ Static site generator
Liquid โ Jekyllโs templating language
Three.js โ Handles 3D graphics rendering
Vanta.js โ Animated background effect
Milligram.css โ Lightweight CSS framework
๐ Live Demo
๐ License
This project is open-source and available under the GPLv3 License.
๐ก Contributing
Feel free to submit issues or PRs if you want to improve the theme! ๐
- Fix the css for better accessibility scores on lighthouse.
- Canvas backgrounds
- Transitions on page switches