Ближе к новому году я решил попробовать написать свой веб-сайт. Естественно, с помощью ИИ, так как до этого я ни разу не трогал веб-разработку. За основного ИИ-помощника я выбрал DeepSeek, да, возможно, выбор странный, но, по крайней мере, доступный в РФ. Задал я ему более подробный запрос, что я хочу увидеть, ну и естественно, он мне это выдал. Также просил его внести какие-нибудь изменения в него, так как пока еще не понимал, что за что отвечает в HTML. После парочки неудачных запросов ИИ мне поломал то, что мне уже понравилось на начальном этапе. Дальше я начал пытаться разобраться сам в коде HTML и его дополнениями, такими как CSS и JS.
С этого момента я более-менее понял структуру HTML, что за что отвечает, но я решил не останавливаться на страничке без чего-либо. В первую очередь я начал разбираться, как добавлять гиперссылки. Что оказалось достаточно легко, но сейчас это не тутор, так что в следующий раз об этом После того как добавил гиперссылки на свои контактные данные и добавил ссылки на 2 проекта, которые были добавлены в первую очередь, решил сделать вкладки. Вся суть вкладок заключалась в разделении информации и дальнейшего добавления их. Тут мне вновь понадобился ИИ. Чтоб он смог мне написать скрипт для реализации их и смог написать стиль для них. Появилось 3 вкладки, которые есть и по сей час: основная с контактной информацией, вторая с проектами для общего доступа, третья же для статуса Minecraft-сервера. Потом мне понадобилось раздать файл образа Windows 10, который собрал. После вычитанной инфы, что их нельзя распространять открыто, решил сделать отдельную страницу с предупреждением. И переходим, наверное, к самому вкусному, полный редизайн заднего фона, цветов фона в мою аватарку канала, решил добавить дым...
Конечно же, скрипт, который выдал ИИ, был недоработан, дым был слишком быстрым, медленным, да и до сих пор он не доработан, если честно. Нужно было разобраться в математических условиях, которые он написал, понять, что за что отвечает, и ловить 0.0001 для нормальной работы дыма. Дальше, после фона, понял, что цвета не соответствуют заднему фону, т. е. задний фон или же дым был сине-белым, то вот остальные элементы сайта были фиолетовыми, что не коннектилось. Пришлось и тут разбираться, как работает CSS, т. е. файл стилей для сайта. Хоть я и противоречу своим словам в самом начале, что начал разбираться, но там было поверхностно. После добавления изменений всех строчек цветов понял, что некоторые элементы вылезают за свои границы в мобильном формате, и тут я вспомнил про консоль браузера для изменения и отладки веб-страниц. Вот тут Chrome стал настоящим инструментом, а не просто приложением для показа YouTube и поиска разной инфы. Разобрался со стилями и начал их более свободно изменять, таким образом получилось добиться 50-го элемента в проектах для более аккуратного заполнения свободного пространства.
Большую часть проблем, конечно же, я описал выше, но без подводных камней в любом случае не оказалось. В первую очередь это сам хост, из постов в моем тгк было известно, что хост держится на ноутбуке, что не очень удобно и вообще правильно. Следом это доменное имя, решения с бесплатным доменом, конечно же, катают, но они имеют свои неудобства. Дальше внешнее оформление внешки сайта, установки иконки на него, внутренние настройки сайта для индексирования и т.д. Проблемы с безопасностью, хоть я мог и не загоняться с этим, но все-таки решился на это. Внутренние настройки конфигов хостинга и определение всех ошибок. Проброс портов.
Начну с самого начала. Ещё до создания сайта я заказал Orange Pi Zero 3 с 4 ГБ памяти. Думал, это будет забавная игрушка за 4 тысячи рублей, которая сможет заменить компьютер. Но оказалось, что она прекрасно подходит в качестве хоста: бесшумная, экономичная и компактная. У меня уже был домен, но я не до конца понимал, как всё это работает. Существуют сервисы, которые позволяют присвоить домен динамическому IP-адресу для выхода в глобальную сеть. Однако у меня ничего не получилось. В итоге я купил статичный IP-адрес у своего провайдера. Когда смог подключиться извне, я был очень рад. Затем я приобрёл ещё один домен для RU-региона на своё имя и получил полную настройку. Внешний вид сайта или иконка также важны. Было бы проще добавить свою аватарку, но это не так просто. Существует сайт, который автоматически переводит картинку в нужный файл для внедрения на сайт. Однако в России он работает только с помощью специальных средств. После получения файла всё начало работать. Самая интересная задача была связана с получением SSL-сертификата. Я нашёл несколько способов его получить платно и бесплатно. Бесплатный вариант предполагал необходимость ходить по городу и подписывать документы о том, что я владелец домена. Это оказалось слишком сложно. В итоге я попробовал сгенерировать сертификат. Установка прошла успешно, но соединение было небезопасным, так как сертификат не был подписан выдающей компанией. Затем я нашёл Let’s Encrypt, который выдаёт сертификат и настраивает хостинг автоматически. Я установил его, и всё заработало внутри локальной сети. Но когда я попытался подключиться извне, ничего не получилось. Я обратился к ИИ за помощью, но его советы не помогли, и сайт вообще перестал работать. Я несколько раз менял операционную систему, так как мне было проще настроить нужный модуль, чем исправлять ошибки ИИ. В итоге я решил пока не беспокоиться о сертификате и сосредоточиться на выходе из локальной сети. Затем я узнал про порты и начал разбираться. Оказалось, что у провайдера были закрыты порты. Я заплатил за статичный IP, чтобы пользоваться всеми возможностями хоста, а не только 4-5 открытыми портами из 1024. Настройки открытия портов не было, а в поддержке отвечал робот заготовленными фразами. Я начал искать информацию о том, можно ли открыть эти порты. Оказалось, что да, нужно зайти на спрятанную страницу провайдера и отключить файервол. После этого всё заработало, и я смог выйти в интернет, используя https. Также я оптимизировал внутреннюю часть сайта. Из-за множества изменений три файла превратились в «помойку», которая потребляла много трафика и загружала процессор и оперативную память. Я разделил скрипты, что помогло освободить 20-30% оперативной памяти от исходного варианта. В будущем я планирую разделить стили, так как их загружается слишком много. Пока у меня это не получилось, но я буду продолжать работать над этим.
Кто то может сказать что это набор слов, может это так и есть, но это писалось от души.