Здесь я изложил свой опыт в создании данного сайта. Надеюсь, это улучшит ваше понимание области web-разработки)
Идея
Почему я придумал вообще создать собственный сайт и вообще зачем он мне нужен? Для ответа на этот вопрос немного окунёмся в предысторию)
Поиск
Одной из моих главных целей в Москве была возможность посещения мероприятий по теме предпринимательства, упоминания которых я не мог найти там, где я жил с рождения, — в Ростове-на-Дону.
Посещая данные ивенты, я узнал много нового, в том числе, что в идеалистичной модели доход зависит от пользы, приносимой людям, и начинать это делать следует с приобретения специальности.
Как я заметил, практический все молодые люди, добившиеся получения высокого дохода, сделали это в IT-сфере: занимаясь интернет-маркетинг или ведя свой онлайн-бизнес.
Действительно, промышленность давно поделена и передаётся из поколения в поколение, из-за чего, собственно, остается поле предпринимательской деятельности только в инновационных сферах.
И, соответственно, мой выбор пал на интернет-маркетинг, так как это сейчас актуально, востребовано, позволяет получать деньги удалённо, а так же знание его потенциально может быть полезно для собственного бизнеса. В нём уже я решил начать с изучения создание сайтов.
Ранее я так же задумывался об управлении собственным web-ресурсом, имея возможность реализовывать собственные идеи, делиться своими проектами, информацией на нём.
Реализация
Вывод и интернет
Обучаться я решил на проекте собственного сайта. Как выглядит верстка сайта, мне было примерно известно, а как вывести её в интернет не знал. Следующие несколько дней были посвящены изучению хостингов и доменов.
Хостинг-провайдеры предоставляют выделенное место на сервере или полностью сервер в аренду.
Домены — имена сайтов в интернете в строке ссылки.
- Домены 1-го уровня, например «.com», «.ru», «.net» и. др., так же называются доменными пространствами и их регистрация недоступна простым смертным.
- Домены 2-го уровня регистрируются и предоставляются в аренду на определённый срок за определённую плату. Например, «wikipedia.org», «yandex.ru».
- Домены >= 3-го уровня, например «ru.wikipedia.org», можно создавать неограниченное количество на базе домена 2-го уровня.
Поняв, как всё устроено, я нашёл выгодные предложения.
И тут у меня появилась идея: делиться поддоменами со своими друзьями, теми, кому это может быть нужно, но не будет знать как это сделать и будет опасаться тратить на что-то деньги. Так же система поддоменов позволила бы элегантно отделять проекты от личного сайта, сохраняя общую связь.
Изучение CMS
Вместе с поиском потенциальных возможностей вывода сайта в интернет я наткнулся на понятие CMS-систем (content managment system), т.е. систем управления контентом. Они призваны значительно облегчить разработку сайтов для обывателей (в отличии от сложных web-ресурсов, как, например, YouTube, VK, Instagram, Discord, и др., где пишутся уникальные алгоритмы управления данными целыми командами разработчиков).
В качестве основы сайта я выбрал WordPress. Эта CMS-система написана на серверном языке программирования PHP, позволяющем динамически генерировать web-страницы. На WordPress достаточно легко менять темы оформления сайтов, добавлять плагины для расширения функционала, сохраняя написанны контент, а главное всё это просто делать пользователям, далёким от web-разработки в целом.
Ранее с PHP и Wordpress я был знаком только понаслышке и даже не представлял что это такое. Однако соответствующие видео и статьи со временем исправили это.
Мне требовалась тонкая кастюмизация и возжможность делать по своему вкусу. Готовые темы предлгают весьма ограниченный функционал или треубуют их покупку, что и укрепило позицию о создании собственной с нуля.
Конечно, это предполагало отсрочку её публикацию контента, ведь я хотел привести сайт в минимальный приличный вид. Однако, желание воплотить всё и сразу увело меня в сферу борьбы за не предусмотренные в WordPress возможности, из-за чего я стал глубже изучать основную структуру (ядро) CMS-системы, SQL-запросы к базе данных, вместо проработки самой визуальной составляющей темы: шаблонов PHP+HTML, стилей CSS, JS-скриптов.
Сложности в поиске информации и реализации задуманных идей несколько утомили меня, и в начале лета я взял перерыв, что бы восстановить силы.
Разработка темы
И вот осенью я вновь взялся за сайт, уяснив ошибки в приоритезации сфер деятельности, и начал с нуля разрабатывать тему.
Базовым шаблоном служила генерируемая тема на ресурсе underscores.me, которая включает правильно скомпанованные и удобные для начала разработки файлы.
На основе опыта и собственного чувства стиля у меня было примерное представление внешнего вида и функциональных особенностей.
Мне понравилась идея с ограничено прокручиваемым хедером (header limited scroller), как это, например, было реализовано в мобильном приложении VK. Нормальных примеров я сразу не нашёл, поэтому реализовывал собственноручно. Здесь требовать выстроить логику расчётов отступа элемента при прокрутке страницы.
Касательно элементов меню в хедере и футере, я опирался на сайт expertvagabond.com, работающий на WordPress с установленной темой «Generate Press». В начале я даже думал использовать эту тему у себя, однако её полная версия — платная, и даже в ней я бы не имел бы полного контроля над сайтом. Тем не менее там простой и качественный CSS код, который я повзаимствовал для своего сайта. В свою очередь, JS для адаптивной работы меню я прописывал сам, довольствуясь обрывками информации в интернете.
Дизайн статей пришёлся мне по душе на medium.com — ресурсе со статьями, в котором акцент преимущественно направлен на заголовок, а не на preview. Это важно, потому что порой я не сразу могу придумать и реализовать качественные медиа к написанному тексту, а откладывать из-за этого публикацию не хочется.
Скрипты с вёрсткой требовалось адаптировать под разные размеры экранов (ноутбуки, планшеты, телефоны) и виды нажатий (клики мышкой и тыки на сенсор пальцами отличаются по передаче событий), что у меня, считаю, получилось достаточно приятно и интуитивно в восприятии.
По итогу около половины времени создания темы я потратил на написание JS скриптов для красивой и удобной работы навигации.
В остальном основную часть занимал HTML+PHP код формирования самой вёрстки. Приятно было оформлять мелкие детали, прописывая для них функции, например подсчёт примерного времени чтения.
Релизнув наконец приличную версию на хостинг, я стал наслаждаться проделанной работой и выискивать баги, а потому обозначил её как ɑ (альфа), что означает её юзабельность, но необходимость доработки.
Futures
Были сделаны куча различных мелких правок, что я, собственно, и продолжаю делать по мере их обнаружения. Теперь задачей стала возможность простой кастомизации темы под другие ресурсы: замена изображений, стилей, добавления нужных шаблонов.. Хочется всё это эргономично объединить с одной стороны, не связывая себе руки по части оформления, с другой — минимизации необходимости лезть в код основной темы.
Для этого существует WordPress Customizer — интуитивно понятный интерфейс настройки темы. С ним тоже случаются проблемы, которые приходится обходить кустарными методами, как, например, загрузка векторных .svg изображений. Всё же, на крайний случай, он полезен просто вставками кусков HTML+CSS вёрстки в нужные места.
Другим вариантом могут служить дочерние темы в WordPress, которые позволяют замещать файлы и добавлять новые без изменений в основной темы. Мне по началу не хотелось к ним прибегать, но я вижу рациональность их использования как минимум для создания уникальных шаблонов вёрстки на различные ресурсы без необходимости их запихивать в основную тему.
Плоды работы
Отвечу на самый любимый вопрос: мой сайт на данный момент не приносит монетизацию, у него не высокая посещаемость. Однако его ключевая роль — быть моим интернет-ресурсом. Там я публикую статьи, в которых запечатляю собственные мысли касательно разных тематик. Часто они сформулированы сложными, хотя и понятными, языковыми конструкциям в соответствии с несомым ими смыслом, а потому я осознаю ограниченность аудитории, спобоной их воспринимать. Мои статьи написаны для людей, желающих мыслить шире, глубже разбираться в вопросах мироздания и развивать изощрённость своей речи.
С другой стороны, сайт выполняет задуманную ему роль хаба, места пересечения моих web-аккаунтов и моей активности в интернете. Его можно найти в поиске, вбив мои имя и фамилию (успешность варируется от индексации разными поисковыми системами). Я могу легко создавать особые страницы и делиться на них QR-кодами. В профилях соц. сетей лежат ссылки на мой личный сайт, домен которого также содержит моё имя на английском языке.
Возможно, я не внёс ещё все результаты своей деятельности, которые хотел там расположить, не идеальным образом создал навигацию да и в общем оформление темы. Однако в моей жизни существует достаточно много другой активности, которую тоже нужно проявлять. В процессе я так же развиваю свои знания о мире, понимая как и что сделать лучше, формируя новые идеи, которыми я бы хотел поделиться. И порой я уделяю время и концентрирусь на доработке сайте, найдя ряд вещей которых я бы хотел добавить, изменить, исправить. Такая смена деятельности, переменная конценрация на разных задачах позволяет не быть утомлённым однотонной работой, получать удовольствие от реализации собсвтенных идей и в целом жить в каеф.
