> ## Documentation Index
> Fetch the complete documentation index at: https://hubify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Lab Site Customization

> Customize your lab's public research website, theme, pages, custom domain, and content management.

# Lab Site Customization

Every lab gets a public website at `{slug}.hubify.app`. This guide shows you how to customize its appearance, add pages, connect a custom domain, and manage content.

## Default Site

A new lab site comes with:

* Homepage with research overview
* Papers page (empty until you create papers)
* Activity timeline (populates as experiments run)
* Auto-synced data explorer
* Responsive design (works on mobile)

## Theme Customization

<Tabs>
  <Tab title="Web UI">
    Go to **Lab Settings > Site > Theme**:

    * **Primary color**, Your brand accent color (default: `#5fb88a`)
    * **Heading font**, Serif or sans-serif headings
    * **Body font**, Body text font
    * **Code font**, Monospace font for code blocks
    * **Mode**, Light or dark
  </Tab>

  <Tab title="CLI">
    ```bash theme={null}
    # Set primary color
    hubify site theme --primary "#5fb88a"

    # Set fonts
    hubify site theme --heading-font "Newsreader" --body-font "Inter" --code-font "JetBrains Mono"

    # Preview changes
    hubify site preview
    ```
  </Tab>
</Tabs>

## Adding Pages

Add custom pages to your site:

```bash theme={null}
# Add a methods page
hubify site page add \
  --slug "methods" \
  --title "Our Methods" \
  --nav-position 4

# Add an explainer page
hubify site page add \
  --slug "explained" \
  --title "Explained Simply" \
  --template explainer
```

### Page Templates

| Template    | Description                                                 |
| ----------- | ----------------------------------------------------------- |
| `blank`     | Empty page, you write everything                            |
| `explainer` | Non-technical explanation, pre-structured for accessibility |
| `gallery`   | Figure gallery with lightbox viewer                         |
| `timeline`  | Visual timeline of events                                   |
| `glossary`  | Searchable terms with equations                             |
| `data`      | Interactive data explorer embed                             |

## Navigation

Customize the navigation bar:

```bash theme={null}
# View current nav
hubify site nav show

# Reorder pages
hubify site nav reorder "Research,Papers,Explained,Data,Figures,Timeline,Activity"

# Add an external link
hubify site nav add-link --label "arXiv" --url "https://arxiv.org/abs/XXXX.XXXXX"
```

The nav includes a mobile hamburger menu automatically.

## Custom Domain

Connect your own domain:

<Steps>
  <Step title="Add a CNAME record">
    In your DNS provider, add a CNAME record:

    ```
    research.yourdomain.com → cname.hubify.app
    ```
  </Step>

  <Step title="Configure in Hubify">
    ```bash theme={null}
    hubify site domain --set research.yourdomain.com
    ```
  </Step>

  <Step title="Wait for SSL">
    SSL is provisioned automatically via Let's Encrypt. This usually takes 1-5 minutes.
  </Step>

  <Step title="Verify">
    ```bash theme={null}
    hubify site domain --status
    ```

    ```
    Domain: research.yourdomain.com
    SSL: Active
    Status: Connected
    ```
  </Step>
</Steps>

## Content Management

### Editing Pages

Edit page content directly:

```bash theme={null}
# Open a page for editing
hubify site page edit "explained"

# Update page content from a file
hubify site page update "explained" --file explained.html
```

### Embedding Components

Embed interactive components on any page:

```html theme={null}
<!-- Data Explorer -->
<hubify-data-explorer experiment="EXP-054" />

<!-- Activity Feed -->
<hubify-activity-feed limit="20" />

<!-- Paper Status Card -->
<hubify-paper-card paper="paper-1" />

<!-- Figure Gallery -->
<hubify-figure-gallery />
```

### Syncing Content

The site syncs automatically when:

* An experiment completes
* A paper is updated
* The knowledge base changes
* Figures are generated

You can also force a sync:

```bash theme={null}
hubify site sync
```

## Deployment

Lab sites deploy automatically on every change. They are hosted on Vercel with:

* Global CDN
* Automatic SSL
* Zero-config deployment
* Instant rollback

```bash theme={null}
# Check deployment status
hubify site status

# View deploy history
hubify site deploys

# Rollback to a previous deploy
hubify site rollback --to deploy-abc123
```

## Analytics

Basic analytics are available for public lab sites:

* Page views per page
* Unique visitors
* Top referrers
* Geographic distribution

```bash theme={null}
hubify site analytics --period 30d
```