Lucius

DEPLOY PIPELINE

From commit to production — click any stage to learn more

1 ⬆️

Commit

Trigger
Push code changes to GitHub

When you push changes to the main or develop branch, GitHub automatically starts the pipeline. Only files inside frontend/ trigger frontend builds — backend changes run their own pipeline.

git push origin main Triggers pipeline automatically
2 🔍

Validate

Check
Verify all required files exist

Makes sure all the critical files are present before any further steps. If something is missing, the pipeline stops here and you'll get an alert.

Files checked:

  • index.html — main entry point
  • css/main.css — stylesheet orchestrator
  • js/config-endpoints.js — service configuration
  • js/ui-core.js — main application logic
  • assets/lu-lo.png — application logo
3 🌐

Lint HTML

Check
Check HTML for syntax and structural issues

Scans all .html files for common mistakes: unclosed tags, duplicate IDs, invalid attributes, and accessibility issues.

This catches problems before they reach users — broken layouts, missing elements, or malformed markup.

💡 Tip: Run locally with npm run lint:html from the frontend/ directory.
4 🎨

Lint CSS

Check
Validate stylesheet quality and consistency

Checks all CSS files for issues: undefined variables, duplicate selectors, invalid property values, and style inconsistencies.

Keeps the design system clean and predictable — no broken styles, no orphaned classes.

💡 Tip: Run locally with npm run lint:css from the frontend/ directory.
5 ⚡

Lint JavaScript

Check
Find JS errors, unused variables, and bad patterns

Analyzes all JavaScript files for: syntax errors, unused variables, missing semicolons, potential bugs, and anti-patterns.

Catches runtime errors before they happen — undefined references, type mismatches, and logic issues.

💡 Tip: Run locally with npm run lint:js from the frontend/ directory.

Link Check

Check
Verify all internal script and stylesheet references
7 📦

Upload Artifact

Build
Package frontend files for deployment

All validated frontend files are packaged into a downloadable archive (artifact) and stored for 3 days. This artifact is used by the deploy stage.

You can download this artifact from the GitHub Actions run page if you need to manually deploy.

8 🚀

Deploy

Deploy
Ship to production server

Only runs on main / master branch pushes. Two deployment methods are available:

Method A: rsync to server

If DEPLOY_HOST is configured, files are securely copied via SSH to your production server. Old files are deleted, new ones take their place.

Method B: Docker / Caddy

If no remote host is configured, files are staged for a local Docker build with Caddy as the web server. Run docker compose up to serve.

📋 Required secrets: DEPLOY_KEY (SSH private key), DEPLOY_HOST, DEPLOY_USER, DEPLOY_PATH

📖 Quick Reference

Local Commands

npm run lint Run all linters
npm run validate Check assets + lint
npm run ci Full CI check

Pipeline Files

.github/workflows/frontend-ci.yml CI/CD definition
frontend/package.json Linting scripts
frontend/scripts/validate.js Asset validation

Triggers

  • Push to main / master → full CI + deploy
  • Push to develop → CI only
  • Pull request → CI only
  • Manual trigger → CI + optional deploy

⚙️ Workflow Definition 

name: Frontend CI/CD

on:
  push:
    branches: [main, master, develop]
    paths: ["frontend/**", ".github/workflows/frontend-ci.yml"]
  pull_request:
    branches: [main, master]
    paths: ["frontend/**"]
  workflow_dispatch:
    inputs:
      deploy:
        description: "Deploy to production"
        type: boolean
        default: false

jobs:
  validate:
    name: Validate
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: "20" }
      - run: npm ci                         # Install linters
      - run: npm run lint:html              # Check HTML
      - run: npm run lint:css               # Check CSS
      - run: npm run lint:js                # Check JS
      - run: npm run validate               # Check assets
      - uses: actions/upload-artifact@v4    # Package files

  deploy:
    needs: validate
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/download-artifact@v4
      - run: rsync -avz frontend/ user@server:/path/