Зачем и как я создал личный сайт с нуля

Почему стоит создать персональный веб-сайт?

Ловушки социальных сетей

Сегодня платформы социальных сетей изменились:

• Facebook переполнен низкокачественным контентом, созданным ИИ.
• Twitter превратился в рассадник информационного шума.
• Instagram полностью превратился в копию TikTok.
• Все платформы безумно собирают пользовательские данные и время.

Что еще более важно, созданный вами контент на этих платформах на самом деле вам не принадлежит. Алгоритмы решают, кто увидит вашу работу, а правила платформы могут измениться в любой момент.

Заново открыть для себя Indie Web

Полгода назад я случайно увидел видео об "Indie Web". Только тогда я обнаружил, что существует целое сообщество людей, создающих личные веб-сайты по-своему — не полагаясь на крупные платформы, полностью контролируя свое цифровое пространство.

Это напомнило мне просмотр множества креативных личных блогов в детстве: каждый сайт имел уникальный дизайн, а веб-мастера делились тем, что им действительно нравилось. Эта чистая свобода творчества глубоко меня привлекла.

От новичка до нервного срыва: Мой процесс создания веб-сайта

Этап 1: Возвращение к HTML/CSS

Хотя я раньше изучал HTML и CSS, я не прикасался к коду больше года и почти все забыл. В начале:

• Для каждой HTML-тега приходилось искать документацию.
• CSS-макеты часто приводили к неожиданным смещениям.
• Я даже полностью переделал дизайн первого веб-сайта.

Самая большая проблема: как сделать так, чтобы веб-сайт не выглядел как "учебное задание для новичков"?

Я решил вернуться к классике — имитации ранних домашних страниц 2000-х годов с их яркими цветами и множеством элементов. Я использовал:

• Генератор фоновых узоров в стиле ретро
• Инструмент для создания мигающих GIF-текстов
• Различные мелкие значки, кнопки и эмблемы

Этап 2: Попадание в цикл "никогда не доволен"

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

Разглядывая другие отличные личные веб-сайты, я всегда чувствовал, что моя работа похожа на "детские каракули". Особенно видя крутые веб-сайты с эффектом ЭЛТ-монитора, я начал сомневаться в своем дизайне.

В этот момент было два варианта:

1. Начать все сначала (но я уже вложил слишком много времени)
2. Найти способ оптимизировать существующий дизайн.

Я выбрал второе и принял смелое решение — добавить функцию переключения тем.

Этап 3: Противостояние JavaScript

Чтобы реализовать двойное переключение тем (светлая + темная в стиле CRT в стиле ретро), мне пришлось заново изучать JavaScript.

Первоначальная реализация была очень громоздкой:

• Комплекты из двух полных наборов контента копировались на каждую страницу.
• Разные CSS-файлы использовались для управления отображением/скрытием.
• Это привело к чрезвычайно избыточному и запутанному коду.

Позже я обнаружил, что могу решить эту проблему с помощью компонентного мышления:

• Применяйте классы тем только к определенным элементам (например, заголовкам).
• Динамически переключайте CSS-файлы с помощью JavaScript.
• Значительно сократите повторяющийся код.

Этот процесс напомнил мне удовольствие от изучения React — когда вы находите более элегантное решение, чувство достижения несравнимо.

Особенности и дизайнерские акценты веб-сайта

Темы: Розовые мечты против ретро-терминала

Светлая тема использует розовую палитру, чистую и яркую; темная тема имитирует эффект старого ЭЛТ-монитора, с фоном звездного неба и фильтром сканирующих линий, создавая кибер-ретро атмосферу.

Кнопка переключения имеет эффект предварительного просмотра при наведении — когда вы наводите курсор мыши, вы можете смутно видеть, как выглядит другая тема, и я особенно доволен этой маленькой деталью.

Раздел блога: Воссоздание рабочего стола Windows 98

Раздел блога — моя самая гордая работа. Используя фреймворк 98.css, я полностью воссоздал среду рабочего стола Windows 98:

• Сворачиваемые/закрываемые окна
• Интерактивное меню "Пуск"
• Компонент CD-плеера, который может воспроизводить музыку
• Панель задач, отображающая открытые "приложения".

