Deploying to other hosting platforms

Publish Silex websites to Netlify, Vercel, AWS, or any static host.

Overview

While Silex includes connectors for GitLab Pages and FTP, you can publish to any static hosting platform by downloading the compiled website and deploying manually, or by setting up custom CI/CD pipelines.

Three approaches:

1. Download ZIP and deploy manually — Universal, works everywhere
2. Custom CI/CD integration — Automate with platform-specific tools
3. Custom hosting connector — Write a plugin for your platform

Prerequisites

• Understanding of publication transformers
• Knowledge of your hosting platform's deployment process
• Basic familiarity with Git and CI/CD

Approach 1: Download and manual deployment

The simplest approach: users download and deploy themselves.

Setup

Enable the download connector:

HOSTING_CONNECTORS=download

User workflow

1. In Silex, click Publish
2. Select Download as hosting
3. Click Download website
4. Extract the ZIP file
5. Upload contents to your host

Deployment to Netlify

After downloading:

1. Go to netlify.com
2. Create a new site: Add new site → Deploy manually
3. Drag and drop the extracted folder, or:

npm install -g netlify-cli
cd my-silex-website
netlify deploy --prod

Deployment to Vercel

After downloading:

npm install -g vercel
cd my-silex-website
vercel --prod

Or push to GitHub and connect the repo to Vercel.

Deployment to AWS S3

After downloading:

# Install AWS CLI
npm install -g aws-cli

# Configure credentials
aws configure

# Upload to S3
aws s3 sync . s3://my-bucket-name --delete

Enable website hosting in S3:

1. Bucket → Properties → Static website hosting → Enable
2. Index document: index.html
3. Error document: 404.html (if available)

Approach 2: Custom CI/CD integration

Automate deployment by setting up a CI/CD pipeline on your platform.

Netlify via Git integration

Connect your Silex repository to Netlify:

1. Push website source to GitHub/GitLab
2. Go to netlify.com
3. Add new site → Import an existing project
4. Connect your Git provider
5. Configure build settings:
6. Build command: npm run build
7. Publish directory: _site or public

Or create a netlify.toml:

[build]
  command = "npm run build"
  publish = "_site"

[build.environment]
  NODE_VERSION = "18"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Vercel deployment

Push to GitHub and connect Vercel:

1. Push website to GitHub
2. Go to vercel.com
3. Import Project → Select repo
4. Configure:
5. Build command: npm run build
6. Output directory: _site
7. Deploy

Or use Vercel CLI:

vercel --prod

GitHub Pages

Publish from a GitHub repository:

1. Push website to GitHub (main branch or /docs folder)
2. Go to Settings → Pages
3. Select source: GitHub Actions or main branch /docs folder
4. Optionally add custom domain

If using GitHub Actions, create .github/workflows/deploy.yml:

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./_site

Cloudflare Pages

Deploy via Git or Wrangler CLI.

Via Git:

1. Push to GitHub/GitLab
2. Go to Cloudflare Pages → Create a project
3. Connect Git repo
4. Configure:
5. Build command: npm run build
6. Build output directory: _site
7. Deploy

Via CLI:

npm install -g wrangler
wrangler pages publish _site

AWS Amplify

Deploy from Git:

1. Push to GitHub/CodeCommit/GitLab
2. Go to AWS Amplify → New app → Host web app
3. Connect Git repo
4. Configure build settings:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: _site
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Approach 3: Custom hosting connector

For platforms without built-in support, write a custom connector plugin.

Skeleton structure

// plugins/my-hosting-connector.js
const { HostingConnector, Connector } = require('@silexlabs/silex-plugins')

class MyHostingConnector extends HostingConnector {
  connectorId = 'my-hosting'
  displayName = 'My Hosting'
  color = '#0066cc'
  background = '#e6f2ff'
  icon = 'data:image/svg+xml,...'

  async isLoggedIn(session) {
    return !!session.myHostingToken
  }

  async getOAuthUrl(session) {
    return `https://my-platform.com/oauth?client_id=${this.options.clientId}`
  }

  async setToken(session, token) {
    session.myHostingToken = token.access_token
  }

