← Back to mkultra.social

Custom PDS Landing Page Setup Guide

How to set up a custom landing page for your AT Protocol Personal Data Server (PDS) with live feed functionality.

Prerequisites

Step 1: Create the www Directory

SSH into your PDS server and create the web directory:

mkdir -p /pds/www

Step 2: Create Your Landing Page

Create /pds/www/index.html with your custom content. You can use my complete template or create your own.

Quick Start: Use my complete template at /template.html

Key features of the implementation:

Step 3: Update Docker Compose

Edit /pds/compose.yaml to mount the www directory in your Caddy service:

services:
  caddy:
    # ... existing config ...
    volumes:
      # ... existing volumes ...
      - type: bind
        source: /pds/www
        target: /pds/www

Step 4: Configure Caddy

Update /pds/caddy/etc/caddy/Caddyfile to serve static files:

your-domain.com {
    # Handle well-known routes (PDS requirements)
    handle /.well-known/* {
        reverse_proxy localhost:3000
    }

    # Handle XRPC API routes
    handle /xrpc/* {
        reverse_proxy localhost:3000
    }

    # Serve static files (favicon, images, etc.)
    handle /favicon.ico {
        file_server {
            root /pds/www
        }
    }

    handle /*.png {
        file_server {
            root /pds/www
        }
    }

    # Add more static file handlers as needed

    # Serve custom landing page for root
    handle / {
        file_server {
            root /pds/www
            index index.html
        }
    }

    # Fallback: everything else goes to PDS
    handle {
        reverse_proxy localhost:3000
    }
}

Step 5: Restart Services

Restart your containers to apply changes:

cd /pds
docker compose down
docker compose up -d

Optional Enhancements

Add Favicon

  1. Place favicon files in /pds/www/
  2. Add favicon links to your HTML <head> section
  3. Add Caddy handlers for favicon files

Add Background Image

  1. Upload your image to /pds/www/
  2. Add CSS background properties to your HTML
  3. Use opacity overlay for readability
  4. Add responsive design rules

Live Feed Configuration

To display posts from your PDS accounts:

  1. Find your account DIDs using AT Protocol tools
  2. Update the JavaScript ACCOUNTS array with your DIDs
  3. Update the HANDLE_MAP with your handles
  4. The feed will automatically fetch and display recent posts

Responsive Design

The template includes:

Troubleshooting

Landing page shows 404:
Static files not loading:
Live feed not working:

Security Notes

Customization Tips

This setup provides a professional-looking landing page that showcases your PDS while maintaining all AT Protocol functionality. Enjoy <3!