Abstract
Jekyll Image Gallery Example is an open-source Full Stack Web Development project. Illustrates how to integrate a highly flexible image gallery into a Jekyll blog/website. This website illustrates how to integrate a lightGallery/Isotope photo gallery into a Jekyll website. Two example galleries are included. It is built using CSS. The complete source code is publicly available on GitHub under the MIT License, making it a useful reference for students building a Full Stack Web Development mini project or final-year project.
1. Introduction
This website illustrates how to integrate a lightGallery/Isotope photo gallery into a Jekyll website. Two example galleries are included. This solution is GitHub Pages friendly and does not require a custom plugin.
This blogpost explains different parts of the gallery and design choices. Use this guide and the files in this repo to make your own photo gallery.
2. Objective
Illustrates how to integrate a highly flexible image gallery into a Jekyll blog/website.
This project demonstrates how CSS can be applied to a real-world Full Stack Web Development problem.
4. Technology Stack
5. System Requirements
General requirements for this technology stack — check the README for exact versions.
- A modern web browser
- VS Code or any code editor
- Git (to clone the repository)
6. Installation & Setup
git clone https://github.com/opieters/jekyll-image-gallery-example.git
cd jekyll-image-gallery-example- Clone the git repo: git clone https://github.com/opieters/jekyll-image-gallery-example.git
- Change folder: cd jekyll-image-gallery-example
- Install Jekyll: gem install jekyll
Full setup instructions are in the project README.
7. Future Enhancements
Suggested extensions you can add to make this your own project.
- Add role-based access control
- Deploy on a VPS or cPanel hosting with a custom domain
- Add automated tests and a CI pipeline
8. Viva / Review Questions
Common questions examiners ask for projects in this domain.
- Explain the frontend, backend and database layers of this application.
- How is user authentication and authorisation implemented?
- Describe the main database tables / collections and their relationships.
- Which REST APIs or routes are exposed and what do they return?
- How would you deploy this application to production?
9. Source Code & License
This project is developed by opieters and published on GitHub under the MIT License. Please follow the license terms and credit the original author when you use or modify this code.
Want to build this as your internship project?
Work on a Full Stack Web Development project like this with mentor guidance, weekly reviews and an internship certificate from Training Trains, Erode — online or offline.
Apply for Full Stack Web Development Internship