Publishing

Opal Editor can build and deploy your markdown content as static websites to multiple hosting platforms, all without leaving the browser.

​

Publishing Overview

The publishing workflow consists of three steps:

​

Supported Platforms

Opal supports deployment to these platforms:

​

Build Process

Before deploying, Opal builds your content:

​

Build Strategies

Choose how your content is built:

​

Build Configuration

Configure your build in workspace settings:

• Output directory: Where built files are placed (default: /build)
• Template directory: Location of template files
• Asset handling: How CSS, JavaScript, and images are processed
• Base URL: Path prefix for deployed site (e.g., /my-site)

​

Creating a Deployment Destination

Before you can publish, set up a destination:

​

Authentication

Each platform requires authentication:

OAuth Platforms (Netlify, Vercel)

• Click Connect to start OAuth flow
• Authorize Opal in a popup window
• Token is stored securely in browser
• Can be revoked from platform settings

API Key Platforms (Cloudflare, S3)

• Obtain API credentials from platform
• Enter credentials in Opal
• Credentials stored in browser IndexedDB
• Can be updated or removed anytime

Git-based (GitHub Pages)

• Uses GitHub authentication from git integration
• Deploys via git push
• No additional credentials needed
• Requires push access to repository

​

Deploying Your Site

Once destinations are configured, deploy with one click:

​

Deployment Progress

Monitor deployment status in real-time:

• Pending: Deployment queued
• Building: Creating static files
• Uploading: Transferring to platform
• Success: Deployment complete with URL
• Error: Deployment failed with error message

​

Platform-Specific Features

​

Netlify

• Automatic HTTPS
• Custom domains
• Deploy previews
• Form handling
• Redirects and rewrites

​

Vercel

• Edge network deployment
• Automatic previews
• Custom domains
• Environment variables
• Serverless functions (if configured)

​

Cloudflare Pages

• Global CDN
• Unlimited bandwidth
• Custom domains
• Web analytics
• Workers integration

​

GitHub Pages

• Free hosting for public repos
• Custom domains
• HTTPS support
• Jekyll compatibility
• Git-based workflow

​

Amazon S3

• Object storage
• CloudFront integration
• Fine-grained permissions
• Versioning support
• Low cost

​

Bundle Preparation

Opal prepares your files for deployment:

​

File Processing

URL Rewriting

Absolute URLs are rewritten for deployment:

• Converts /page.html to /base-path/page.html
• Updates asset references
• Handles GitHub Pages base URL requirements
• Preserves external URLs

Asset Optimization

Images and assets are optimized:

• Images already optimized on upload
• File permissions preserved
• Directory structure maintained
• Minimal favicon added if missing

File Encoding

Files are encoded appropriately:

• Text files: UTF-8 encoding
• Binary files: Base64 encoding
• Compression available per platform
• Streaming upload for large files

​

Multiple Destinations

Deploy the same workspace to multiple platforms:

• Create multiple destination configurations
• Each destination can have different settings
• Deploy to all or select specific destinations
• Track deployment history per destination

​

Deployment History

Opal tracks all deployments:

• Timestamp: When deployment occurred
• Status: Success or failure
• URL: Link to deployed site
• Build ID: Associated build reference
• Logs: Deployment logs and errors

​

Best Practices

Test Before Deploy

Verify your content locally:

• Use live preview to check formatting
• Review all pages before deploying
• Test links and navigation
• Verify images load correctly

Use Version Control

Always commit before deploying:

• Push to GitHub first
• Tag releases for important deploys
• Document changes in commit messages
• Maintain deployment history in git

Monitor Deployments

Keep track of deployment status:

• Check deployment logs for errors
• Verify site loads after deployment
• Test on multiple devices
• Set up alerts on hosting platform

Optimize for Performance

Improve site load times:

• Optimize images before upload
• Minimize CSS and JavaScript
• Use template caching
• Enable CDN on hosting platform

​

Troubleshooting

​

Advanced Configuration

​

Custom Build Scripts

For advanced users, customize the build process:

• Add custom templates
• Process additional file types
• Implement custom transformations
• Integrate with external tools

​

Environment Variables

Some platforms support environment variables:

• Configure in platform dashboard
• Access in serverless functions
• Separate staging and production configs
• Keep sensitive data secure