Sakura

Sakura is a Jekyll blog theme that bakes in Bootstrap 4, Font Awesome 5, Algolia instant search, and a Gulp build pipeline, created by kimfucious and published under the MIT License.

What is Sakura?

Sakura is a Jekyll theme for building static blogs and documentation sites. It takes Markdown posts from the _posts folder and generates a full static site into _site via Jekyll, using Bootstrap 4 and Font Awesome 5 for styling. The theme was built by kimfucious and is available as a GitHub repository with a live demo at sakura.abts.io.

Key Features

• Bootstrap 4 baked in — All Bootstrap SCSS source is copied into _assets/scss, compiled to CSS, and the JavaScript (jQuery, Popper.js, Bootstrap JS) is concatenated into main.min.js.
• Font Awesome 5 — SVG-with-JS icons for social links and UI, limited to brand and solid sets via fa-brands.js and fa-solid.js.
• Algolia instant search — A modal search rendered from search.json, with indexing triggered by the yarn index command.
• Auto-generated responsive feature images — A Gulp task generates responsive image versions during the build process.
• Customizable Jumbotron headers — Home page hero sections with responsive background images.
• Pagination via jekyll-pagination-v2 — Posts are listed as Bootstrap cards on the home page, with a per_page setting in _config.yml.
• Pre-built pages — about, archive, and docs pages are included as starting points, plus a generic _docs collection.
• Dracula syntax highlighting — Code blocks are highlighted with the Dracula theme via Jekyll's built-in highlighter.
• Gulp build process — Runs Jekyll, compiles SCSS/JS, and serves via BrowserSync at localhost:3000 with live reload.

Who is it for?

Sakura is aimed at bloggers and static-site developers who want a ready-made Jekyll theme with modern styling and minimal manual configuration. It suits Jekyll users who are comfortable with the command line, since installation requires Ruby, Bundler, Node.js, and either npm or yarn. It also fits developers who want to customize Bootstrap variables or extend the Gulp build pipeline.

What can you do with Sakura?

• Bloggers: Write posts in Markdown, save them to _posts, and get a paginated card layout with feature images and a search modal.
• Documentation authors: Use the included _docs collection to publish a docs section with its own pagination settings and list-group styling.
• Designers/developers: Override Bootstrap SCSS variables (e.g., change $primary to a custom color) and add or remove Font Awesome icons in the pretty vendor folders.
• Site publishers: Deploy the generated _site directory to Netlify or Surge, as the README recommends, rather than GitHub Pages.

How does Sakura work?

Sakura's workflow is: clone the repository, run bundle install and npm install or yarn install, then run yarn install-theme (or the Gulp equivalent) once to copy Bootstrap SCSS and vendor JS into _assets. After that, yarn serve starts a Jekyll build plus BrowserSync with live reload; the compiled site appears in _site. The README explicitly discourages using bundle exec jekyll serve in favor of the Gulp/BrowserSync setup.

FAQ

Is Sakura free to use?

Sakura is open source under the MIT License, so it is free to use, modify, and distribute. The README links to the license and the contributor covenant.

Does Sakura work on GitHub Pages?

The README says the author has not worked out how to make the theme work on GitHub Pages, and instead recommends publishing the _site directory to Netlify or Surge.

How do I change the primary color?

Edit _assets/scss/custom/_variables.scss and override Bootstrap variables such as $primary. The theme imports this file at the top of main.scss so the custom value takes precedence.

How do I add a new post?

Create a new Markdown file in the _posts folder with a name in the format year-month-day-title.md. If the server is running, the post appears in the browser shortly after saving, as long as the front matter is valid.

What search engine does Sakura use?

Sakura uses Algolia instant search. The search.json file is generated during the build, and you run the yarn index command to index collection posts; each collection post must include a date variable for Algolia indexing to work.