Вся логика окон написана мной на чистом JavaScript. Когда вы нажимаете кнопку свернуть, окно действительно сворачивается на панель задач; при нажатии кнопки "Закрыть" значок исчезает, но его можно снова открыть с рабочего стола.

Практичные интерактивные компоненты

Помимо визуальных эффектов, я добавил несколько практичных функций:

• Счетчик посетителей: для отслеживания посещаемости сайта.
• Обновление статуса: для отображения того, что я делаю в режиме реального времени.
• Компонент чата в реальном времени: посетители могут оставлять сообщения для взаимодействия.
• Тамагочи: посетители могут кормить и воспитывать.
• Webring-ссылки: для обнаружения других интересных независимых веб-сайтов.

Эти функции делают веб-сайт не просто статичной демонстрацией, а живым интерактивным пространством.

От NeoCities до NecoWeb: Выбор подходящей хостинг-платформы

Зачем переезжать?

Изначально я выбрал NeoCities для хостинга своего веб-сайта — это самая известная платформа Indie Web. Но позже я обнаружил несколько проблем:

• По умолчанию разрешен сбор данных ИИ для обучения моделей.
• Не поддерживает внешние скрипты, что ограничивает расширение функциональности.
• Функции для платных участников не имеют хорошего соотношения цены и качества.

Преимущества NecoWeb

Хотя NecoWeb новее и имеет меньшее сообщество, его преимущества очевидны:

• Четко запрещает сбор данных ИИ-ботами с контента пользователей.
• Поддерживает внешние скрипты и более гибкую функциональность.
• Цены членства более разумны, а права доступа более практичны.

Для авторов, которые уделяют внимание праву собственности на контент и творческой свободе, NecoWeb является лучшим выбором. Это особенно важно, если вы беспокоитесь о безвозмездном использовании своих работ ИИ.

💡 Совет от MasLogin: Если вам необходимо безопасно управлять несколькими учетными записями веб-сайтов (например, одновременно запускать несколько независимых веб-сайтов), вы можете использовать браузер с защитой от обнаружения MasLogin. Он может создавать отдельную браузерную среду для каждой учетной записи, предотвращая обнаружение связанных учетных записей платформами и обеспечивая безопасность вашей многоаккаунтной работы.

Постоянная оптимизация: Бесконечный путь совершенствования

Адаптация для мобильных устройств

Хотя личный веб-сайт в основном предназначен для просмотра на настольных компьютерах, я все же создал базовый адаптивный дизайн, чтобы мобильные пользователи могли нормально получать доступ к контенту.

Рефакторинг компонентов

Для облегчения последующего обслуживания я преобразовал повторяющиеся элементы, такие как боковые панели, заголовки и нижние колонтитулы, в многократно используемые компоненты. Теперь изменения в одном месте синхронизируются по всему сайту — это значительно повысило эффективность.

Оптимизация и очистка кода

Оглядываясь на ранний код, я обнаружил множество избыточных и неформальных методов написания. Хотя функциональность была нормальной, как учебный проект я решил постепенно перестраивать этот "технический долг".

Важно: Не отказывайтесь от публикации только потому, что код не идеален. Сначала опубликуйте свою работу, а затем медленно шлифуйте ее — это настоящий творческий процесс.

Чему меня научил этот опыт?

Заново полюбить программирование

Я думал, что этот проект вызовет у меня отвращение к программированию, но произошло обратное. Процесс решения реальных проблем и немедленного наблюдения за результатами стимулирует энтузиазм к обучению лучше, чем любой учебник.

Я даже начал изучать Python, просто потому, что мне нравился процесс программирования.

Принимайте несовершенное творчество

В эпоху повсеместного распространения инструментов ИИ, самым большим преимуществом создателей-людей является не совершенство, а реальность и уникальность. Разве мой код веб-сайта запутан? Да. Профессиональный ли дизайн? Не совсем. Но он на 100% сделан мной, с моей эстетикой, идеями и траекторией обучения.

Это несовершенство — как раз самая ценная ценность.

Право собственности на цифровое пространство

