# Webflow Website Deployment Guide

This repository contains a framework for deploying static websites exported from Webflow. Using Docker and Nginx with optional Cloudflare integration, you can quickly deploy your Webflow site with professional-grade hosting.

## Project Motivation

This project was developed as a cost-effective alternative to webflow's hosting plans. We found that the cost of just a few Webflow hosting subscriptions would equal the expense of purchasing and running a dedicated server for an entire year. For teams managing multiple websites, this approach can offer significant savings while maintaining full control over your deployment environment. It is possible to have a full webflow deployment free and open source. 

## Webflow Code Export

This deployment method requires exporting your Webflow site as static code. To do this:
1. In your Webflow project dashboard, go to "Publish" 
2. Click on "Export Code"
3. Download the ZIP file containing your site's code

For detailed instructions, see the [official Webflow Code Export guide](https://help.webflow.com/hc/en-us/articles/33961386739347-Code-export).

> **⚠️ Important Limitation Warning ⚠️**  
> The following Webflow features will NOT work in exported code:
> - CMS and database content
> - User accounts and authentication
> - Ecommerce functionality
> - Logic flows
> - Localized content
> - Form submissions (due to GDPR compliance)
> - Site search functionality
> - Password protection for pages
> 
> Collection lists will show empty states, and Collection pages won't display content bound to Collection fields.

## Technology Stack

### Core Technologies
- **[Webflow](https://webflow.com/)**: Visual web design platform for the original site creation
- **[Docker](https://www.docker.com/)**: Containerization for consistent deployment
- **[Nginx](https://nginx.org/)**: High-performance web server for static content
- **[Cloudflare](https://www.cloudflare.com/)** (Optional): For secure tunneling, DDoS protection, and CDN

### Benefits of This Setup
- **Portability**: Runs consistently on any system with Docker
- **Security**: Minimal attack surface with Alpine-based containers
- **Performance**: Optimized Nginx with gzip compression and proper caching
- **Scalability**: Easily deployable to any server or cloud environment

## Directory Structure

- `website/` - Contains all the website files (place your Webflow export here)
  - HTML pages
  - `css/` - Stylesheets
  - `js/` - JavaScript files
  - `images/` - Images and media
  - `fonts/` - Custom fonts
- `docker-compose.yml` - Docker Compose configuration for standard deployment
- `docker-compose-with-cloudflare.yml` - Extended configuration with Cloudflare Tunnel
- `nginx.conf` - Nginx web server configuration with performance optimizations
- `deploy.sh` - Helper script for deployment
- `cloudflared-config.yml` - Configuration for Cloudflare Tunnel (optional)
- `CLOUDFLARE-SETUP.md` - Instructions for Cloudflare integration

## Deployment Instructions

### Prerequisites
- Docker and Docker Compose installed on your server
  - [Install Docker Engine](https://docs.docker.com/engine/install/)
  - [Install Docker Compose](https://docs.docker.com/compose/install/)
- Basic knowledge of terminal commands

### Steps to Deploy

/**
 * How to open terminal on different operating systems:
 * 
 * - Ubuntu/Linux: Ctrl+Alt+T
 * - Windows: 
 *   - Windows+R, then type "cmd" or "powershell" and press Enter
 *   - Or search for "Terminal" or "Command Prompt" in the Start menu
 * - macOS: 
 *   - Command+Space, then type "terminal" and press Enter
 *   - Or find Terminal in Applications/Utilities folder
 */

1. Clone this repository to your server:
    ```bash
    git clone https://gitea.bnkhome.org/bnkops/webflow.quick.server.git
    ```

2. Extract your Webflow code export/copy all files into the `website/` directory

/**
 * How to find directories on different operating systems:
 * 
 * - Ubuntu/Linux:
 *   - Use the "Files" app (similar to Explorer/Finder)
 *   - Or in terminal: `find / -name "webflow.quick.server" 2>/dev/null`
 * - Windows:
 *   - Open File Explorer (Windows+E)
 *   - Navigate through folders or use search in top-right
 *   - Or in Command Prompt: `dir /s /b C:\webflow.quick.server*`
 * - macOS:
 *   - Use Finder (Command+Space, type "finder")
 *   - Or in terminal: `find / -name "webflow.quick.server" 2>/dev/null`
 */

3. Navigate to the project directory:
   ```bash
   cd path/to/webflow.quick.server
   ```

4. Start the Docker container:
   ```bash
   docker-compose up -d
   ```

5. The website should now be available at `http://localhost` or your server's IP address.

6. For public access, you can either:
   - Configure your DNS and firewall to expose port 80/443
   - Deploy using the [Cloudflare Tunnel](./CLOUDFLARE-SETUP.md) for secure access

### Management Commands

- To stop the server:
  ```bash
  docker-compose down
  ```

- To view logs:
  ```bash
  docker-compose logs -f
  ```

- To restart the server:
  ```bash
  docker-compose restart
  ```

- To deploy using the helper script:
  ```bash
  ./deploy.sh
  ```

## Configuration

- The Nginx configuration is located in `nginx.conf`
- The Docker Compose configuration is in `docker-compose.yml`
- Website files are served from the `website/` directory

## Technical Details

### Nginx Configuration
The Nginx web server is configured with several optimizations:

- **Gzip Compression**: Reduces the size of transferred files
- **Asset Caching**: Sets proper cache headers for static assets
- **Error Handling**: Custom error pages
- **SPA Support**: Fallback to index.html for client-side routing

### Docker Configuration
The Docker setup uses:

- **nginx:alpine**: A lightweight, Alpine Linux-based Nginx image
- **Volume Mounting**: Maps the local website directory to the container
- **Port Mapping**: Exposes port 80 for HTTP traffic
- **Automatic Restart**: Container restarts automatically if it crashes

## Alternative: Self-Hosted Website Builders

If you need more functionality than a static Webflow export provides, consider these alternatives:

### GrapesJS
Webflow is built on a framework similar to [GrapesJS](https://grapesjs.com/), an open-source web builder framework. GrapesJS can be self-hosted and integrated with your own backend for dynamic content.

### Changemaker V5
[Changemaker V5](https://gitea.bnkhome.org/bnkops/Changemaker) is a battle-tested, lightweight, self-hosted productivity suite developed by The Bunker Operations in Edmonton, Alberta, Canada.

It empowers you to deploy secure, locally-built websites, blogs, newsletters, and forms – from personal projects to full-fledged campaigns – giving you complete control, inherent security, and true freedom of speech.

Changemaker V5 provides a digital campaign alternative to mainstream American systems and can be paired with your own infrastructure at [changemaker.bnkops.org](https://changemaker.bnkops.org).

## Troubleshooting

### Common Issues

#### Container won't start
```bash
# Check for detailed error messages
docker-compose logs
```

#### Cannot connect to website
```bash
# Verify the container is running
docker ps

# Check if port 80 is in use by another service
sudo lsof -i :80
```

#### Permission issues
```bash
# Fix permission issues with Docker socket
sudo chmod 666 /var/run/docker.sock
```

## License

This deployment framework is provided under the MIT License.