Static Website with Jekyll
Published: November 11, 2017 · Last updated: November 11, 2017
Overview
This project is a personal portfolio website built with Jekyll and hosted on GitHub Pages. Jekyll generates static HTML files from templates and Markdown, making the website fast, lightweight, and easy to maintain without requiring a backend server.
The frontend is built using Bootstrap, which provides a responsive layout that works well across desktop and mobile devices. Components such as the navigation bar and grid system made it easy to create a clean, consistent interface.
Font Awesome is used for icons throughout the site, while SASS helps organize the stylesheet into reusable, maintainable modules.
One feature I wanted was bilingual support. Since Jekyll doesn't include built-in internationalization, I created English and Japanese versions of each page and linked them together using unique reference IDs. A small Liquid script automatically detects the matching translation, allowing users to switch between languages from the navigation bar.
This project was the predecessor to my current portfolio and gave me experience building static websites, customizing Jekyll themes, and deploying sites through GitHub Pages.
Tech Stack
- Jekyll — Static site generation
- HTML — Page structure
- CSS / SASS — Styling and stylesheet organization
- Bootstrap — Responsive layout and UI components
- Liquid — Templating and language switching
- GitHub Pages — Static website hosting
Features
- Responsive layout for desktop and mobile devices
- Static site generation with Jekyll
- Bilingual English/Japanese pages
- Language switching using Liquid templates
- Modular styling with SASS
- Hosted directly on GitHub Pages
Demo
Source
Summary
This project demonstrates how a static website can be built and maintained using Jekyll, Bootstrap, and GitHub Pages. By combining static site generation with responsive design and custom bilingual support, the website delivers a fast browsing experience while remaining simple to deploy and maintain.