Размещаем сайт на домашнем роутере
Мне давно хотелось «потрогать руками» интернет-сервисы, настроив веб-сервер с нуля и выпустив его в Интернет. В этой статье хочу поделиться полученным опытом превращения домашнего роутера из узкофункционального устройства в практически полноценный сервер.
Началось всё с того, что служивший верой и правдой роутер TP-Link TL-WR1043ND перестал удовлетворять потребности домашней сети, захотелось 5ГГц диапазона и быстрого доступа к файлам на накопителе, подключенном к роутеру. Просмотрев профильные форумы (4pda, ixbt), сайты с отзывами и посмотрев на ассортимент местных магазинов — решил приобрести Keenetic Ultra.
В пользу именно этого устройства сработали хорошие отзывы владельцев:
Ставим переадресацию внешних портов на порты самого роутера в разделе «Сетевые правила — Переадресация»:
Теперь можно перейти к «продвинутой» части, чего я хотел от роутера:
После этого подключаем накопитель к роутеру и наблюдаем его на экране системного монитора
Переходим щелчком по «USB-диски и принтеры» в раздел «Приложения» и настраиваем общий ресурс в разделе «Сеть Windows»:
И у нас имеется сетевой ресурс, который можно использовать с компьютеров под Windows, подключив при необходимости как диск: net use y: \\192.168.1.1\SSD /persistent:yes
Скорость такого импровизированного NAS вполне достаточна для домашнего применения, по проводу он использует весь гигабит, по WiFi скорость составляет около 400-500 мегабит.
Настройка хранилища — один из необходимых шагов для настройки сервера, далее нам нужно:
— приобрести домен и статический IP адрес (можно обойтись и без этого, используя Dynamic DNS, но статический IP у меня уже был, поэтому проще оказалось воспользоваться бесплатными сервисами Яндекса — делегировав туда домен, мы получаем DNS-хостинг и почту на своем домене);
— настроить DNS сервера и добавить A-записи, указывающие на ваш IP:
Вступление в силу настроек делегирования домена и DNS занимает несколько часов, поэтому параллельно занимаемся настройкой роутера.
Для начала необходимо установить репозиторий Entware, из которого мы сможем ставить на роутер необходимые пакеты. Я воспользовался этой инструкцией, только не заливал установочный пакет по FTP, а создал папку прямо на подключенном ранее сетевом диске и скопировал туда файл обычным способом.
Получив доступ по SSH, меняем пароль командой passwd и ставим командой opkg install [имена пакетов] все нужные пакеты:
В ходе настройки на роутере оказались установлены следующие пакеты (результат вывода команды opkg list-installed):
Возможно, тут что-то лишнее затесалось, но места на накопителе много, поэтому разбираться не стал.
После установки пакетов настраиваем nginx, я пробовал с двумя доменами — на втором настроен https, и пока висит заглушка. 81 и 433 внутренние порты вместо 80 и 443 используются, поскольку на нормальных портах висят админки роутера.
Для того, чтобы сайт работал по https, воспользовался известным скриптом dehydrated, установив его по этой инструкции. Затруднений этот процесс не вызвал, запнулся только на том, что в тексте скрипта для работы на моем роутере надо закомментировать строчку в файле /opt/etc/ssl/openssl.cnf:
После получения сертификатов перезапускаем nginx командой «/opt/etc/init.d/S80nginx restart». В принципе на этом настройка закончена, но сайта еще нет — если положим в каталог /share/nginx/html файл index.html, увидим заглушку.
Чтобы разместить информацию красиво, непрофессионалу типа меня проще воспользоваться готовыми шаблонами, после долгого перебора различных каталогов нашел templatemo.com — там неплохой выбор бесплатных шаблонов, не требующих обязательного указания авторства (что редкость в интернете, большая часть шаблонов в лицензии требуют сохранить ссылку на ресурс, откуда они получены).
Выбираем подходящий шаблон — там есть на самые разные случаи, скачиваем архив, и раcпаковываем его в каталог /share/nginx/html, делать это можно уже со своего компьютера, затем редактируем шаблон (тут потребуются минимальные знания HTML, чтобы не нарушить структуру) и заменяем графику, как показано на рисунке ниже.
Резюме: роутер вполне пригоден для размещения на нем легкого сайта, в принципе — если не предполагается большой нагрузки, можно поставить и php, и экспериментировать с более сложными проектами (смотрю на nextcloud/owncloud, вроде есть успешные установки на такое железо). Возможность установки пакетов поднимает его полезность — например, когда надо было защитить RDP порт ПК в локальной сети, поставил knockd на роутер — и проброс порта к ПК открывался только после port knocking.
Почему именно роутер, а не обычный PC? Роутер — одна из немногих компьютерных железяк, круглосуточно работающих во многих квартирах, домашний роутер обычно абсолютно бесшумен и легкий сайт с числом посещений в сутки меньше сотни его совершенно не напряжет.
Сайт, который работает только без подключения к интернету Статьи редакции
Чтобы напомнить: интернет понижает продуктивность и отвлекает от важных дел.
Разработчик американской компании Formidable Крис Болин (Chris Bolin) создал сайт, который работает только в режиме офлайн. Если зайти на него при подключенном интернете, на странице появится просьба отключить соединение.
После того, как пользователь отключает интернет, он попадает на страницу с посланием Болина. Его посыл заключается в том, что интернет сильно влияет на нашу продуктивность.
Вы хотите быть продуктивными? Тогда просто выйдите в офлайн. Постоянное нахождение в интернете — это вечное наличие отвлекающих факторов, как внешних, так и внутренних.
К внешним отвлекающим факторам Болин отнёс сообщения в соцсетях и почтовых ящиках от семьи, коллег и спамщиков, у которых есть «прямой доступ к ценному вниманию пользователя», к внутренним — любопытство пользователей, которое заставляет их заходить в интернет и проверять соцсети даже при отключенных уведомлениях. По его словам, он сидел в интернете часами из любопытства
Болин заявил, что часто в голову приходят спонтанные мысли типа: «Интересно, какой второй по численности язык?», и поиск ответа не ограничивается одним запросом в Google или одной статьей на «Википедии».
Что, если определённый контент потребует от нас отключиться от интернета. Что, если у читателей будет возможность отдать свое внимание многочасовому чтению книги? Что если разработчики смогут сопоставить это с возможностями современных устройств? Наши телефоны и ноутбуки — прекрасные платформы для чтения, нам просто надо научиться распределять внимание.
По мнению Болина, контент, доступный только офлайн, также станет стимулом для пользователей и заставит их иначе мыслить. Он считает, что пользователи часто не дочитывают статьи из-за того, что в них слишком много отвлекающих внимание ссылок.
Болин также отметил, что несмотря на то, что работа многих связана с интернетом, всегда можно найти свободное время для того, чтобы поработать офлайн. По его мнению, ценность работников заключается не в умении гуглить информацию, а в способности обрабатывать её, и поэтому они могут находить что им нужно в интернете, но работать офлайн.
В конце Болин пожелал пользователям «помнить, что надо позволять себе отключаться от интернета».
Изданию Motherboard он рассказал, что браузеры реагируют, когда происходят определённые события, например, отключение от интернета. Болин подчеркнул, что развитие браузеров привело к поддержке того, что называется offline-first подход. По его словам, обычно его используют в телефонах «с нестабильным интернет-подключением». Он же «решил перевернуть всё с ног на голову» и создать «только офлайн» страницу.
Не соглашусь. Как жителю мегаполиса, пребывание в онлайне порой обеспечивает мое существование. Меня как человека, как потребителя, как работника своей компании нельзя отнести к офлайну или онлайну — мы существуем в обоих пространствах одновременно. Я вот сегодня до дома добирался в течении трёх часов из-за сильного дождя и если бы не доступ к онлайну, я бы и половины важных дел не сделал за этот период.
Написал, как теомист долбаный.
Не оправдывай себя. Мы уже сделали выводы
Сафин сейчас заплакал.
Есть у меня друг. Очень мозговитый парень. Почти любую техническую проблему он решает крайне странным, долгим, необычным способом. Он делает кучу абсолютно, на первый взгляд, ненужных и даже бредовых действий. Это постоянно подбешивает. Но в итоге он не только решает задачу, но и изменяет работу других процессов самым неожиданным образом в лучшую сторону. И он не читает никаких тжорнолов, не следит за новостями ИТ, за трендами и изменениями технологий. Он как то сам может понять возможности гаджетов по внутреннему устройству. Вобщем, у него на все есть свое мнение и на все ответы есть нечем не подкрепленные ответы.
Так вот, он последние месяцы сильно увлекся психостимуляторами, что конечно привело к развитию параноий, но тоже очень странной формы, об этом не будем. И он постоянно говорит мне о каких то мультиплатформах, схемах и о том, что есть вариант разработать сайт, заходя на который у тебя мобила заряжаться будет.
И я отправил ему эту новость.
И посмеялся про себя)
6 бесплатных конструкторов сайтов: создаём с нуля визитки, лендинги, магазины
Познакомьтесь с платформами, с помощью которых можно создавать лендинги, блоги, сайты-визитки и интернет-магазины. Условно-бесплатно.
Чтобы создать многостраничный сайт, лендинг или интернет-магазин, не обязательно нанимать программиста или веб-студию. Вы можете сделать это достаточно быстро, самостоятельно и даже бесплатно.
Ликбез: что такое конструктор сайта
Конструктор сайта — онлайн-платформа, на которой обычный пользователь без специальных знаний может запустить сайт и управлять им. Он может быть визиткой, лендингом, блогом или интернет-магазином.
Все современные сайты на конструкторах адаптированы под любые устройства: ноутбуки, планшеты и телефоны. Вам не придётся разрабатывать отдельную мобильную версию.
Сайт создается как в лего — из готовых элементов: обложек, текстовых полей, изображений, форм, кнопок, пунктов меню и др. Нужно просто добавить необходимые блоки на страницу, изменить их содержание и внешний вид.
Шаблоны и блоки — типовые, созданы профессиональными дизайнерами с учётом сочетания цветов, шрифтов, размеров кнопок, окон, полей и других элементов. Сайт смотрится привлекательно, и он удобный, хотя запуск возможен буквально за вечер.
Во всех платформах этой подборки вы сможете:
Карта сайта — служебный файл со ссылками на страницы, нужен для ускорения индексации.
Текстовый документ с рекомендациями для поисковых роботов: какие страницы/файлы сканировать, а какие — нет.
Домашний хостинг сайтов с динамическим IP
У меня (как и у многих web-разработчиков) имеется с десяток сайтов которые необходимо где-то размещать (хостить).
Сайты практически не приносят прибыли, поскольку это какие-то старые работы (по разным причинам не пошедшие в продакшн), домашняя страница, сайт заведенный красивой почты и тому подобное. Но в то же время эти сайты жалко бросать, а потому приходится каждый месяц на них тратить вполне реальные деньги чтобы покупать хостинг. Деньги, прямо скажем небольшие, но тем не менее их жалко, поскольку отдачи от сайтов никакой нет.
В то-же время в наличии имеется:
Разумеется есть всем известные Dynamic DNS сервисы вроде noip.com, но они успешно решают лишь задачу удаленного доступа к нашему серверу (по SSH или FTP), но для хостинга совершенно нам не подходят, поскольку в настройках домена на DNS-сервере нам нужно обязательно прописать A-запись с реальным IP-адресом (а не ссылку на наш виртуальный домен).
Что делать?
Я не буду останавливаться на том, как настроить linux сервер (и тем более как его выбрать), поскольку предполагаю, что он у вас уже есть. Также я не буду подробно расписывать настройки nginx и Apache, поскольку опять-таки предполагаю, что вы с этим справитесь самостоятельно.
Первое с чем у меня возникли проблемы — это как перенаправить посетителей с моих доменов (у меня есть 2 домена) на мой домашний сервер. То есть чтобы клиент который набрал domain.com попал ровно на мой домашний сервер с учетом того, что на нем каждый день меняется IP-адрес.
Для решения нам нужно настроить DNS-сервер, а именно следующие записи: SOA, NS, MX, A, CNAME. Важно чтобы мы имели возможность настройкой TTL (time to live), поскольку время жизни наших записей должно быть очень небольшим, буквально 60-120 секунд. В противном случае при смене IP-адреса сервера пользователи долго не смогут попасть на наш сервер (из-за кеширования).
Итак, нам нужен DNS сервер, варианты решения:
Используем сервисы которые предоставляют нам DNS-хостинг
Для этого есть ряд бесплатных сервисов, из которых самым популярным является freedns.afraid.org. На таких сервисах можно добавить свой домен(ы) и получить возможность через API обновлять у них A-запись при помощи небольшого скрипта.
Выглядит вполне неплохо, но подвох в том, что эти сервисы оставляют за собой право довешивать к вашему домену поддомены третьего уровня. То есть вы зарегистрировали у них user.ru, а они спокойно довешают свои сайты вида hello.user.ru, shop.user.ru и так далее. Разумеется от этого можно отказаться, но… за деньги. Платить деньги за такие сервисы смысла я не вижу, поскольку за сравнимые деньги вы можете купить полноценный хостинг на каком-нибудь провайдере без всяких плясок вокруг DNS настроек.
Остальные сервисы рассматривать не будем, а сосредоточимся на втором варианте.
Используем собственный DNS-сервер в связке с DDNS-доменом
Для этого варианта у нас, во-первых, должен быть DDNS-домен (который обновляется при смене IP), например, domain.ddns.net, а во-вторых, придется установить и настроить BIND на нашем сервере.
Всего необходимо сделать ровно 5 шагов. Везде под словами «domain» или «domain.ru» подразумевается ваше имя домена (короткое или полное).
1. Настроить 2 или 3 DDNS-поддомена
Почему 2 или 3? Потому, что ряд регистрантов не разрешит вам использовать домен только с одним NS-сервером. Самое обидно, что не все про это скажут — ваш домен просто не будет работать, но вы не будете понимать почему.
Тут все просто — идем на noip.com, там регистрируем аккаунт и добавляем 3 бесплатных поддомена (больше 3 не даст).
2. Настраиваем собственный DNS-сервер
Создаем зоны (по одной зоне на каждый наш домен):
и собственно файл с настройками зоны:
Примечание: обращаю внимание, что TTL устанавливаем равным 60 секунд. В файле /etc/bind/named.conf.local добавляем подключение нашей зоны:
Все, рестартуем BIND:
И глянем /var/log/syslog чтобы там не было сообщений об ошибках
3. Настроить наш домен(ы)
Идем в панель управления регистратора и там в настройках нашего домена в качестве NS-серверов указываем созданные DDNS-поддомены:
После этого возможно придется подождать несколько часов (или даже сутки) пока настройки среплицируются между всеми серверами.
4. Настроить периодическое обновление IP-адресов
Мой роутер поддерживает обновление IP-адреса на одном домене, но мне нужно это делать сразу для 3-х доменов. Плюс нам надо обновлять IP-адрес в конфиге BIND’а, поэтому напишем скрипт который будет делать:
Скрипт нужно запускать под рутом (чтобы ему хватило прав обновлять конфиги BIND’а и рестартовать его). Добавляем в crontab рута его запуск каждую минуту:
Пару слов про определение текущего IP-адреса. В скрипте выше это делается через резолвинг DDNS-поддомена domain.ddns.net. То есть сначала наш роутер его туда прописывает, а потом мы читаем. Это не очень хороший вариант, поскольку мы завязываемся на роутер и можем потерять несколько минут пока на DDNS-поддомене обновится IP-адрес на актуальный. Все это время наш сервер будет недоступен.
Поэтому у себя я использовал улучшенный вариант, который заодно не лазит в интернет:
В данном варианте мы загружаем главную страницу роутера (через http), дальше регэкспом находим на ней текущий IP-адрес. Разумеется, этот вариант подходит далеко не всем, но на DD-WRT прошивках работает.
5. Настройка роутера
Вывод
Итак, что я получил в итоге:
3 проверенных способа как создать сайт самому в 2021 + подробная инструкция
Как создать сайт бесплатно и самостоятельно с полного нуля не имея технических знаний? Что такое «домен» и «хостинг» и зачем они нужны?
Что такое «HTML-сайт», «CMS-система» и «конструктор сайтов» и в чем их ключевые отличия друг от друга?
Если вам близки вышеперечисленные вопросы, просим устроиться поудобнее, а мы попробуем подробно ответить на них в этой инструкции. Мы понимаем всю важность, ведь научившись создавать современные и функциональные сайты, вы сможете построить интернет-представительство не только для себя или своей компании, но и предложить подобные услуги другим заинтересованным людям. На сегодняшний день это один из наиболее перспективных и стабильных видов интернет-заработка.
Технические аспекты создания сайта
Технические аспекты создания собственного сайта во многом зависят от правильного выбора необходимых инструментов. Прежде всего, стоит понимать, что на сегодняшний день существует три основных способа самостоятельного создания сайта:
Давайте рассмотрим каждый из этих способов более подробно. Начнем с того, который, на наш взгляд лучше других подходит для новичков.
Конструкторы сайтов
Мы убеждены, что, если у вас ограничено время или желание разбираться, то оптимальным способом будет создание сайта в конструкторе. Мы выбрали самые эффективные и простые в использовании, что для создания сайта не потребуется каких-либо знаний в области верстки, программирования и веб-дизайна.
Итак, конструктор сайта — это специализированный онлайн-сервис, включающий в себя готовые варианты графического оформления для создаваемых сайтов, а также имеющий удобный и интуитивно понятный пользовательский интерфейс.
В идеале современный конструктор сайтов должен позволить любому человеку создать свой собственный интернет-ресурс без необходимости получения знаний в области веб-программирования и дизайна.
Наиболее популярные конструкторы сайтов
Кроме того, специально для читателей нашего сайта мы составили рейтинг лучших конструкторов сайтов. Обязательно обратите на него внимание, чтобы проанализировать все возможные варианты!
Простой пример создания сайта
Сам процесс состоит из нескольких понятных и простых шагов, о которых чуть ниже!
Шаг первый – регистрация в конструкторе и вход в аккаунт.
Проходим простую процедуру регистрации, заполнив данные формы либо просто авторизовавшись в одной из популярных соц.сетей.
Шаг второй – выбираем базовый шаблон дизайна для будущего сайта.
Конструктор предоставляет в распоряжение пользователей коллекцию из более 500 уникальных бесплатных шаблонов! Такого выбора нет нигде!
Ваша задача будет выбрать наиболее подходящий по функционалу и визуальному оформлению шаблон, после чего можно приступать к его настройке и наполнению.
Шаг третий – оформляем и персонализируем сайт.
В первую очередь необходимо дать создаваемому ресурсу уникальное название. Стоит отметить, что в случае необходимости присвоенное на этом шаге название сайта можно будет изменить в любой момент.
По умолчанию, вы получаете домен третьего уровня (вида вашлогин.wix.com/вашсайт ), но вы легко можете подключить своей домен 2го уровня.
Визуальный редактор с простотой MS PowerPoint, позволяет изменять любой элемент создаваемого сайта, а также без каких-либо проблем добавлять или удалять самые разнообразные блоки и модули.
Шаг четвертый – финальные штрихи и запуск.
Конечно, создание сайта это процесс творческий и скорее всего вы будете постоянно возвращаться к нему и внедрять новые возможности и фишки. Конструктор дает возможность сконцентрироваться на самом важном и наслаждаться процессом создания.
В результате вы получаете высококачественный сайт с удобной мобильной версией и совсем без технических знаний. Если у вас остались вопросы по конструктору, то вы сможете найти ответ на них в нашей подробной пошаговой инструкции.
CMS-системы
Термин CMS происходит от английского выражения Content Management System и используется для обозначения так называемых « систем управления контентом » ( сайтом ).
Эти же системы зачастую называют « движками » для сайтов. На сегодняшний день любая CMS-система позволяет управлять всем содержимым сайта с помощью простого и наглядного интерфейса.
Вполне естественно, что выбор CMS-системы зависит от цели создания конкретного сайта. Каждый движок для сайта имеет свои особенности, преимущества и недостатки. Кроме того, стоит учитывать, что все CMS-системы делятся на две большие группы: бесплатные и платные движки.
Топ бесплатных CMS-систем
Топ платных CMS-систем
Самостоятельное создание сайта
Специально для тех, кто хочет научиться самостоятельно писать исходный код создаваемого сайта, мы подготовили пошаговую инструкцию по созданию простого сайта на HTML. Поехали!
Внимание! Если вы абсолютный новичок или просто не хотите погружаться в работу с кодом и другие технические моменты, можете смело переходить к разделу «Создать сайт с нуля или на конструкторе сайтов? »
Создание HTML-сайта
Ниже приводится исходный код простейшей HTML-страницы :
Ключевые этапы создания сайта
Самостоятельное создание сайта с нуля состоит из трех основных этапов:
Давайте разберемся со всеми этими этапами более подробно.
Создание макета сайта
Выбираем разрешение 1000 на 1000 пикселей. Оно гарантирует корректное отображение у любого пользователя, размер по вертикали в дальнейшем можно будет увеличить.
Затем устанавливаем цвет фона F7F7C5 в шестнадцатеричном формате или выбираем его с помощью палитры цветов.
После этого выбираем пункт меню « Просмотр » – « Направляющие » и активируем отображение линеек и направляющих.
В пункте меню « Просмотр » — « Привязка к » необходимо проверить, что включена привязка к направляющим и границам документа.
Слева от логотипа и справа от контактного номера телефона проводим направляющие, которые позволят обозначить рамки по ширине сайта.
Затем с помощью инструмента « Формы » создаем прямоугольник с закруглёнными краями ( радиус – 8 точек ) и с его помощью обозначаем место под изображение, которое будет располагаться в шапке сайта.
Теперь пришло время вставить изображение в шапку сайта.
Для заголовка в тексте используем черный шрифт. Для навигационного меню – белый.
Перемещая правую границу основного текстового блока, вставляем изображение в текст страницы ( справа от текста ).
C помощью инструмента « Текст » ( шрифт Arial ) размещаем копирайт в подвале страницы ( под линией ).
Нарезаем необходимые для вёрстки сайта фрагменты изображений с помощью инструмента « Раскройка » ( мы выделили основную картинку в шапке и картинку в тексте страницы ).
В результате проделанной работы мы создали полноценный макет сайта. В случае если вы захотите внести собственные изменения в макет страницы, PSD-файл также можно найти в архиве.
В результате этого мы получим множество графических фрагментов для нашего будущего шаблона. В папке, где был сохранен сам шаблон, появится папка с изображениями ( images ). Отбираем нужные и переименовываем.
Макет страницы создан, необходимые фрагменты получены, можно переходить к верстке.
Верстка сайта
Первая строка этого файла должна выглядеть следующим образом:
Она сообщит браузеру, как именно обрабатывать содержимое страницы. Далее следует набор тегов:
Внутри … располагаются теги, которые не отображаются в окне браузера пользователя. Как правило, они начинаются со слова meta, и называются мета-тегами, а вот тег … отображается в качестве заголовка окна браузера и анализируется поисковыми системами.
