Migrate first blog post
This commit is contained in:
yehor
parent
d10a177923
commit
fcd682d358
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
@ -0,0 +1,118 @@
|
||||
---
|
||||
slug: making-a-wifi-enabled-smart-air-humidifier
|
||||
title: "DIY Smart Appliance: Making a WiFi-enabled smart air humidifier from a regular one"
|
||||
tags: [smart home, DIY, ESP8266, ESPHome, humidifier, Wemos D1 mini, WiFi]
|
||||
---
|
||||
|
||||
So there was a simple air humidifier… Actually, this post is a good example of how to make your regular boring home appliance a little smarter. The main part of my humidifier will be the Wemos (or Lolin) D1 mini board based on the ESP8266 WiFi chip.
|
||||
|
||||
<!-- truncate -->
|
||||
|
||||
My air humidifier has no automatic turn on and off, no timers, only a regulator that also works like a switch. The idea is to make it WiFi-friendly and work with Home Assistant through MQTT.
|
||||
|
||||
Actually, I was pretty lucky with this device because there are other models of it with built-in sensors, screens, and other stuff so the hardware was prepared to connect additional modules. But we don’t want to measure humidity inside the humidifier right? So the sensor will be a separate part of the system.
|
||||
|
||||
## Teardown
|
||||
|
||||
|
||||
|
||||
So it has an AC/DC power supply. Now we need to find 5v power line for our additions. All internal parts are powered with 12V DC so we need a step down module. In my case there was an empty 12V connector right on the factory board:
|
||||
|
||||
|
||||
|
||||
## Assembling
|
||||
|
||||
So we will connect there a regulated power down module and set it up to a 5V output:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Now the main hardware. It is a Wemos D1 Mini ESP8266-based board (well almost because in my case it is a no-name copy of it, don’t buy it please) and a beautiful relay brick from Itead Studio:
|
||||
|
||||
|
||||
|
||||
Connect it all together. Wemos D1 mini can be powered with stable 5V DC power connected to its 5V pin:
|
||||
|
||||
|
||||
|
||||
Now we need to unsolder the wires from a factory button or switch and connect it to our relay:
|
||||
|
||||
|
||||
|
||||
The last step will be gluing all new parts inside our device. Don’t repeat my mistake and glue the WiFi board with micro-USB port pointing outside of the humidifier, not inside it:
|
||||
|
||||
|
||||
|
||||
## Improvements
|
||||
|
||||
The final version of my humidifier also checks the state of the factory switch and reports the state to [MQTT binary sensor](https://www.home-assistant.io/integrations/binary_sensor.mqtt) in Home Assistant. Here is a final diagram of this project:
|
||||
|
||||
|
||||
|
||||
The software was also improved. There was [WiFiManager for ESP8266](https://github.com/tzapu/WiFiManager) boards added to make it possible to configure WiFi and MQTT settings without flashing the board.
|
||||
|
||||
## The code
|
||||
|
||||
The old code was missing long time ago.
|
||||
|
||||
## Home Assistant
|
||||
|
||||
An example of MQTT platform switch configuration in Home Assistant for humidifier:
|
||||
|
||||
```yaml
|
||||
switch:
|
||||
– platform: mqtt
|
||||
name: "Humidifier"
|
||||
state_topic: "edwin/humidifier/state"
|
||||
command_topic: "edwin/humidifier/power"
|
||||
state_on: "on"
|
||||
state_off: "off"
|
||||
payload_on: "1"
|
||||
payload_off: "0"
|
||||
```
|
||||
|
||||
## ESPHome migration
|
||||
|
||||
And finally here is a YAML configuration of my humidifier after it was migrated to [ESPHome](https://esphome.io):
|
||||
|
||||
```yaml
|
||||
esphome:
|
||||
name: humidifier
|
||||
platform: ESP8266
|
||||
board: d1_mini
|
||||
|
||||
wifi:
|
||||
ssid: "****"
|
||||
password: "************"
|
||||
|
||||
# Enable fallback hotspot (captive portal) in case wifi connection fails
|
||||
ap:
|
||||
ssid: "Edwin Humidifier"
|
||||
password: "************"
|
||||
|
||||
captive_portal:
|
||||
|
||||
# Enable logging
|
||||
logger:
|
||||
|
||||
# Enable Home Assistant API
|
||||
api:
|
||||
password: "************"
|
||||
|
||||
ota:
|
||||
password: "************"
|
||||
|
||||
switch:
|
||||
- platform: gpio
|
||||
name: "Humidifier"
|
||||
pin: D1
|
||||
restore_mode: ALWAYS_OFF
|
||||
|
||||
binary_sensor:
|
||||
- platform: gpio
|
||||
name: "Humidifier state"
|
||||
pin:
|
||||
number: D5
|
||||
mode: INPUT
|
||||
```
|
||||
@ -1,12 +0,0 @@
|
||||
---
|
||||
slug: first-blog-post
|
||||
title: First Blog Post
|
||||
authors: [slorber, yangshun]
|
||||
tags: [hola, docusaurus]
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet...
|
||||
|
||||
<!-- truncate -->
|
||||
|
||||
...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
@ -1,44 +0,0 @@
|
||||
---
|
||||
slug: long-blog-post
|
||||
title: Long Blog Post
|
||||
authors: yangshun
|
||||
tags: [hello, docusaurus]
|
||||
---
|
||||
|
||||
This is the summary of a very long blog post,
|
||||
|
||||
Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
|
||||
|
||||
<!-- truncate -->
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
@ -1,24 +0,0 @@
|
||||
---
|
||||
slug: mdx-blog-post
|
||||
title: MDX Blog Post
|
||||
authors: [slorber]
|
||||
tags: [docusaurus]
|
||||
---
|
||||
|
||||
Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
|
||||
|
||||
:::tip
|
||||
|
||||
Use the power of React to create interactive blog posts.
|
||||
|
||||
:::
|
||||
|
||||
{/* truncate */}
|
||||
|
||||
For example, use JSX to create an interactive button:
|
||||
|
||||
```js
|
||||
<button onClick={() => alert('button clicked!')}>Click me!</button>
|
||||
```
|
||||
|
||||
<button onClick={() => alert('button clicked!')}>Click me!</button>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB |
@ -1,29 +0,0 @@
|
||||
---
|
||||
slug: welcome
|
||||
title: Welcome
|
||||
authors: [slorber, yangshun]
|
||||
tags: [facebook, hello, docusaurus]
|
||||
---
|
||||
|
||||
[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
|
||||
|
||||
Here are a few tips you might find useful.
|
||||
|
||||
<!-- truncate -->
|
||||
|
||||
Simply add Markdown files (or folders) to the `blog` directory.
|
||||
|
||||
Regular blog authors can be added to `authors.yml`.
|
||||
|
||||
The blog post date can be extracted from filenames, such as:
|
||||
|
||||
- `2019-05-30-welcome.md`
|
||||
- `2019-05-30-welcome/index.md`
|
||||
|
||||
A blog post folder can be convenient to co-locate blog post images:
|
||||
|
||||
|
||||
|
||||
The blog supports tags as well!
|
||||
|
||||
**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.
|
||||
@ -1,23 +0,0 @@
|
||||
yangshun:
|
||||
name: Yangshun Tay
|
||||
title: Front End Engineer @ Facebook
|
||||
url: https://github.com/yangshun
|
||||
image_url: https://github.com/yangshun.png
|
||||
page: true
|
||||
socials:
|
||||
x: yangshunz
|
||||
github: yangshun
|
||||
|
||||
slorber:
|
||||
name: Sébastien Lorber
|
||||
title: Docusaurus maintainer
|
||||
url: https://sebastienlorber.com
|
||||
image_url: https://github.com/slorber.png
|
||||
page:
|
||||
# customize the url of the author page at /blog/authors/<permalink>
|
||||
permalink: '/all-sebastien-lorber-articles'
|
||||
socials:
|
||||
x: sebastienlorber
|
||||
linkedin: sebastienlorber
|
||||
github: slorber
|
||||
newsletter: https://thisweekinreact.com
|
||||
@ -1,19 +0,0 @@
|
||||
facebook:
|
||||
label: Facebook
|
||||
permalink: /facebook
|
||||
description: Facebook tag description
|
||||
|
||||
hello:
|
||||
label: Hello
|
||||
permalink: /hello
|
||||
description: Hello tag description
|
||||
|
||||
docusaurus:
|
||||
label: Docusaurus
|
||||
permalink: /docusaurus
|
||||
description: Docusaurus tag description
|
||||
|
||||
hola:
|
||||
label: Hola
|
||||
permalink: /hola
|
||||
description: Hola tag description
|
||||
@ -2,46 +2,8 @@
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Tutorial Intro
|
||||
# What is it?
|
||||
|
||||
Let's discover **Docusaurus in less than 5 minutes**.
|
||||
This is my project of publicly available documentation of my home servers and services.
|
||||
|
||||
## Getting Started
|
||||
|
||||
Get started by **creating a new site**.
|
||||
|
||||
Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
|
||||
|
||||
### What you'll need
|
||||
|
||||
- [Node.js](https://nodejs.org/en/download/) version 18.0 or above:
|
||||
- When installing Node.js, you are recommended to check all checkboxes related to dependencies.
|
||||
|
||||
## Generate a new site
|
||||
|
||||
Generate a new Docusaurus site using the **classic template**.
|
||||
|
||||
The classic template will automatically be added to your project after you run the command:
|
||||
|
||||
```bash
|
||||
npm init docusaurus@latest my-website classic
|
||||
```
|
||||
|
||||
You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
|
||||
|
||||
The command also installs all necessary dependencies you need to run Docusaurus.
|
||||
|
||||
## Start your site
|
||||
|
||||
Run the development server:
|
||||
|
||||
```bash
|
||||
cd my-website
|
||||
npm run start
|
||||
```
|
||||
|
||||
The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
|
||||
|
||||
The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
|
||||
|
||||
Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
|
||||
Working on it...
|
||||
@ -9,7 +9,7 @@ const FeatureList = [
|
||||
Svg: require('@site/static/img/homelab.svg').default,
|
||||
description: (
|
||||
<>
|
||||
Here I'm trying my best in documenting my self-hosted journey.
|
||||
Here I'm trying my best in documenting my home servers and services.
|
||||
</>
|
||||
),
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user