Building a Jekyll Theme with File Explorer Navigation
Hey Dev.to community! ��
I've been working on a Jekyll theme for the past few months and wanted to share it with you all. The inspiration came from wanting something that works well for different types of users - from undergrads documenting their projects to researchers sharing papers, and even hobbyists building their portfolios.
Live Demo & Source Code
�� Live Demo: https://dudududukim.github.io/spectrum/
💻 GitHub Repository: https://github.com/dudududukim/spectrum
The Problem I Was Trying to Solve
Most Jekyll themes are either blog-focused OR portfolio-focused, but I needed something that could handle both academic work and personal projects. I also wanted navigation that felt more intuitive than the typical menu systems.
What Makes This Theme Different
🗂️ Path-Finder Inspired Navigation
The nav bar shows your current location like a file explorer:
Home > Tech Bites > Specific ArticleHome > Films > Photo Gallery
I found this really helpful for users to understand where they are on the site, especially when dealing with multiple content types.
🎨 Primary Color Customization
Easy to match your brand or personal style with a simple config change in _config.yml. One color change transforms the entire site's appearance.
📱 Dynamic Gallery Scrolling
The gallery track automatically scrolls through images, which works great for showcasing projects or photography without manual navigation.
🎯 Multi-Purpose Design
Works for:
- Academic portfolios - Research papers, project documentation
- Personal blogs - Tech insights, tutorials, life updates
- Creative showcases - Photography, art, design work
- Student projects - Course work, side projects, learning notes
Technical Stack
- Jekyll 4.4+ - Latest stable version
- SCSS with CSS custom properties - For theming flexibility
- Vanilla JavaScript - No framework dependencies
- GitHub Pages ready - Includes workflow file
- Mobile-first responsive design
Key Features
- ✅ Responsive Design - Works from mobile to desktop
- ✅ Light & Dark Theme - Automatic system preference detection
- ✅ SEO Optimized - Proper meta tags and structured data
- ✅ Accessibility - ARIA attributes and keyboard navigation
- ✅ Fast Loading - Optimized CSS/JS and image handling
- ✅ Easy Setup - Clone, configure, deploy
Quick Start
# Clone the repository
git clone https://github.com/dudududukim/spectrum.git
cd spectrum
# Install dependencies
bundle install
# Configure your site
# Edit _config.yml to update site details and colors
# Run locally
bundle exec jekyll serve
# Visit http://localhost:4000
What I Learned
Building this theme taught me a lot about:
- Jekyll's flexibility with liquid templating
- CSS custom properties for dynamic theming
- Mobile-first responsive design principles
- GitHub Actions for automated deployment
Questions for the Community
- What navigation patterns do you find most intuitive?
- Are there any Jekyll limitations you've run into with custom themes?
- What features would make Jekyll themes more accessible to non-developers?
- How do you handle multi-content-type sites in your projects?
Contributing
This is completely free and open source. If you find it useful or have suggestions for improvements, feel free to:
- ⭐ Star the repository
- 🍴 Fork and submit pull requests
- 🐛 Report issues
- 💬 Share feedback
Final Thoughts
I built this because I believe there's room for more diverse Jekyll themes in the ecosystem. Most themes focus on a single use case, but I wanted something flexible enough for the varied needs of students, researchers, and creators.
The file explorer navigation might not be for everyone, but I've found it really helpful for sites with multiple content types. What do you think about this approach?
Built with ❤️ and Jekyll
This is completely free to use, modify, and distribute. I'm not selling anything - just sharing something I built that others might find useful.
Top comments (0)