  async publish(session, websiteId, files, jobManager) {
    try {
      // Upload files to your platform
      for (const file of files) {
        await this.uploadFile(session, websiteId, file)
        jobManager.setJobData(websiteId, {
          status: 'uploading',
          message: `Uploaded ${file.name}`,
        })
      }

      // Return job data with public URL
      return {
        id: Date.now().toString(),
        status: 'success',
        message: 'Website published',
      }
    } catch (error) {
      return {
        id: Date.now().toString(),
        status: 'error',
        message: error.message,
      }
    }
  }

  async getUrl(session, websiteId) {
    return `https://my-platform.com/${websiteId}`
  }

  async uploadFile(session, websiteId, file) {
    const formData = new FormData()
    formData.append('file', file.content)
    formData.append('path', file.path)

    const response = await fetch(
      `https://api.my-platform.com/upload/${websiteId}`,
      {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${session.myHostingToken}`,
        },
        body: formData,
      }
    )

    if (!response.ok) {
      throw new Error(`Upload failed: ${response.statusText}`)
    }
  }

  async getLoginForm(session, redirectTo) {
    return `
      <form action="https://my-platform.com/auth" method="POST">
        <input type="hidden" name="redirect" value="${redirectTo}">
        <input type="text" name="username" placeholder="Username" required>
        <input type="password" name="password" placeholder="Password" required>
        <button type="submit">Log in</button>
      </form>
    `
  }

  getOptions(formData) {
    return {
      username: formData.username,
    }
  }
}

module.exports = {
  name: 'MyHostingConnectorPlugin',
  async init(config, options) {
    config.addHostingConnector(
      new MyHostingConnector(config, options)
    )
  },
}

Register the plugin

In your server config (.silex.js):

const myHostingConnector = require('./plugins/my-hosting-connector')

module.exports = async function (config) {
  await config.addPlugin(myHostingConnector, {
    clientId: process.env.MY_HOSTING_CLIENT_ID,
    clientSecret: process.env.MY_HOSTING_CLIENT_SECRET,
  })
}

Redirects and rewrites

Many platforms need custom redirect rules. Examples:

Netlify redirects

Create _redirects file:

# Redirect /old-page to /new-page
/old-page /new-page 301

# SPA: redirect 404s to index.html
/*  /index.html  200

Or use netlify.toml:

[[redirects]]
  from = "/old-page"
  to = "/new-page"
  status = 301

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Vercel redirects

Create vercel.json:

{
  "redirects": [
    { "source": "/old/:path*", "destination": "/new/:path*" }
  ],
  "rewrites": [
    { "source": "/:path*", "destination": "/index.html" }
  ]
}

Custom domain setup

All platforms support custom domains. General steps:

1. Point your domain's DNS A record to the platform's IP
2. In platform settings, add the domain
3. Wait for DNS propagation (5-24 hours)
4. Enable HTTPS (automatic on most platforms)

Environment variables

Pass secrets to build processes:

Netlify: 1. Site settings → Build & deploy → Environment 2. Add variables (e.g., API_KEY=...)

Vercel: 1. Settings → Environment Variables 2. Add variables

GitHub Actions: 1. Settings → Secrets and variables → Actions 2. Add repository secrets 3. Use in workflow: ${{ secrets.MY_SECRET }}

Performance optimization

Most platforms offer: - Image optimization - Automatic compression - Caching headers - CDN distribution

Configure in your build:

// Add cache-busting to asset names
config.cmsConfig.cacheBuster = true

// Set cache headers in netlify.toml
[[headers]]
  for = "/assets/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
  for = "/*.html"
  [headers.values]
    Cache-Control = "public, max-age=0, must-revalidate"

Comparing platforms

Platform	Ease	Free tier	Custom domain	Analytics	CDN
Netlify	Very easy	Yes	Yes	Yes	Yes
Vercel	Very easy	Yes	Yes	Yes	Yes
GitHub Pages	Easy	Yes	Yes (with Pro)	Via 3rd party	Yes
Cloudflare Pages	Easy	Yes	Yes	Via Analytics	Yes
AWS Amplify	Medium	Free tier	Yes	Via CloudWatch	Yes
AWS S3 + CloudFront	Medium	No	Yes	Via CloudTrail	Yes

See also

• Publication transformers — Custom publication hooks
• GitLab CI/CD customization — GitLab CI/CD pipeline
• Hosting connectors — Hosting connector interface
• Netlify docs
• Vercel docs
• Cloudflare Pages docs