Jekyll Theme Startbootstrap Agency

Jekyll Theme Startbootstrap Agency is an open-source Jekyll gem theme that converts the Start Bootstrap Agency one-page Bootstrap 4 template into a content-managed Jekyll site, with all text, images, and links driven by YAML data files. It is built by Sotirios Vrachas and released under the MIT License, and a live demo is available at vrachas.com.

What is Jekyll Theme Startbootstrap Agency?

Jekyll Theme Startbootstrap Agency is a gem-based Jekyll theme that replicates the Start Bootstrap Agency one-page template line by line, replacing hardcoded HTML with Jekyll data files so users can edit content without touching markup. The theme takes Jekyll site configuration and YAML data files as input and produces a static agency-style website with sections for services, portfolio, about timeline, team, clients, and contact. It runs on any standard Jekyll environment and is installed by adding the gem to a Gemfile and setting the theme key in _config.yml.

The theme is designed to mirror the original Agency template exactly; the only difference from Start Bootstrap Agency is the compiled css/agency.min.css, which is normal because the SCSS is compiled by different engines. It is based on Bootstrap 4, whereas the older y7kim/agency-jekyll-theme remains on Bootstrap 3 and has not been updated in over a year.

Key Features

• Bootstrap 4 responsive layout — the theme is fully responsive and built to support the latest stable releases of all major browsers and platforms.
• Data-driven content — the homepage sections (intro, services, portfolio, about, team, clients, contact) are all populated from _data/home.yml, while the default layout reads _data/default.yml for brand, nav, footer, and modal strings.
• Collapsing navigation — custom navigation includes active classes, smooth page scrolling, and responsive fallback styling.
• Portfolio grid with modals — portfolio items open in modal window previews; project data is stored as Markdown files in the _projects directory.
• Services with Font Awesome icons — CSS-only circle icons from Font Awesome for each service.
• Responsive about timeline — a timeline layout for the About section, based on a Bootsnipp snippet.
• Team section — member profiles with circular images and social media links, stored as structured YAML.
• Contact form with validation — contact_me.js validates and submits the form; the server URL is set by the js-url field in _data/home.yml.
• SCSS customization — the theme ships with SCSS partials including _variables.scss (primary color), _mixins.scss (fonts), _masthead.scss (header background), and _contact.scss (contact background), and an agency.min.scss entry file for extra styling.
• MIT License — the theme is open source and free to use, and the underlying Start Bootstrap Agency and Bootstrap licenses are also MIT.

Who is it for?

• Jekyll users who want the Agency design — developers and site owners who prefer Jekyll's static-site workflow and want to launch a one-page business site without maintaining raw HTML.
• Small agencies and businesses — teams that need a polished one-page marketing site with services, portfolio, team bios, and a contact form, and want to edit content through YAML files instead of markup.
• Theme developers — developers looking for a clean, data-driven Jekyll theme to fork as a child theme; the author explicitly designed the theme to be dynamic enough to serve as a starting point for child themes.

What can you do with it?

• Agencies: publish a one-page company site with services, portfolio grid, about timeline, team profiles, client logos, and a contact form, all maintained through YAML data files.
• Freelance developers: spin up a personal portfolio with modal project previews and social links by editing home.yml and adding Markdown files to _projects.
• Jekyll theme learners: study a minimal, well-structured theme that separates layout (default.html, home.html), data (YAML), and styles (SCSS partials) to learn how gem-based Jekyll themes are assembled.

How does it work?

Installation follows the standard Jekyll gem theme workflow: add gem "jekyll-theme-startbootstrap-agency" to the Gemfile, set theme: jekyll-theme-startbootstrap-agency in _config.yml, and run bundle. Content editing happens in the YAML files under _data — home.yml drives the homepage sections and default.yml drives the chrome — while custom SCSS goes in assets/css/agency.min.scss and the SCSS partials in assets/_scss. To develop or modify the theme itself, run bundle install then bundle exec jekyll serve to test locally at http://localhost:4000.

FAQ

Is this theme free to use?

Yes. The theme is released under the MIT License by Sotirios Vrachas, and the underlying Start Bootstrap Agency and Bootstrap frameworks are also MIT licensed, so it is free for personal and commercial projects.

How is this different from the original Start Bootstrap Agency?

The theme aims to be a line-by-line Jekyll replica of the original HTML template, with the only intentional difference being the compiled css/agency.min.css since the SCSS is compiled by Jekyll's sass engine. In practice, the content is data-driven rather than hardcoded.

Does the theme include a working contact form?

The theme includes a contact form with client-side validation in assets/js/contact_me.js, but it needs a server endpoint: you set the target URL in the js-url field of _data/home.yml. The form does not include server-side mail handling out of the box.

Can I change the colors and images?

Yes. The primary color is set via the $primary variable in assets/_scss/_variables.scss, and the header and contact section background images are set in _masthead.scss and _contact.scss respectively.

How do I add or edit portfolio projects?

Portfolio projects are stored as Markdown files in the _projects directory; the theme also defines a projects collection in the configuration. Each portfolio item is displayed in a modal popup from the portfolio grid.