Getting Started with Bizstrap Jekyll Theme

Welcome to the Bizstrap Jekyll theme documentation! This comprehensive guide will help you set up, customize, and deploy your Jekyll website using our modern, responsive Bootstrap 5 theme.

What is Bizstrap?

Bizstrap is a professional Jekyll theme built with Bootstrap 5, designed for businesses, startups, agencies, and personal portfolios. It features:

Modern Design: Clean, professional layouts with attention to detail
Responsive: Mobile-first design that works on all devices
Bootstrap 5: Latest version with enhanced components and utilities
Jekyll Optimized: Built specifically for Jekyll with best practices
Customizable: Easy to customize colors, fonts, and layouts
SEO Ready: Optimized for search engines out of the box

Installation

Prerequisites

Before you begin, make sure you have the following installed:

Ruby (version 2.7 or higher)
Jekyll (version 4.0 or higher)
Bundler gem
Git (for version control)

Quick Start

Clone the repository:

git clone https://github.com/yourusername/bizstrap-jekyll.git
cd bizstrap-jekyll

Install dependencies:
```
bundle install
```
Start the development server:
```
bundle exec jekyll serve
```
Open your browser: Navigate to http://localhost:4000 to see your site.

Alternative Installation Methods

Using Jekyll New

jekyll new my-site --template bizstrap-jekyll
cd my-site
bundle install
bundle exec jekyll serve

Using GitHub Template

Click “Use this template” on the GitHub repository
Clone your new repository
Follow the Quick Start steps above

Configuration

Basic Configuration

The main configuration file is _config.yml. Here are the essential settings you should customize:

# Site settings
title: "Your Site Title"
description: "Your site description"
url: "https://yourdomain.com"
baseurl: ""

# Author information
author:
  name: "Your Name"
  email: "your.email@example.com"
  bio: "Your bio here"
  avatar: "/assets/images/avatar.jpg"

# Social links
social:
  twitter: "yourusername"
  github: "yourusername"
  linkedin: "yourusername"
  instagram: "yourusername"

Edit _data/navigation.yml to customize your site navigation:

main:
  - name: "Home"
    url: "/"
  - name: "About"
    url: "/about/"
  - name: "Services"
    url: "/services/"
  - name: "Blog"
    url: "/blog/"
  - name: "Contact"
    url: "/contact/"

Color Customization

Customize your theme colors in _sass/abstracts/_variables.scss:

// Primary colors
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$info: #17a2b8;
$warning: #ffc107;
$danger: #dc3545;

// Custom theme colors
$brand-primary: #your-color;
$brand-secondary: #your-secondary-color;

Customization

Layouts Available

The theme includes several layouts:

default: Base layout with header and footer
page: Standard page layout
post: Blog post layout with author info and sharing
blog-post: Enhanced blog post with sidebar options
docs: Documentation layout (this page)
author: Author profile page

Creating Pages

Create new pages by adding markdown files to the root directory or in folders:

---
layout: page
title: "About Us"
description: "Learn more about our company"
permalink: /about/
---

# About Us

Your content here...

Blog Posts

Add blog posts to the _posts directory:

---
layout: post
title: "Your Post Title"
date: 2025-01-24
author: "Author Name"
categories: [business, technology]
tags: [jekyll, web-development]
image: "/assets/images/posts/your-image.jpg"
---

Your post content here...

Custom Components

The theme includes reusable components in _includes/components/:

Hero sections: hero/
Blog components: blog/
Contact forms: contact/
Common elements: common/

Use them in your pages:

Deployment

GitHub Pages

Push your code to a GitHub repository
Go to Settings > Pages
Select source branch (usually main or master)
Your site will be available at https://username.github.io/repository-name

Netlify

Connect your GitHub repository to Netlify
Set build command: bundle exec jekyll build
Set publish directory: _site
Deploy!

Custom Server

Build the site and upload the _site folder:

bundle exec jekyll build
# Upload _site folder to your web server

Next Steps

Now that you have the basics set up, explore these topics:

Theme Configuration - Detailed configuration options
Content Management - Managing pages, posts, and media
Customization Guide - Advanced customization techniques
Components Reference - Available components and usage
Deployment Guide - Detailed deployment instructions

Need Help?

Documentation: Browse all documentation pages
GitHub Issues: Report bugs or request features
Community: Join our community discussions
Support: Contact us for premium support

Ready to build something amazing? Let’s get started! 🚀

Getting Started

Documentation