Content Management
This guide covers how to create and manage different types of content in your Bizstrap Jekyll theme, including pages, blog posts, authors, and media assets.
Creating Pages
Basic Page Structure
Create new pages by adding Markdown files to your site root or in organized folders:
---
layout: page
title: "About Us"
description: "Learn more about our company and mission"
permalink: /about/
image: "/assets/images/about-hero.jpg"
---
# About Our Company
Your page content goes here using Markdown syntax.
## Our Mission
We strive to create exceptional digital experiences...
## Our Team
Meet the talented individuals behind our success...
Page Layouts Available
Choose from these layouts based on your content needs:
page: Standard page layoutpage-hero: Page with hero sectionpage-sidebar: Page with sidebardocs: Documentation layout (like this page)
Special Pages
Contact Page
---
layout: page
title: "Contact Us"
permalink: /contact/
contact:
form:
title: "Send Us a Message"
fields:
name:
label: "Your Name"
type: "text"
required: true
email:
label: "Email Address"
type: "email"
required: true
message:
label: "Your Message"
type: "textarea"
required: true
rows: 5
info:
title: "Contact Information"
items:
- icon: "ri-map-pin-line"
title: "Our Location"
content: "123 Business Street, Suite 100<br>New York, NY 10001"
---
<!-- Contact Section -->
<section class="contact-section bg-light py-5 py-lg-7">
<div class="container">
<div class="row g-5">
<!-- Left Column: Contact Form -->
<div class="col-lg-6" data-aos="fade-right">
<div class="card border-0 h-100">
<div class="card-body p-4 p-lg-5">
<h2 class="h3 fw-bold mb-4">Send Us a Message</h2>
<form id="contactForm" class="needs-validation" novalidate>
<div class="row g-3">
<div class="col-md-6">
<label for="name" class="form-label">Your Name</label>
<input type="text"
class="form-control"
id="name"
>
<div class="invalid-feedback">Please enter your name.</div>
</div>
<div class="col-md-6">
<label for="email" class="form-label">Email Address</label>
<input type="email"
class="form-control"
id="email"
>
<div class="invalid-feedback">Please enter a valid email address.</div>
</div>
<div class="col-12">
<label for="subject" class="form-label">Subject</label>
<input type="text"
class="form-control"
id="subject"
>
</div>
<div class="col-12">
<label for="message" class="form-label">Your Message</label>
<input type="text"
class="form-control"
id="message"
>
<div class="invalid-feedback">Please enter your message.</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary px-4 py-2">
Send Message
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Right Column: Contact Info & Map -->
<div class="col-lg-6" data-aos="fade-left">
<!-- Contact Info Card -->
<div class="card border-0 mb-4">
<div class="card-body p-4 p-lg-5">
<h3 class="h5 fw-bold mb-4">Contact Information</h3>
<ul class="list-unstyled mb-0">
</ul>
</div>
</div>
<!-- Map -->
</div>
</div>
</div>
</section>
FAQ Page
---
layout: page
title: "Frequently Asked Questions"
permalink: /faq/
faq_categories:
- id: "general"
name: "General Questions"
active: true
- id: "services"
name: "Services"
active: false
faq_items:
general:
- question: "What services do you offer?"
answer: "We offer web design, development, and digital marketing services."
expanded: true
---
Dynamic FAQ content will be rendered here.
Blog Posts
Creating Blog Posts
Add blog posts to the _posts directory with the naming convention YYYY-MM-DD-title.md:
---
layout: post
title: "The Future of Web Development"
date: 2025-01-24 10:00:00 -0500
author: "John Doe"
categories: [web-development, technology]
tags: [javascript, react, future-trends]
image: "/assets/images/posts/web-development-future.jpg"
excerpt: "Exploring the latest trends and technologies shaping the future of web development."
featured: true
---
# The Future of Web Development
Web development is constantly evolving, with new technologies and frameworks emerging regularly...
## Key Trends to Watch
### 1. AI-Powered Development Tools
Artificial intelligence is revolutionizing how we write code...
### 2. Progressive Web Apps (PWAs)
PWAs continue to bridge the gap between web and mobile applications...
Blog Post Front Matter Options
---
layout: post # Use 'post' layout
title: "Your Post Title" # Required
date: 2025-01-24 # Required: YYYY-MM-DD format
author: "Author Name" # Author (must match _authors collection)
categories: [cat1, cat2] # Categories for organization
tags: [tag1, tag2, tag3] # Tags for detailed classification
image: "/path/to/image.jpg" # Featured image
excerpt: "Brief description" # Custom excerpt (optional)
featured: true # Mark as featured post
published: true # Set to false for drafts
comments: true # Enable/disable comments
reading_time: 5 # Estimated reading time in minutes
---
Blog Layouts
Choose from different blog post layouts:
post: Standard blog postblog-post: Enhanced post with sidebarblog-post-right-sidebar: Post with right sidebarblog-post-left-sidebar: Post with left sidebar
Categories and Tags
Organize your content with categories and tags:
---
categories: [business, marketing, strategy]
tags: [seo, content-marketing, social-media, analytics]
---
Categories create URL paths like /category/business/, while tags are used for detailed content classification.
Managing Authors
Creating Author Profiles
Add author files to the _authors directory:
---
# _authors/john-doe.md
title: "John Doe"
name: "John Doe"
email: "john@example.com"
bio: "Senior web developer with 10+ years of experience in creating scalable web applications."
avatar: "/assets/images/authors/john-doe.jpg"
location: "New York, NY"
website: "https://johndoe.dev"
social:
twitter: "johndoe"
linkedin: "john-doe-dev"
github: "johndoe"
dribbble: "johndoe"
---
# About John Doe
John is a passionate web developer who specializes in modern JavaScript frameworks and responsive design. He has worked with numerous startups and established companies to build exceptional digital experiences.
## Expertise
- Frontend Development (React, Vue.js, Angular)
- Backend Development (Node.js, Python, PHP)
- Database Design (MongoDB, PostgreSQL, MySQL)
- DevOps & Deployment (AWS, Docker, CI/CD)
## Recent Projects
- E-commerce platform for fashion retailer
- SaaS dashboard for project management
- Mobile app backend for fitness tracking
Author Social Links
Configure social media profiles for each author:
social:
twitter: "username" # Twitter handle
linkedin: "profile-name" # LinkedIn profile
github: "username" # GitHub username
dribbble: "username" # Dribbble username
behance: "username" # Behance username
instagram: "username" # Instagram handle
facebook: "username" # Facebook profile
youtube: "channel-id" # YouTube channel
website: "https://..." # Personal website
Assigning Authors to Posts
Reference authors in blog posts using their filename (without extension):
---
layout: post
title: "My Blog Post"
author: "john-doe" # Matches _authors/john-doe.md
---
Media & Assets
Image Organization
Organize your images in the assets/images/ directory:
assets/
├── images/
│ ├── posts/ # Blog post images
│ ├── authors/ # Author avatars
│ ├── portfolio/ # Portfolio images
│ ├── services/ # Service-related images
│ ├── team/ # Team member photos
│ └── general/ # General site images
Image Optimization
Use optimized images for better performance:
- WebP format for modern browsers
- Responsive images with different sizes
- Compressed images to reduce file size
- Alt text for accessibility
Using Images in Posts
---
layout: post
title: "My Post"
image: "/assets/images/posts/featured-image.jpg" # Featured image
---
# My Post Content
You can also use HTML for more control:
<img src="/assets/images/posts/custom-image.jpg"
alt="Description"
class="img-fluid rounded shadow-sm">
Asset Management Best Practices
- Naming Convention: Use descriptive, lowercase filenames with hyphens
- Size Optimization: Compress images before uploading
- Format Selection: Use WebP for photos, SVG for icons/logos
- Responsive Images: Provide multiple sizes when needed
- CDN Usage: Consider using a CDN for better performance
Front Matter Reference
Common Front Matter Variables
---
# Layout and Structure
layout: "post" # Layout to use
title: "Page Title" # Page/post title
description: "Meta description" # SEO description
permalink: "/custom-url/" # Custom URL (optional)
# Content Information
date: 2025-01-24 # Publication date
author: "author-name" # Author reference
categories: [cat1, cat2] # Categories
tags: [tag1, tag2] # Tags
excerpt: "Brief summary" # Custom excerpt
# Media
image: "/path/to/image.jpg" # Featured image
images: # Multiple images
- "/path/to/image1.jpg"
- "/path/to/image2.jpg"
# SEO and Social
seo_title: "Custom SEO Title" # Override title for SEO
seo_description: "SEO desc" # Override description
og_image: "/path/to/og.jpg" # Open Graph image
# Display Options
featured: true # Mark as featured
published: true # Publish status
comments: true # Enable comments
reading_time: 5 # Reading time estimate
toc: true # Table of contents
# Custom Variables
custom_css: "/assets/css/custom.css"
custom_js: "/assets/js/custom.js"
sidebar: true
hero_image: "/path/to/hero.jpg"
---
Page-Specific Front Matter
Different page types may use specific front matter:
Documentation Pages
---
layout: docs
order: 1 # Navigation order
sections: # Page sections for TOC
- id: "section-1"
title: "Section Title"
prev_page: # Previous page navigation
title: "Previous Page"
url: "/docs/previous/"
next_page: # Next page navigation
title: "Next Page"
url: "/docs/next/"
---
Contact Pages
---
contact:
form: # Contact form configuration
title: "Form Title"
fields: { ... }
info: # Contact information
items: [ ... ]
map: # Map configuration
enabled: true
src: "map-embed-url"
---
Next, explore the Components Reference to learn about available theme components and how to use them in your content.