Deploying Vvveb CMS

Introduction

Vvveb CMS is an open-source content management system featuring a powerful drag-and-drop website builder. Built with PHP, it allows users to create professional websites visually without writing code, while developers can extend it with custom themes and plugins.

Key highlights of Vvveb CMS:

Visual Page Builder: Drag-and-drop interface for creating pages without coding
Template System: Pre-built templates and the ability to create custom themes
Block-Based Editing: Modular content blocks for flexible page layouts
Media Manager: Built-in file and image management
SEO Tools: Meta tags, sitemap generation, and URL management
Multi-Language: Support for multilingual websites
User Management: Role-based access control for editors and administrators
Plugin System: Extend functionality with plugins
Responsive Design: Mobile-friendly output by default

This guide walks through deploying Vvveb CMS on Klutch.sh using Docker, configuring the content management system, and building your first website.

Why Deploy Vvveb CMS on Klutch.sh

Deploying Vvveb CMS on Klutch.sh provides several advantages:

Simplified Deployment: Klutch.sh automatically detects your Dockerfile and builds Vvveb CMS without complex orchestration. Push to GitHub, and your CMS deploys automatically.

Persistent Storage: Attach persistent volumes for your database, uploads, and themes. Your website content survives container restarts.

HTTPS by Default: Klutch.sh provides automatic SSL certificates for secure website access.

GitHub Integration: Connect your configuration repository directly from GitHub. Updates trigger automatic redeployments.

Custom Domains: Assign a custom domain for your production website.

Prerequisites

Before deploying Vvveb CMS on Klutch.sh, ensure you have:

A Klutch.sh account
A GitHub account with a repository for your configuration
Basic familiarity with Docker and containerization concepts
(Optional) A custom domain for your website

Preparing Your Repository

Create a GitHub repository containing your Dockerfile for Vvveb CMS deployment.

Repository Structure

vvveb-deploy/
├── Dockerfile
├── php.ini
└── .dockerignore

Creating the Dockerfile

FROM php:8.2-apache

# Install PHP extensions
RUN apt-get update && apt-get install -y \
    libpng-dev \
    libjpeg-dev \
    libfreetype6-dev \
    libzip-dev \
    unzip \
    git \
    && docker-php-ext-configure gd --with-freetype --with-jpeg \
    && docker-php-ext-install gd pdo pdo_mysql mysqli zip \
    && rm -rf /var/lib/apt/lists/*

# Enable Apache modules
RUN a2enmod rewrite headers

# Set working directory
WORKDIR /var/www/html

# Download Vvveb CMS
RUN git clone https://github.com/nicotine/Vvveb.git . \
    && chown -R www-data:www-data /var/www/html

# Copy custom PHP configuration
COPY php.ini /usr/local/etc/php/conf.d/custom.ini

# Create upload directories
RUN mkdir -p /var/www/html/media/uploads \
    && chown -R www-data:www-data /var/www/html/media

# Set environment variables
ENV VVVEB_DB_HOST=${VVVEB_DB_HOST:-localhost}
ENV VVVEB_DB_NAME=${VVVEB_DB_NAME:-vvveb}
ENV VVVEB_DB_USER=${VVVEB_DB_USER:-vvveb}
ENV VVVEB_DB_PASS=${VVVEB_DB_PASS}

# Expose Apache port
EXPOSE 80

# Volume for persistent data
VOLUME ["/var/www/html/media", "/var/www/html/themes"]

Creating PHP Configuration

Create a php.ini file:

upload_max_filesize = 64M
post_max_size = 64M
memory_limit = 256M
max_execution_time = 300

Environment Variables Reference

Variable	Required	Default	Description
`VVVEB_DB_HOST`	Yes	`localhost`	MySQL database host
`VVVEB_DB_NAME`	Yes	`vvveb`	Database name
`VVVEB_DB_USER`	Yes	`vvveb`	Database username
`VVVEB_DB_PASS`	Yes	-	Database password

Deploying Vvveb CMS on Klutch.sh

Set Up MySQL Database

Deploy a MySQL instance on Klutch.sh or use an external database service. Create a database for Vvveb CMS.

Push Your Repository to GitHub

Initialize your repository and push to GitHub with your Dockerfile and configuration files.

Create a New Project on Klutch.sh

Navigate to the Klutch.sh dashboard and create a new project. Give it a descriptive name like “vvveb-cms” or “website-builder”.

Create a New App

Within your project, create a new app. Connect your GitHub account if you haven’t already, then select the repository containing your Vvveb Dockerfile.

Configure HTTP Traffic

In the deployment settings:

Select HTTP as the traffic type
Set the internal port to 80

Set Environment Variables

Add the following environment variables:

Variable	Value
`VVVEB_DB_HOST`	Your MySQL hostname
`VVVEB_DB_NAME`	`vvveb`
`VVVEB_DB_USER`	Your database username
`VVVEB_DB_PASS`	Your database password

Attach Persistent Volumes

Add the following volumes:

Mount Path	Recommended Size	Purpose
`/var/www/html/media`	10 GB	Uploaded files and images
`/var/www/html/themes`	2 GB	Custom themes

Deploy Your Application

Click Deploy to start the build process. Klutch.sh will build the container, attach volumes, and provision an HTTPS certificate.

Access Vvveb CMS

Once deployment completes, access your Vvveb CMS instance at https://your-app-name.klutch.sh. Complete the installation wizard.

Initial Setup

Installation Wizard

Navigate to your Vvveb URL
Follow the installation wizard
Enter database connection details
Create your admin account
Complete the setup process

Admin Panel

Access the admin panel at https://your-domain.klutch.sh/admin:

Log in with your admin credentials
Configure site settings
Set your site name and description
Configure SEO settings

Building Pages

Using the Page Builder

Navigate to Pages in the admin panel
Click Add New Page
Open the visual editor
Drag components from the sidebar
Customize content and styling
Save and publish

Available Components

Layout: Containers, rows, columns, sections
Content: Text, headings, images, videos
Navigation: Menus, breadcrumbs, pagination
Forms: Contact forms, newsletter signup
E-commerce: Product grids, shopping cart

Customizing Styles

Select any element on the page
Use the right panel to adjust:
- Typography (fonts, sizes, colors)
- Spacing (margins, padding)
- Background (colors, images)
- Borders and effects

Theme Management

Installing Themes

Navigate to Themes in admin
Browse available themes
Click Install to add a theme
Activate the theme for your site

Creating Custom Themes

Copy an existing theme as a base
Modify HTML templates and CSS
Upload to the themes volume
Activate from the admin panel

Troubleshooting

Page Builder Not Loading

Check browser console for JavaScript errors
Verify Apache mod_rewrite is enabled
Clear browser cache

Upload Errors

Verify upload directory permissions
Check PHP upload_max_filesize setting
Ensure volume is mounted correctly

Database Connection Issues

Verify database credentials
Check MySQL host accessibility
Ensure database exists

Additional Resources

Conclusion

Deploying Vvveb CMS on Klutch.sh gives you a powerful, visual website builder with full control over your content. The combination of Vvveb’s drag-and-drop interface and Klutch.sh’s deployment simplicity means you can quickly create professional websites without coding expertise.