345 lines
6.9 KiB
Markdown
345 lines
6.9 KiB
Markdown
# 🚀 Homarr Setup Walkthrough (Logged In)
|
|
|
|
You're logged in! Let's create your boards step by step.
|
|
|
|
---
|
|
|
|
## Step 1: Create Your First Board
|
|
|
|
### 1.1 Go to Board Management
|
|
```
|
|
1. Click your profile icon (top right)
|
|
2. Select "Manage"
|
|
3. Click "Boards" in left sidebar
|
|
4. Click "New Board" button
|
|
```
|
|
|
|
### 1.2 Create "Main Dashboard" Board
|
|
```
|
|
Name: Main Dashboard
|
|
Description: Public dashboard with news and quick links
|
|
Visibility: Public
|
|
```
|
|
|
|
Click **Create**
|
|
|
|
---
|
|
|
|
## Step 2: Add Apps (Before Adding to Board)
|
|
|
|
### 2.1 Go to App Management
|
|
```
|
|
1. While in Manage section
|
|
2. Click "Apps" in left sidebar
|
|
3. Click "New App" button
|
|
```
|
|
|
|
### 2.2 Add Common Apps
|
|
|
|
**Add Gmail:**
|
|
```
|
|
Name: Gmail
|
|
Description: Email
|
|
Icon URL: gmail (just type "gmail", it will find it)
|
|
URL: https://mail.google.com
|
|
```
|
|
|
|
**Add GitHub:**
|
|
```
|
|
Name: GitHub
|
|
Description: Code Repository
|
|
Icon URL: github
|
|
URL: https://github.com
|
|
```
|
|
|
|
**Add Proxmox (if you have it):**
|
|
```
|
|
Name: Proxmox
|
|
Description: Virtualization
|
|
Icon URL: proxmox
|
|
URL: https://proxmox.lemonlink.eu (or your IP)
|
|
```
|
|
|
|
**Add 10-15 more apps you use regularly...**
|
|
|
|
Click **Create** for each app.
|
|
|
|
---
|
|
|
|
## Step 3: Add Widgets to Your Board
|
|
|
|
### 3.1 Open Your Board for Editing
|
|
```
|
|
1. Go back to "Boards" in Manage
|
|
2. Click on "Main Dashboard"
|
|
3. Click "Open Board"
|
|
4. Click the "Pencil Icon" (Edit Mode)
|
|
```
|
|
|
|
### 3.2 Add Clock Widget
|
|
```
|
|
1. Click "Add Item" button
|
|
2. Select "Clock"
|
|
3. It appears on board
|
|
4. Click the 3 dots (⋮) on the widget → "Edit Item"
|
|
5. Settings:
|
|
- Show date: ✅
|
|
- Time format: 24h (or your preference)
|
|
- Size: Make it 2x2 (drag bottom-right corner)
|
|
6. Click Save
|
|
```
|
|
|
|
### 3.3 Add Weather Widget
|
|
```
|
|
1. Click "Add Item"
|
|
2. Select "Weather"
|
|
3. Edit item (3 dots → Edit)
|
|
4. Enter your location (City, Country)
|
|
5. Set temperature unit
|
|
6. Save
|
|
```
|
|
|
|
### 3.4 Add RSS Feed Widget (Homelab News)
|
|
```
|
|
1. Click "Add Item"
|
|
2. Select "RSS Feed"
|
|
3. Edit item
|
|
4. Settings:
|
|
|
|
Name: Homelab News
|
|
|
|
Feed URLs (one per line):
|
|
https://selfh.st/rss/
|
|
https://noted.lol/rss/
|
|
https://feeds.fireside.fm/selfhosted/rss
|
|
|
|
Posts limit: 10
|
|
Description line clamp: 3
|
|
Hide description: No
|
|
|
|
5. Save
|
|
6. Resize to make it wider (3x2 or 4x2)
|
|
```
|
|
|
|
### 3.5 Add More RSS Widgets
|
|
|
|
**Cybersecurity News:**
|
|
```
|
|
Feed URLs:
|
|
https://www.bleepingcomputer.com/feed/
|
|
https://feeds.feedburner.com/TheHackersNews
|
|
https://krebsonsecurity.com/feed/
|
|
```
|
|
|
|
**Tech News:**
|
|
```
|
|
Feed URLs:
|
|
https://news.ycombinator.com/rss
|
|
https://techcrunch.com/feed/
|
|
https://feeds.arstechnica.com/arstechnica/index
|
|
```
|
|
|
|
### 3.6 Add Apps to Board
|
|
```
|
|
1. Click "Add Item"
|
|
2. Select "App"
|
|
3. Edit item (3 dots → Edit)
|
|
4. Select the app from dropdown (Gmail, GitHub, etc.)
|
|
5. Save
|
|
6. Repeat for each app
|
|
```
|
|
|
|
### 3.7 Arrange Everything
|
|
```
|
|
- Drag widgets/apps to position them
|
|
- Resize by dragging bottom-right corner
|
|
- Align items nicely in rows
|
|
- Exit edit mode (click "Exit" or checkmark) to save
|
|
```
|
|
|
|
---
|
|
|
|
## Step 4: Create System Monitor Board (Private)
|
|
|
|
### 4.1 Create New Board
|
|
```
|
|
Manage → Boards → New Board
|
|
|
|
Name: System Overview
|
|
Description: Server monitoring
|
|
Visibility: Private (requires login)
|
|
```
|
|
|
|
### 4.2 Add Dash. Widget
|
|
```
|
|
1. Open board → Edit Mode
|
|
2. Add Item → iFrame
|
|
3. Edit settings:
|
|
|
|
Name: System Monitor
|
|
URL: http://YOUR-SERVER-IP:3001
|
|
|
|
4. Make it FULL WIDTH (6x4 or largest size)
|
|
5. Save and exit edit mode
|
|
```
|
|
|
|
---
|
|
|
|
## Step 5: Create Infrastructure Board (Private)
|
|
|
|
### 5.1 Create Board
|
|
```
|
|
Name: Infrastructure
|
|
Visibility: Private
|
|
```
|
|
|
|
### 5.2 Add Docker Integration
|
|
```
|
|
1. Go to Manage → Integrations
|
|
2. Click "New Integration"
|
|
3. Select "Docker"
|
|
4. Name: Local Docker
|
|
5. Socket: /var/run/docker.sock
|
|
6. Test connection
|
|
7. Save
|
|
```
|
|
|
|
### 5.3 Add Apps to Board
|
|
```
|
|
Add apps you created earlier:
|
|
- Proxmox
|
|
- Portainer
|
|
- TrueNAS
|
|
- Pi-hole
|
|
- Grafana
|
|
- etc.
|
|
```
|
|
|
|
---
|
|
|
|
## Step 6: Theme Customization
|
|
|
|
### 6.1 Open Board Settings
|
|
```
|
|
1. Open a board
|
|
2. Click "Settings" (gear icon) in top bar
|
|
3. Click "Appearance" tab
|
|
```
|
|
|
|
### 6.2 Dark Theme Colors
|
|
```
|
|
Primary Color: #6366f1 (Indigo)
|
|
Secondary Color: #8b5cf6 (Purple)
|
|
Background Color: #0a0a0f (Very dark)
|
|
Text Color: #e2e8f0 (Light gray)
|
|
Accent Color: #fbbf24 (Amber/Gold)
|
|
```
|
|
|
|
### 6.3 Custom CSS (Optional)
|
|
```
|
|
In Appearance settings, find "Custom CSS" box:
|
|
|
|
.homarr-card {
|
|
background: rgba(255, 255, 255, 0.05) !important;
|
|
backdrop-filter: blur(10px) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
border-radius: 16px !important;
|
|
}
|
|
|
|
.homarr-card:hover {
|
|
transform: translateY(-4px) !important;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Step 7: Quick Tips
|
|
|
|
### Keyboard Shortcuts
|
|
```
|
|
Ctrl + K (or /) → Open search
|
|
Esc → Close search
|
|
```
|
|
|
|
### Search Usage
|
|
```
|
|
1. Press Ctrl+K
|
|
2. Type "proxm" → Finds Proxmox
|
|
3. Press Enter → Opens it
|
|
```
|
|
|
|
### Edit Mode Tips
|
|
```
|
|
- Drag to move items
|
|
- Drag corner to resize
|
|
- 3 dots menu → Edit, Delete, Move
|
|
- Items snap to grid automatically
|
|
```
|
|
|
|
---
|
|
|
|
## Example Layouts
|
|
|
|
### Main Dashboard Layout
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ [CLOCK] [WEATHER] [SEARCH] │
|
|
├─────────────────────────────────────────┤
|
|
│ [RSS - Homelab] [RSS - Cyber] │
|
|
│ (2 columns) │
|
|
├─────────────────────────────────────────┤
|
|
│ [Gmail] [GitHub] [Reddit] [YouTube] │
|
|
│ [Proxmox] [Portainer] [Plex] │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
### System Overview Layout
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ │
|
|
│ [DASH. IFRAME] │
|
|
│ (Full Screen) │
|
|
│ │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## ✅ Check Your Progress
|
|
|
|
- [ ] Created Main Dashboard (Public)
|
|
- [ ] Created System Overview (Private)
|
|
- [ ] Added 5-10 Apps
|
|
- [ ] Added Clock + Weather
|
|
- [ ] Added 3 RSS feeds
|
|
- [ ] Arranged items nicely
|
|
- [ ] Set dark theme colors
|
|
- [ ] Tested search (Ctrl+K)
|
|
|
|
---
|
|
|
|
## 🆘 Common Issues
|
|
|
|
### Can't find apps in dropdown?
|
|
```
|
|
You need to CREATE apps first in Manage → Apps
|
|
THEN add them to boards
|
|
```
|
|
|
|
### Widgets not loading?
|
|
```
|
|
- Check if URLs are correct
|
|
- For RSS: Verify feed URLs work in browser
|
|
- For Dash: Check if http://IP:3001 is accessible
|
|
```
|
|
|
|
### Changes not saving?
|
|
```
|
|
Make sure to EXIT EDIT MODE (click checkmark or "Exit")
|
|
```
|
|
|
|
---
|
|
|
|
**Need more help?** Check the other guides in your repo or ask!
|