В эту эпоху социальных сетей, управляемых алгоритмами, вы не скучаете ли по раннему Интернету, который можно было свободно настраивать и полно индивидуальности? В этой статье я поделюсь своим реальным опытом построения полноценного личного веб-сайта с нуля, а также доходами и мыслями, которые принесло мне это путешествие.
Сегодня платформы социальных сетей изменились:
Что еще более важно, созданный вами контент на этих платформах на самом деле вам не принадлежит. Алгоритмы решают, кто увидит вашу работу, а правила платформы могут измениться в любой момент.
Полгода назад я случайно увидел видео об "Indie Web". Только тогда я обнаружил, что существует целое сообщество людей, создающих личные веб-сайты по-своему — не полагаясь на крупные платформы, полностью контролируя свое цифровое пространство.
Это напомнило мне просмотр множества креативных личных блогов в детстве: каждый сайт имел уникальный дизайн, а веб-мастера делились тем, что им действительно нравилось. Эта чистая свобода творчества глубоко меня привлекла.
Хотя я раньше изучал HTML и CSS, я не прикасался к коду больше года и почти все забыл. В начале:
Самая большая проблема: как сделать так, чтобы веб-сайт не выглядел как "учебное задание для новичков"?
Я решил вернуться к классике — имитации ранних домашних страниц 2000-х годов с их яркими цветами и множеством элементов. Я использовал:
Когда веб-сайт был в основном завершен, возникла новая проблема: чем больше я смотрел, тем меньше мне нравилось.
Разглядывая другие отличные личные веб-сайты, я всегда чувствовал, что моя работа похожа на "детские каракули". Особенно видя крутые веб-сайты с эффектом ЭЛТ-монитора, я начал сомневаться в своем дизайне.
В этот момент было два варианта:
Я выбрал второе и принял смелое решение — добавить функцию переключения тем.
Чтобы реализовать двойное переключение тем (светлая + темная в стиле CRT в стиле ретро), мне пришлось заново изучать JavaScript.
Первоначальная реализация была очень громоздкой:
Позже я обнаружил, что могу решить эту проблему с помощью компонентного мышления:
Этот процесс напомнил мне удовольствие от изучения React — когда вы находите более элегантное решение, чувство достижения несравнимо.
Светлая тема использует розовую палитру, чистую и яркую; темная тема имитирует эффект старого ЭЛТ-монитора, с фоном звездного неба и фильтром сканирующих линий, создавая кибер-ретро атмосферу.
Кнопка переключения имеет эффект предварительного просмотра при наведении — когда вы наводите курсор мыши, вы можете смутно видеть, как выглядит другая тема, и я особенно доволен этой маленькой деталью.
Раздел блога — моя самая гордая работа. Используя фреймворк 98.css, я полностью воссоздал среду рабочего стола Windows 98:
Вся логика окон написана мной на чистом JavaScript. Когда вы нажимаете кнопку свернуть, окно действительно сворачивается на панель задач; при нажатии кнопки "Закрыть" значок исчезает, но его можно снова открыть с рабочего стола.
Помимо визуальных эффектов, я добавил несколько практичных функций:
Эти функции делают веб-сайт не просто статичной демонстрацией, а живым интерактивным пространством.
Изначально я выбрал NeoCities для хостинга своего веб-сайта — это самая известная платформа Indie Web. Но позже я обнаружил несколько проблем:
Хотя NecoWeb новее и имеет меньшее сообщество, его преимущества очевидны:
Для авторов, которые уделяют внимание праву собственности на контент и творческой свободе, NecoWeb является лучшим выбором. Это особенно важно, если вы беспокоитесь о безвозмездном использовании своих работ ИИ.
💡 Совет от MasLogin: Если вам необходимо безопасно управлять несколькими учетными записями веб-сайтов (например, одновременно запускать несколько независимых веб-сайтов), вы можете использовать браузер с защитой от обнаружения MasLogin. Он может создавать отдельную браузерную среду для каждой учетной записи, предотвращая обнаружение связанных учетных записей платформами и обеспечивая безопасность вашей многоаккаунтной работы.
Хотя личный веб-сайт в основном предназначен для просмотра на настольных компьютерах, я все же создал базовый адаптивный дизайн, чтобы мобильные пользователи могли нормально получать доступ к контенту.
Для облегчения последующего обслуживания я преобразовал повторяющиеся элементы, такие как боковые панели, заголовки и нижние колонтитулы, в многократно используемые компоненты. Теперь изменения в одном месте синхронизируются по всему сайту — это значительно повысило эффективность.
Оглядываясь на ранний код, я обнаружил множество избыточных и неформальных методов написания. Хотя функциональность была нормальной, как учебный проект я решил постепенно перестраивать этот "технический долг".
Важно: Не отказывайтесь от публикации только потому, что код не идеален. Сначала опубликуйте свою работу, а затем медленно шлифуйте ее — это настоящий творческий процесс.
Я думал, что этот проект вызовет у меня отвращение к программированию, но произошло обратное. Процесс решения реальных проблем и немедленного наблюдения за результатами стимулирует энтузиазм к обучению лучше, чем любой учебник.
Я даже начал изучать Python, просто потому, что мне нравился процесс программирования.
В эпоху повсеместного распространения инструментов ИИ, самым большим преимуществом создателей-людей является не совершенство, а реальность и уникальность. Разве мой код веб-сайта запутан? Да. Профессиональный ли дизайн? Не совсем. Но он на 100% сделан мной, с моей эстетикой, идеями и траекторией обучения.
Это несовершенство — как раз самая ценная ценность.
На своем собственном веб-сайте вам не нужно беспокоиться о:
Это полное чувство контроля — то, что не может дать ни одна социальная платформа.
Рекомендуемые ресурсы:
Сообщества Indie Web очень дружелюбны, и люди готовы делиться опытом и ресурсами. Просмотр веб-сайтов других людей не только даст вам вдохновение, но и позволит изучить методы, "просматривая исходный код".
Создание веб-сайта — это марафон, а не спринт. Мой веб-сайт занял несколько месяцев от начала до базового завершения. В течение этого времени были бесчисленные моменты, когда я хотел сдаться, но каждый раз, когда я преодолевал техническую проблему, моя мотивация снова разгоралась.
Этот проект напомнил мне, что Интернет должен быть раем для человеческого самовыражения, а не фермой по сбору данных. Когда мы возвращаем себе контроль над творчеством, мы обнаруживаем, что эти "несовершенные" работы трогают больше всего.
Если вы тоже устали от рекомендаций алгоритмов в социальных сетях, попробуйте создать свой собственный уголок. Не знаете кодирования? Не проблема, сейчас есть множество учебников и инструментов, которые помогут вам начать. Главное — начать действовать, учиться, расти и наслаждаться радостью творчества в процессе.
Добро пожаловать на мой веб-сайт (ссылка в комментариях), оставьте свой след в гостевой книге. Я также с нетерпением жду возможности встретить ваши работы в каком-нибудь уголке Indie Web.
Да! Хотя есть определенная кривая обучения, HTML/CSS — самые простые для начинающих языки программирования. В Интернете есть множество бесплатных учебных пособий, таких как FreeCodeCamp, который предлагает систематические курсы. Даже если вы будете учиться всего 30 минут в день, вы сможете освоить основы в течение месяца.
NeoCities имеет большее сообщество и больше ресурсов, что подходит для новичков, которые хотят быстро начать и получить обратную связь. NecoWeb уделяет больше внимания защите конфиденциальности и функциональной гибкости, что подходит для пользователей, у которых есть определенная база и которые ценят право собственности на контент. Оба предлагают бесплатные тарифы, вы можете попробовать NeoCities сначала, а затем рассмотреть возможность миграции.
Базовая версия абсолютно бесплатна: NeoCities/NecoWeb предлагают бесплатный хостинг, вам не нужно покупать доменное имя или сервер. Если вы хотите собственное доменное имя (например, yourname.com), это обойдется примерно в 10-15 долларов в год. Функции для платных участников (например, больше места для хранения) обычно стоят около 5 долларов в месяц.
Вы можете принять следующие меры:
robots.txt.Хотя 100% предотвратить это невозможно, это может значительно снизить риск сбора данных.
Обзор
