✨ Create a GH pages website (klaasnicolaas#90)

* 🚚 Move images to the static directory

* Auto build firmware and gh-pages website

* Change it to publish workflow

* Add some information

* Change naming in the CI workflow

* Replace !secrets for substitutions

* Comment out the wifi credentials

.github/workflows/ci.yaml

@@ -0,0 +1,18 @@
+---
+# Can we build firmware check
+name: CI
+
+on:
+  pull_request:
+
+jobs:
+  ci:
+    name: "🛠️ Build check"
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⤵️ Check out files from GitHub
+        uses: actions/checkout@v2
+      - name: Test firmware build
+        uses: esphome/build-action@v1.0.1
+        with:
+          yaml_file: home_assistant_glow.yaml

.github/workflows/publish.yaml

@@ -0,0 +1,18 @@
+---
+# Build the ESPHome binary firmware
+# And deploy it to Github Pages.
+name: Build firmware
+
+on:
+  release:
+    types:
+      - published
+
+jobs:
+  build:
+    name: "🛠️ Build ESPHome firmware"
+    uses: esphome/workflows/.github/workflows/build.yml@main
+    with:
+      files: home_assistant_glow.yaml
+    secrets:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Readme.md

@@ -14,14 +14,14 @@
 During my internship at [Nabu Casa][nc] in the first half of 2021, I focused on energy management in homes and how to collect all energy data and display it on a dashboard. From core release **2021.8** you can now also get started with the [energy dashboard][energy] in Home Assistant!
 
 <p align="center">
-  <img width="80%" src="images/home-assistant-glow.jpg">
+  <img width="80%" src="static/images/home-assistant-glow.jpg">
 </p>
 
 <details>
   <summary>CLICK HERE! To see the Home Assistant Glow in action.</summary>
 
   <p align="center">
-    <img src="images/glow_sensor_testing.gif" alt="Glow testing" width="40%"/><img src="images/glow_in_action.gif" alt="Glow in action" width="40%"/>
+    <img src="static/images/glow_sensor_testing.gif" alt="Glow testing" width="40%"/><img src="static/images/glow_in_action.gif" alt="Glow in action" width="40%"/>
   </p>
 </details>
 
@@ -32,7 +32,7 @@ Home Assistant Glow makes a *(not so)* smart meter without a P1 port easily read
 To make sure your meter will work with the Home Assistant Glow, you have to look for the **imp/kWh** rate (see picture). Note the value, because it will be of importance at a later stage to configure the `.yaml` file.
 
 <p align="center">
-  <img width="60%" src="images/pulse_rate.png">
+  <img width="60%" src="static/images/pulse_rate.png">
 </p>
 
 ## Hardware
@@ -86,7 +86,7 @@ Issue: [#34][issue_34]
 A number of users have reported receiving the recommended diode board from various sources, only to find the diode has been soldered to the board the wrong way round. This can cause that your pulse LED is not measured regardless of the sensitivity you set for the diode.
 
 <p align="center">
-  <img src="images/correct_board.png">
+  <img src="static/images/correct_board.png">
 </p>
 
 The large triangular part of the diode, should be soldered to the positive side of the board not the negative. If yours is orientated as above, you should desolder the photodiode invert it and resolder so the larger triangular part of the diode is connected to positive.
@@ -133,5 +133,5 @@ SOFTWARE.
 [issues-url]: https://github.com/klaasnicolaas/home-assistant-glow/issues
 [license-shield]: https://img.shields.io/github/license/klaasnicolaas/home-assistant-glow.svg
 [commits-shield]: https://img.shields.io/github/commit-activity/y/klaasnicolaas/home-assistant-glow.svg
-[commits]: https://github.com/klaasnicolaas/home-assistant-glow/commits/master
+[commits]: https://github.com/klaasnicolaas/home-assistant-glow/commits/main
 [last-commit-shield]: https://img.shields.io/github/last-commit/klaasnicolaas/home-assistant-glow.svg

home_assistant_glow.yaml

@@ -10,9 +10,14 @@ substitutions:
   device_description: "Measure your energy consumption with the pulse LED on your smart meter"
   pulse_pin: GPIO12
   status_led: GPIO5
+
   # imp/kWh rate ⬇ #
   pulse_rate: '1000'
-
+
+  # Webserver credentials ⬇ #
+  web_username: 'glow'
+  web_password: 'esphome'
+
 dashboard_import:
   package_import_url: github://klaasnicolaas/home-assistant-glow/home_assistant_glow.yaml
 
@@ -25,14 +30,14 @@ esphome:
   platform: ESP32
   board: nodemcu-32s
 
+# WiFi credentials #
 wifi:
-  ssid: !secret wifi_ssid
-  password: !secret wifi_password
+  # ssid: 'CHANGEME'       # Enter your WiFi SSID here. Example: `ssid: 'your_network_name'`
+  # password: 'CHANGEME'   # Enter your wifi password here. Example: `password: 'abcde123456'`
 
   # Enable fallback hotspot (captive portal) in case wifi connection fails
   ap:
     ssid: '${device_name}'
-    password: !secret fallback_password
 
 captive_portal:
 
@@ -44,7 +49,6 @@ improv_serial:
 
 # Enable Home Assistant API
 api:
-  password: !secret esphome_api_password
   services:
   - service: reset_total
     then:
@@ -60,8 +64,8 @@ ota:
 web_server:
   port: 80
   auth:
-    username: !secret esphome_web_username
-    password: !secret esphome_web_password
+    username: '${web_username}'
+    password: '${web_password}'
 
 output:
   # - platform: gpio
@@ -91,13 +95,13 @@ status_led:
 text_sensor:
   - platform: version
     hide_timestamp: true
-    name: "${friendly_name} - ESPHome Version"
+    name: '${friendly_name} - ESPHome Version'
   - platform: wifi_info
     ip_address:
-      name: "${friendly_name} - IP Address"
+      name: '${friendly_name} - IP Address'
       icon: mdi:wifi
     ssid:
-      name: "${friendly_name} - Connected SSID"
+      name: '${friendly_name} - Connected SSID'
       icon: mdi:wifi-strength-2
 
 sensor:

static/_config.yaml

@@ -0,0 +1,4 @@
+# CHANGEME: Set these variable to your liking
+title: Home Assistant Glow 🌟
+description: Powered by ESPHome and ESP Web Tools
+theme: jekyll-theme-cayman

static/index.md

@@ -0,0 +1,32 @@
+[![GitHub Sponsors][sponsor-shield]][sponsor-url]
+
+[![GitHub release][release-shield]][release-url]
+[![Stargazers][stars-shield]][stars-url]
+[![GitHub Last Commit][last-commit-shield]][commits-url]
+
+# Home Assistant Glow
+
+<p align="center">
+  <img width="80%" src="images/home-assistant-glow.jpg">
+</p>
+
+Home Assistant Glow makes a *(not so)* smart meter without a P1 port easily readable, reading the pulse LED that is always present in most cases and it works with [ESPHome][esphome]! To neatly hide it all in your meter cupboard, a case has been designed that you can 3D print yourself.
+
+## Installation
+
+You can use the button below to install the home assistant glow firmware directly to your device via USB from the browser.
+
+<esp-web-install-button manifest="./manifest.json"></esp-web-install-button>
+
+<script type="module" src="https://unpkg.com/esp-web-tools@5.2.0/dist/web/install-button.js?module"></script>
+
+[esphome]: https://esphome.io/
+
+[release-shield]: https://img.shields.io/github/release/klaasnicolaas/home-assistant-glow.svg
+[release-url]: https://GitHub.com/klaasnicolaas/home-assistant-glow/releases/
+[stars-shield]: https://img.shields.io/github/stars/klaasnicolaas/home-assistant-glow.svg
+[stars-url]: https://github.com/klaasnicolaas/home-assistant-glow/stargazers
+[last-commit-shield]: https://img.shields.io/github/last-commit/klaasnicolaas/home-assistant-glow.svg
+[commits-url]: https://github.com/klaasnicolaas/home-assistant-glow/commits/main
+[sponsor-shield]: https://img.shields.io/github/sponsors/klaasnicolaas?label=Sponsor%20this%20project&style=for-the-badge
+[sponsor-url]: https://github.com/sponsors/klaasnicolaas