На своем собственном веб-сайте вам не нужно беспокоиться о:

• Рекомендует ли алгоритм ваш контент
• Внезапных изменениях правил платформы
• Необоснованном бане учетной записи
• Использовании данных для обучения ИИ

Это полное чувство контроля — то, что не может дать ни одна социальная платформа.

Советы для тех, кто хочет начать: Практические рекомендации

Начните с простого

• Не гонитесь за идеальным дизайном с самого начала.
• Сначала создайте базовый каркас, а затем постепенно его улучшайте.
• Научитесь использовать инструменты разработчика для проверки проблем.

Используйте существующие ресурсы

Рекомендуемые ресурсы:

• Генератор макетов от Sadgrl: Быстрое создание макетов в стиле ретро.
• 98.css: Компоненты в стиле Windows 98.
• NeoCities / NecoWeb: Бесплатные хостинг-платформы.
• Различные веб-сайты с ретро-элементами.

Присоединяйтесь к сообществу

Сообщества Indie Web очень дружелюбны, и люди готовы делиться опытом и ресурсами. Просмотр веб-сайтов других людей не только даст вам вдохновение, но и позволит изучить методы, "просматривая исходный код".

Будьте терпеливы и сохраняйте энтузиазм

Создание веб-сайта — это марафон, а не спринт. Мой веб-сайт занял несколько месяцев от начала до базового завершения. В течение этого времени были бесчисленные моменты, когда я хотел сдаться, но каждый раз, когда я преодолевал техническую проблему, моя мотивация снова разгоралась.

Заключение: Сохранение человечности в эпоху алгоритмов

Этот проект напомнил мне, что Интернет должен быть раем для человеческого самовыражения, а не фермой по сбору данных. Когда мы возвращаем себе контроль над творчеством, мы обнаруживаем, что эти "несовершенные" работы трогают больше всего.

Если вы тоже устали от рекомендаций алгоритмов в социальных сетях, попробуйте создать свой собственный уголок. Не знаете кодирования? Не проблема, сейчас есть множество учебников и инструментов, которые помогут вам начать. Главное — начать действовать, учиться, расти и наслаждаться радостью творчества в процессе.

Добро пожаловать на мой веб-сайт (ссылка в комментариях), оставьте свой след в гостевой книге. Я также с нетерпением жду возможности встретить ваши работы в каком-нибудь уголке Indie Web.

---

Часто задаваемые вопросы

Можно ли создать персональный веб-сайт, ничего не зная о программировании?

Да! Хотя есть определенная кривая обучения, HTML/CSS — самые простые для начинающих языки программирования. В Интернете есть множество бесплатных учебных пособий, таких как FreeCodeCamp, который предлагает систематические курсы. Даже если вы будете учиться всего 30 минут в день, вы сможете освоить основы в течение месяца.

Какой из них лучше подходит для новичков: NeoCities или NecoWeb?

NeoCities имеет большее сообщество и больше ресурсов, что подходит для новичков, которые хотят быстро начать и получить обратную связь. NecoWeb уделяет больше внимания защите конфиденциальности и функциональной гибкости, что подходит для пользователей, у которых есть определенная база и которые ценят право собственности на контент. Оба предлагают бесплатные тарифы, вы можете попробовать NeoCities сначала, а затем рассмотреть возможность миграции.

Сколько стоит персональный веб-сайт?

Базовая версия абсолютно бесплатна: NeoCities/NecoWeb предлагают бесплатный хостинг, вам не нужно покупать доменное имя или сервер. Если вы хотите собственное доменное имя (например, yourname.com), это обойдется примерно в 10-15 долларов в год. Функции для платных участников (например, больше места для хранения) обычно стоят около 5 долларов в месяц.

Как защитить свой персональный веб-сайт от сбора данных ИИ?

Вы можете принять следующие меры:

• Запретить доступ бота в файле robots.txt.
• Использовать платформы, такие как NecoWeb, которые по умолчанию блокируют сбор данных ИИ-ботами.
• Добавить заявление об авторских правах "Запретить обучение ИИ".

Хотя 100% предотвратить это невозможно, это может значительно снизить риск сбора данных.