Skip to content

Commit 578468a

Browse files
fxfx
committed
feat: add GitHub Pages deployment workflow (#117)
1 parent 7e389e1 commit 578468a

8 files changed

Lines changed: 16287 additions & 2 deletions

File tree

‎.github/pages-index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Liebe - Home Assistant Dashboard</title>
5+
<meta charset="utf-8" />
6+
<style>
7+
body {
8+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
9+
padding: 2rem;
10+
}
11+
.container {
12+
max-width: 800px;
13+
margin: 0 auto;
14+
}
15+
code {
16+
background: #f4f4f4;
17+
padding: 0.2rem 0.4rem;
18+
border-radius: 3px;
19+
}
20+
pre {
21+
background: #f4f4f4;
22+
padding: 1rem;
23+
border-radius: 5px;
24+
overflow-x: auto;
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
<div class="container">
30+
<h1>Liebe - Home Assistant Dashboard</h1>
31+
<p>A modern, customizable dashboard for Home Assistant with a beautiful UI.</p>
32+
33+
<h2>Installation</h2>
34+
<p>Add the following to your Home Assistant <code>configuration.yaml</code>:</p>
35+
<pre><code>panel_custom:
36+
- name: liebe-panel
37+
sidebar_title: Liebe
38+
sidebar_icon: mdi:heart
39+
url_path: liebe
40+
module_url: https://fx.github.io/liebe/panel.js</code></pre>
41+
42+
<p>Then restart Home Assistant and find "Liebe" in the sidebar.</p>
43+
44+
<h2>Resources</h2>
45+
<ul>
46+
<li><a href="https://github.com/fx/liebe">GitHub Repository</a></li>
47+
<li><a href="panel.js">panel.js</a> - The Home Assistant panel module</li>
48+
</ul>
49+
</div>
50+
</body>
51+
</html>

‎.github/workflows/deploy.yml‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
# Runs on pushes targeting the default branch
5+
push:
6+
branches: ['main']
7+
8+
# Allows you to run this workflow manually from the Actions tab
9+
workflow_dispatch:
10+
11+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
12+
permissions:
13+
contents: read
14+
pages: write
15+
id-token: write
16+
17+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
18+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
19+
concurrency:
20+
group: 'pages'
21+
cancel-in-progress: false
22+
23+
jobs:
24+
# Build job
25+
build:
26+
runs-on: ubuntu-latest
27+
steps:
28+
- name: Checkout
29+
uses: actions/checkout@v4
30+
31+
- name: Setup Node
32+
uses: actions/setup-node@v4
33+
with:
34+
node-version: '20'
35+
cache: 'npm'
36+
37+
- name: Install dependencies
38+
run: npm ci
39+
40+
- name: Build Home Assistant panel
41+
run: npm run build:ha:prod
42+
43+
- name: Create GitHub Pages directory structure
44+
run: |
45+
mkdir -p ./pages-dist
46+
# Copy the panel.js file to the root
47+
cp ./dist/panel.js ./pages-dist/
48+
# Copy the index.html file
49+
cp ./.github/pages-index.html ./pages-dist/index.html
50+
51+
- name: Setup Pages
52+
uses: actions/configure-pages@v5
53+
54+
- name: Upload artifact
55+
uses: actions/upload-pages-artifact@v3
56+
with:
57+
path: './pages-dist'
58+
59+
# Deployment job
60+
deploy:
61+
environment:
62+
name: github-pages
63+
url: ${{ steps.deployment.outputs.page_url }}
64+
runs-on: ubuntu-latest
65+
needs: build
66+
steps:
67+
- name: Deploy to GitHub Pages
68+
id: deployment
69+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
# Dependencies
22
node_modules
3-
package-lock.json
43
yarn.lock
54
pnpm-lock.yaml
65

‎CLAUDE.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -869,3 +869,57 @@ The `/workspace/screenshots/` directory should:
869869
- Contain a `.gitkeep` file to ensure it's tracked in version control
870870
- Be committed to the repository
871871
- Store all development and testing screenshots
872+
873+
## GitHub Pages Deployment
874+
875+
### Automatic Deployment
876+
877+
The project is automatically deployed to GitHub Pages when changes are pushed to the `main` branch. The deployment workflow:
878+
879+
1. Builds the Home Assistant panel in production mode
880+
2. Creates a GitHub Pages site with the panel.js file
881+
3. Deploys to https://fx.github.io/liebe/
882+
883+
### Manual Deployment
884+
885+
To manually trigger a deployment:
886+
887+
1. Go to Actions tab in GitHub
888+
2. Select "Deploy to GitHub Pages" workflow
889+
3. Click "Run workflow"
890+
891+
### GitHub Pages Configuration
892+
893+
The deployment uses:
894+
895+
- **Build script**: `npm run build:ha:prod`
896+
- **Source**: GitHub Actions
897+
- **Branch**: Automated deployment (no gh-pages branch)
898+
- **URL**: https://fx.github.io/liebe/
899+
900+
### Files Created
901+
902+
- `/panel.js` - The Home Assistant panel module
903+
- `/index.html` - Landing page with installation instructions
904+
905+
### Deployment Workflow
906+
907+
The `.github/workflows/deploy.yml` file handles:
908+
909+
1. Building the production panel
910+
2. Creating GitHub Pages artifacts
911+
3. Deploying to GitHub Pages
912+
4. Setting proper permissions
913+
914+
### Usage
915+
916+
Users can use the GitHub Pages hosted version by adding to their Home Assistant configuration:
917+
918+
```yaml
919+
panel_custom:
920+
- name: liebe-panel
921+
sidebar_title: Liebe
922+
sidebar_icon: mdi:heart
923+
url_path: liebe
924+
module_url: https://fx.github.io/liebe/panel.js
925+
```

‎README.md‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,31 @@ panel_custom:
3333
3434
## Production
3535
36-
Host Liebe on any web server and add to your `configuration.yaml`:
36+
### Option 1: GitHub Pages (Recommended)
37+
38+
The easiest way to use Liebe is through the GitHub Pages hosted version:
39+
40+
```yaml
41+
panel_custom:
42+
- name: liebe-panel
43+
sidebar_title: Liebe
44+
sidebar_icon: mdi:heart
45+
url_path: liebe
46+
module_url: https://fx.github.io/liebe/panel.js
47+
```
48+
49+
### Option 2: Self-hosting
50+
51+
You can also build and host Liebe on your own web server:
52+
53+
```bash
54+
# Build for production
55+
npm run build:ha:prod
56+
57+
# Upload dist/panel.js to your web server
58+
```
59+
60+
Then add to your `configuration.yaml`:
3761

3862
```yaml
3963
panel_custom:
@@ -69,6 +93,8 @@ homeassistant:
6993
7094
- `npm run dev` - Start development server
7195
- `npm run build` - Build SPA application
96+
- `npm run build:ha` - Build Home Assistant panel (development)
97+
- `npm run build:ha:prod` - Build Home Assistant panel (production)
7298
- `npm run typecheck` - Run TypeScript type checking
7399
- `npm run lint` - Run ESLint
74100
- `npm run format` - Format code with Prettier

0 commit comments

Comments
 (0)