
Оглавление:
2025 Автор: John Day | [email protected]. Последнее изменение: 2025-01-23 15:05

Если ваш блог простой и трафик нормальный, я посоветую вам использовать esp8266 в качестве сервера блога. Один год стоит 1 доллар за электричество:)
И в результате у вас будет такой сайт:
Шаг 1. Веб-дизайн

Это зависит от каждого. Я использую документ Google, чтобы рассказать о себе, а затем сохраняю его на свой компьютер в формате html. Но в сегодняшнем руководстве я быстро загрузил шаблон, доступный в Интернете (https://www.w3schools.com/w3css/w3css_templates.asp). Здесь нужно отметить лишь несколько деталей:
- Фотографии должны загружаться на определенный хост, а затем возвращаться ссылка на файл html (я использую временный photobucket)
- Библиотеки js, css обычно имеют cdn. Используйте cdn вместо сохранения непосредственно в esp8266.
- Например, у меня будет только домашняя страница, чтобы я мог представиться, чтобы вы могли развить больше:)
И вот результат при открытии html файла на компьютере:
Шаг 2: конвертируйте HTML-файл в H-файл
Откройте только что полученный html-файл (css, js). Затем вы копируете контент. Перейдите на https://hs2t.com/tools/html2CString. Вставьте содержимое в первое поле и нажмите «Преобразовать». Скопируйте содержимое во второе поле:) поместите в файл.h
Шаг 3: Код Esp8266 (с использованием Arduino)
Загрузите и отредактируйте код ниже:
- Измените свой домашний Wi-Fi
- Измените статический IP-адрес на настройки модема (вы должны назначить фиксированный IP-адрес, чтобы упростить открытие порта в Интернет)
- Для раздела ddns я объясню больше в разделе о присвоении доменного имени бесплатно!
Хорошо, после загрузки кода перейдите к его локальному тесту IP (например, 192.168.1.24), чтобы убедиться, что веб-сайт в порядке: D
Шаг 4: порт NAT

Это зависит от вашего модема, например, от вашего модема. У меня дома используется модем gw040
Когда порт будет завершен, вы можете перейти в наш блог из Интернета, используя IP-адрес (например, https://123.123.123.123). твой.
Примечание:
- Несколько модемов открывают порт, затем просматривать веб-страницы по общедоступному IP-адресу в сети невозможно, но вне сети нормальный вид - это нормально.
- Если вы используете передатчик 3G на сетевой уровень для ESP8266, он не будет работать вне Интернета:)
Шаг 5: DDNS

Поскольку наш IP-адрес динамический, нам нужно использовать службу DDNS. Как называется доменное имя, связанное с вашим домашним IP? Когда ваш домашний IP-адрес изменится, он обновит службу DDNS, чтобы служба назначила новый IP-адрес нашему домену. Сначала вы регистрируете учетную запись и бесплатное доменное имя, например myname.boxip.net, на https://boxip.net здесь I используйте имя
Затем скопируйте ссылку wget на странице настроек, чтобы заменить ее кодом ESP8266. ESP8266 по умолчанию каждые 5 минут будет вызывать DDNS-сервер для обновления IP. Теперь попробуйте https://han.boxip.net и наслаждайтесь результатами: P
Шаг 6. Видео с инструкциями на вьетнамском языке

Если вам это интересно и полезно, не забудьте подписаться на канал, чтобы получать больше видео.
Шаг 7. Статья вдохновила меня
www.instructables.com/id/How-to-Build-a-ES…
У него есть подробные инструкции по созданию веб-сервера. Но сайт простой и работает только локально. Я улучшил его, сделав его личным блогом, который можно просматривать в Интернете.
Рекомендуемые:
Создайте космическую станцию в TinkerCad Codeblock -- Простое руководство: 7 шагов (с изображениями)

Создайте космическую станцию в TinkerCad Codeblock || Простое руководство: хотя мысль о жизни в космосе может показаться научной фантастикой, пока вы читаете это, Международная космическая станция вращается вокруг Земли со скоростью пять миль в секунду, один раз вращаясь вокруг Земли. каждые 90 минут. В этом проекте вы узнаете
Создайте свой собственный датчик влажности почвы с помощью Arduino !!!: 10 шагов

Создайте свой собственный датчик влажности почвы с помощью Arduino !!!: О !!! В этой инструкции мы собираемся соединить датчик влажности почвы FC-28 с Arduino. Этот датчик измеряет объемное содержание воды внутри почвы и выдает нам уровень влажности на выходе. Датчик оборудован как анало
ПираТарбут, Блог Medioambiental Con Emisora De Radio (CHT): 7 шагов

ПираТарбут, Блог Medioambiental Con Emisora De Radio (CHT): PIraTarbut es un proyecto interdisciplinario maker, donde buscamos create una estaci ó n de bajo alcance que puede emitir un podcast acerca del medio ambienases. primera es la fase de preparaci ó n
Как создать блог в Blogger: 9 шагов

Как создать блог в Blogger: если у вас есть мнение, которым вы хотите поделиться, блог - это то, что вам нужно! Если у вас никогда раньше не было блога, я думаю, что вы хотите использовать blogger. Я научу вас, как сделать блог в сервисе Blogger
Как разместить собственный блог на Wordpress: 6 шагов

Как разместить собственный блог Wordpress: установка Wordpress на собственный сервер дает вам больше контроля над своим блогом. Это руководство представляет собой пошаговое руководство о том, как это сделать, совершенно бесплатно и не требует навыков программирования