Во время компьютерных курсов весной 2020 года мои 11-летние дети за несколько занятий сделали сайт-портфолио.

Я подумала: «Если это так просто, то смогу и я». Опыта в программировании у меня нет, но я люблю эксперименты, и у меня есть детская методичка по созданию сайтов. В статье расскажу, как создала свой личный сайт-блог.

Создание сайта — эксперимент для меня

Я частный инвестор и автор статей Т—Ж на околоэкономические темы. Эта статья, как и создание своего сайта — мой эксперимент и личный опыт.

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

Как определить, какой сайт нужен

Сайт — это документы, размещенные в интернете. Документы называются веб-страницами, они объединены ссылками, и у них общая структура. Каждая страница написана на языке программирования и с помощью разметки. Упрощенно это называют кодом сайта или просто кодом. Самые распространенные языки программирования — PHP и JavaScript.

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

Лендинг — это целевой одностраничный сайт. Еще его называют посадочной страницей или промостраницей. Как правило, лендинги строятся по одинаковой схеме: броский заголовок, информация о товаре или услуге, фотографии и одна или несколько форм обратной связи. Чаще всего лендинги используют для рекламных кампаний.

Хороший промосайт побуждает посетителей оставить контакты или сразу заказать товар или услугу.

Чтобы продвигать курсы, у&nbsp;<span class=nobr>Т—Ж</span> есть отдельный лендинг. У&nbsp;каждого курса — своя промостраница. Вот, например, страница курса «Как&nbsp;использовать кредитку и&nbsp;богатеть»: можно почитать, зачем проходить курс, сразу начать учиться или&nbsp;сначала попробовать пройти экзамен, чтобы проверить уровень своих знанийЧтобы продвигать курсы, у&nbsp;<span class=nobr>Т—Ж</span> есть отдельный лендинг. У&nbsp;каждого курса — своя промостраница. Вот, например, страница курса «Как&nbsp;использовать кредитку и&nbsp;богатеть»: можно почитать, зачем проходить курс, сразу начать учиться или&nbsp;сначала попробовать пройти экзамен, чтобы проверить уровень своих знанийЧтобы продвигать курсы, у&nbsp;<span class=nobr>Т—Ж</span> есть отдельный лендинг. У&nbsp;каждого курса — своя промостраница. Вот, например, страница курса «Как&nbsp;использовать кредитку и&nbsp;богатеть»: можно почитать, зачем проходить курс, сразу начать учиться или&nbsp;сначала попробовать пройти экзамен, чтобы проверить уровень своих знаний

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

Личный сайт чемпионки мира по&nbsp;боксу Натальи Рагозиной создали, чтобы привлекать партнеров. По&nbsp;задумке дизайнеров основные цвета сайта должны ассоциироваться с&nbsp;боевым духом и&nbsp;женственностью. На&nbsp;сайте есть информация о&nbsp;титулах, званиях и&nbsp;результатах поединков Рагозиной
Личный сайт чемпионки мира по боксу Натальи Рагозиной создали, чтобы привлекать партнеров. По задумке дизайнеров основные цвета сайта должны ассоциироваться с боевым духом и женственностью. На сайте есть информация о титулах, званиях и результатах поединков Рагозиной

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

На&nbsp;корпоративных сайтах публичных компаний есть раздел для&nbsp;инвесторов и&nbsp;акционеров, отчетность компании и&nbsp;новости. Корпоративный сайт формирует имидж компании и&nbsp;повышает ее&nbsp;узнаваемость. Это&nbsp;сайт российской золотодобывающей компании «Полюс»
На корпоративных сайтах публичных компаний есть раздел для инвесторов и акционеров, отчетность компании и новости. Корпоративный сайт формирует имидж компании и повышает ее узнаваемость. Это сайт российской золотодобывающей компании «Полюс»

Информационный сайт — это сайт с последними новостями. Как правило, здесь много текстовых статей.

На новостном сайте можно найти информацию о&nbsp;свежих экономических, политических и культурных событиях в&nbsp;России и&nbsp;за&nbsp;рубежом. Это&nbsp;сайт новостного агентства «Интерфакс»
На новостном сайте можно найти информацию о свежих экономических, политических и культурных событиях в России и за рубежом. Это сайт новостного агентства «Интерфакс»
На информационных сайтах новости появляются каждые несколько минут
На информационных сайтах новости появляются каждые несколько минут

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

Когда мой телефон начал глючить, пришлось искать решение вопроса на&nbsp;сайте, где&nbsp;общались разные люди с&nbsp;такой&nbsp;же&nbsp;проблемой. 4PDA — это&nbsp;огромный форум про&nbsp;смартфоны, планшеты и&nbsp;другие электронные устройства
Когда мой телефон начал глючить, пришлось искать решение вопроса на сайте, где общались разные люди с такой же проблемой. 4PDA — это огромный форум про смартфоны, планшеты и другие электронные устройства

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

На «Петшопе» можно купить товары для&nbsp;животных не&nbsp;выходя из&nbsp;дома. Тяжелые пакеты с&nbsp;кормом донесут до&nbsp;квартиры
На «Петшопе» можно купить товары для животных не выходя из дома. Тяжелые пакеты с кормом донесут до квартиры

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

Услуги могут быть разные: поисковые, банковские, социальные. Такие сайты создавать дорого и, как правило, ими занимаются профессионалы.

Способы создания сайта

Сайт можно написать вручную, например на HTML, создать с помощью конструктора или с помощью системы управления контентом — CMS.

Самостоятельно написать сайт в HTML может быть сложно, потому что нужно знать язык.

HTML — это язык гипертекстовой разметки. Его разработал и опубликовал в 1993 году Тим Бернерс-Ли. На этом языке создавались первые сайты, когда появился интернет, и сейчас его тоже используют для разметки.

С помощью тегов HTML описывает, что есть на странице: картинки, текст, таблицы или видео. А стили описывают, как все это выглядит.

HTML-страницы статические и ссылаются друг на друга. Чтобы обновлять такой сайт, надо менять HTML-страницы — это может быть сложно и долго.

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

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

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

Как грамотно потратить и сэкономить
Рассказываем в нашей рассылке дважды в неделю. Подпишитесь, чтобы совладать с бюджетом

Стоимость создания сайта

Стоимость сайта зависит от сложности разработки, стоимости хостинга и домена и затрат на продвижение.

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

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

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

На что важно обратить внимание при создании сайта

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

Назначение сайта — зачем нужен сайт и что изменится после того, как он появится. Если сайт нужен для души и экспериментов, его можно бросить в любой момент. Такой сайт не предназначен напрямую для заработка. А, например, интернет-магазин нужен для увеличения продаж и получения прибыли. Такой сайт поддерживать сложнее, и хочется хотя бы окупить затраты на его создание.

Целевая аудитория — это люди, которым может быть интересен определенный товар или услуга и которые готовы его купить. Людей из целевой аудитории, как правило, связывают какие-то общие характеристики или признаки.

Например, Наташа продает профессиональные средства для маникюра и педикюра. Ее целевая аудитория — женщины от 20 до 50 лет, которые работают мастерами маникюра и педикюра.

Еще товары Наташи могут быть интересны женщинам, которые сами себе делают маникюр и педикюр. Но что-то покупать они будут реже и в меньших количествах.

Если товары и сервис понравятся, то самые активные покупатели будут возвращаться к Наташе снова и снова и рекомендовать ее своим знакомым.

Целевую аудиторию можно искать на форумах, тематических сайтах, в социальных сетях, салонах красоты или мебели, мастерских и так далее. Также в интернете есть сайты по поиску целевой аудитории, например «Таргетхантер».

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

Если Наташа работает и живет в Санкт-Петербурге, то отправлять лаки почтой в Хабаровск, скорее всего, будет невыгодно. Поэтому продвигать сайт ей эффективнее в Санкт-Петербурге и Ленобласти или в тех регионах, где плохо с поставкой товаров для маникюра и педикюра.

Будет ли SEO-оптимизация. SEO-оптимизация — это постоянные действия с сайтом, которые позволят поисковым системам типа Гугла или Яндекса показывать его при определенных запросах.

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

Подбор домена

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

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

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

Можно предварительно проверить, не занято ли нужное название с помощью сервиса Whois.

Где купить. Я купила домен у аккредитованного независимого регистратора до того, как выбрала хостинг, потому что хотела точно быть владельцем и администратором домена. Аккредитованных регистраторов много, я выбрала первого из Санкт-Петербурга.

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

Регистрация домена обычно платная, перенос домена от одного регистратора к другому тоже.

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

Можно ли зарегистрировать бесплатно. Домен можно зарегистрировать бесплатно, например, при аренде хостинга или не в зонах .ru и .рф. Если вы получаете домен в подарок, лучше проверить, кому принадлежит имя по договору.

Я зарегистрировала домен на&nbsp;год и&nbsp;заплатила 299&nbsp;<span class=ruble>Р</span> по&nbsp;самому простому тарифу
Я зарегистрировала домен на год и заплатила 299 Р по самому простому тарифу
Когда я продлевала хостинг на&nbsp;второй месяц, провайдер предложил мне&nbsp;промокод на&nbsp;регистрацию нового домена всего за&nbsp;1&nbsp;<span class=ruble>Р</span>. На&nbsp;самом деле это не&nbsp;благотворительность. Мой&nbsp;тариф включает всего один сайт, поэтому мне&nbsp;пришлось&nbsp;бы доплатить сверху за&nbsp;размещение «подарочного» сайта на&nbsp;хостинге
Когда я продлевала хостинг на второй месяц, провайдер предложил мне промокод на регистрацию нового домена всего за 1 Р. На самом деле это не благотворительность. Мой тариф включает всего один сайт, поэтому мне пришлось бы доплатить сверху за размещение «подарочного» сайта на хостинге

Подбор хостинга

Хостинг измеряется дисковым пространством на сервере, то есть мегабайтами и гигабайтами. Для профессионалов еще важны вычислительная мощность и объем памяти. Конечно, можно купить весь сервер, но это дорого, поэтому чаще всего хостинги арендуют. На хостинг сайт размещают после того, как зарегистрирован домен. Если домена нет, то придется заходить на сайт по IP-адресу.

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

Как выбрать хостинг. У меня нет опыта в выборе хостинга. Я нашла в интернете статистику по популярности различных хостингов и просто выбрала самый крупный.

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

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

По&nbsp;статистике, 20%&nbsp;всех сайтов в&nbsp;зонах&nbsp;.рф и&nbsp;.ru используют хостинг от&nbsp;«Рег-ру». Вряд&nbsp;ли такой крупный провайдер внезапно исчезнет вместе с&nbsp;моим сайтом. Источник: statonline.ru
По статистике, 20% всех сайтов в зонах .рф и .ru используют хостинг от «Рег-ру». Вряд ли такой крупный провайдер внезапно исчезнет вместе с моим сайтом. Источник: statonline.ru
По&nbsp;статистике, 20%&nbsp;всех сайтов в&nbsp;зонах&nbsp;.рф и&nbsp;.ru используют хостинг от&nbsp;«Рег-ру». Вряд&nbsp;ли такой крупный провайдер внезапно исчезнет вместе с&nbsp;моим сайтом. Источник: statonline.ru
По статистике, 20% всех сайтов в зонах .рф и .ru используют хостинг от «Рег-ру». Вряд ли такой крупный провайдер внезапно исчезнет вместе с моим сайтом. Источник: statonline.ru
Тарифные планы зависят от&nbsp;количества сайтов, поддержки баз&nbsp;данных и дискового пространства. Это, например, тарифы «Рег-ру». Для&nbsp;разработки сайта на&nbsp;CMS нужны базы данных, поэтому самый дешевый вариант мне не&nbsp;подошел. Если&nbsp;бы я&nbsp;хотела размещать много фото и&nbsp;видео, дисковое пространство тоже имело бы&nbsp;значение. Возможно, мне&nbsp;стоит подумать о&nbsp;SSL-сертификате, потому что&nbsp;сайты без&nbsp;него «Хром» подсвечивает как&nbsp;небезопасные.
Тарифные планы зависят от количества сайтов, поддержки баз данных и дискового пространства. Это, например, тарифы «Рег-ру». Для разработки сайта на CMS нужны базы данных, поэтому самый дешевый вариант мне не подошел. Если бы я хотела размещать много фото и видео, дисковое пространство тоже имело бы значение. Возможно, мне стоит подумать о SSL-сертификате, потому что сайты без него «Хром» подсвечивает как небезопасные.

Чем платный хостинг отличается от бесплатного. На бесплатном хостинге обязательно будет реклама, а сайт могут удалить без предупреждения. Скорость загрузки может быть низкой, а служба поддержки может отвечать медленно. Бесплатные хостинги могут не поддерживать базы данных, которые нужны для работы CMS.

Кроме того, название бесплатного хостинга, скорее всего, будет в названии сайта. Например, traderfeed.blogspot.com — это сайт известного психолога для трейдеров, но в названии кроме «traderfeed» есть еще и «blogspot.com».

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

Лучшие CMS

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

CMS бывают платными и бесплатными, по каждой существует официальное руководство пользователя.

Источник: iTrack
Источник: iTrack
Источник: iTrack
Источник: iTrack

Выбор CMS-платформы зависит от будущих задач сайта и предпочтений разработчиков.

Например, если в будущем Наташа захочет создать интернет-магазин и продавать средства для маникюра, возможно, ей стоит обдумать интеграцию сайта, платежной системы и бухгалтерской программы 1С. Для этого подойдет «Битрикс».

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

Проверить, какой движок стоит на сайте, можно на W3techs. Только надо помнить, что не все сайты используют CMS.

Допустим, Наташе нравится, как выглядит сайт интернет-магазина «Красотка-про». Тогда можно попробовать сделать что-то похожее на такой же системе управления сайтом.

На сайте «Красотка-про» используется CMS&nbsp;«Битрикс»
На сайте «Красотка-про» используется CMS «Битрикс»

Wordpress — бесплатная платформа. Изначально она задумывалась для создания блогов, но на ней можно реализовать любой тип сайта. Т—Ж изначально тоже был на «Вордпрессе».

Есть два варианта сайтов на «Вордпрессе»:

  1. Блоги, которые бесплатно размещаются на платформе и называются имя.wordpress.com. В этом варианте нельзя добавлять различные плагины и размещать рекламу, но можно привязать свой домен.
  2. Скачиваемая версия wordpress.org, которая устанавливается на хостинг. Во втором варианте можно сделать практически любой сайт с полным контролем над ним.

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

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

Новички позитивнее всего относятся к «Вордпрессу», согласно презентации новой версии «Друпал» за&nbsp;октябрь 2019&nbsp;года
Новички позитивнее всего относятся к «Вордпрессу», согласно презентации новой версии «Друпал» за октябрь 2019 года
Иконки соцсетей на сайте — это тоже виджеты
Иконки соцсетей на сайте — это тоже виджеты

Bitrix — платная модульная платформа, заточенная под взаимодействие с 1C. Например, интернет-магазин получает данные о ценах, скидках и остатках товаров из 1С, а 1С, в свою очередь, получает данные о заказах, покупателях и платежных системах из интернет-магазина. Обмен данными может происходить по расписанию или в режиме реального времени.

В «Битриксе» есть специальные решения для интернет-магазинов, то есть сайт будет сразу адаптирован для продаж.

«Битрикс» отличают от других CMS-интеграция с 1C, высокая защита от взломов и встроенный антивирус. Но он требует много ресурсов для работы. На сайте «Битрикса» даже есть контакты компаний-разработчиков, у которых можно заказать разработку сайта на этой платформе.

Управление сайтом состоит из&nbsp;26&nbsp;модулей. Выглядит это&nbsp;достаточно сложно, видимо, поэтому с&nbsp;этой CMS работают профессионалы
Управление сайтом состоит из 26 модулей. Выглядит это достаточно сложно, видимо, поэтому с этой CMS работают профессионалы

ModX. На официальном сайте пишут, что для установки и настройки сайта с помощью этой CMS надо знать основы веб-разработки. А чтобы работать с сайтом, созданным на ModX, достаточно уметь пользоваться «Вордом». Разработчики на форуме хвалят гибкость платформы и возможность создать совершенно непохожие друг на друга сайты.

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

Мэрриотт и Уоринг в учебнике «Joomla 3.0! Официальное руководство» пишут, что создать сайт с помощью этой платформы можно меньше чем за два часа. Но, скорее всего, такой поспешный результат будет далек от совершенства. В руководстве на примере очень простых тестовых сайтов разобран рабочий процесс — от установки до дизайна, продвижения и выбора хостинга.

Drupal. В этой CMS нет единой системы оформления — каждый пользователь может оформить сайт на свой вкус. Работа сайта организуется не так, как в Joomla.

«Друпал» — более гибкая, но более сложная система управления сайтом. Она больше подходит тем, у кого есть опыт программирования. Систему можно расширить за счет стандартных модулей, но придется разбираться в коде.

На слайде из презентации новой версии «Друпала» видно, что новички чаще всего оценивают платформу негативно, а экспертам она нравится
На слайде из презентации новой версии «Друпала» видно, что новички чаще всего оценивают платформу негативно, а экспертам она нравится

Инструкция: как создать сайт при помощи CMS на примере Wordpress

Шаг 1. Установить CMS на хостинг. После того как я оплатила хостинг и добавила туда свой домен, мне надо было установить выбранную CMS.

Я остановилась на «Вордпрессе», потому что на нем разработано больше всего сайтов.

В панели управления хостингом у&nbsp;меня есть вкладка «Автоустановка&nbsp;CMS». Если нажать на&nbsp;вкладку, открывается утилита Softaculous — это&nbsp;автоустановщик скриптов CMS для&nbsp;неопытных пользователей. То&nbsp;есть не&nbsp;нужно искать&nbsp;ПО и&nbsp;загружать его&nbsp;на&nbsp;сервер — достаточно нажать на&nbsp;одну кнопку, и&nbsp;выбранная&nbsp;CMS установится автоматически
В панели управления хостингом у меня есть вкладка «Автоустановка CMS». Если нажать на вкладку, открывается утилита Softaculous — это автоустановщик скриптов CMS для неопытных пользователей. То есть не нужно искать ПО и загружать его на сервер — достаточно нажать на одну кнопку, и выбранная CMS установится автоматически

При установке система пришлет пароль и логин для входа — их надо сохранить. После этого можно попасть в консоль управления сайтом, если ввести в строке браузера http://название сайта/wp-admin/.

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

Я поменяла электронный адрес администратора, формат даты и настроила часовой пояс.

Через консоль можно перейти на&nbsp;созданный сайт в&nbsp;режиме просмотра и&nbsp;перед его&nbsp;публикацией в&nbsp;интернете оценить, что&nbsp;получилось. Для&nbsp;этого нужно нажать на&nbsp;кнопку с&nbsp;домиком и&nbsp;названием сайта вверху страницы или&nbsp;выбрать «Просмотрите свой&nbsp;сайт»
Через консоль можно перейти на созданный сайт в режиме просмотра и перед его публикацией в интернете оценить, что получилось. Для этого нужно нажать на кнопку с домиком и названием сайта вверху страницы или выбрать «Просмотрите свой сайт»

Шаг 3. Выбрать темы/шаблоны для сайта. Это можно сделать в консоли, если нажать на кнопку «Настройте свой сайт» или выбрать вкладку «Внешний вид».

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

Темы меняют не только внешний вид, но и структуру страницы. В разных темах содержимое страниц будет показано по-разному. Например, текст будет размещен в два столбца или в один, календарь публикаций может быть слева или внизу.

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

В&nbsp;«Вордпрессе» у&nbsp;меня появилась 3931&nbsp;тема. Их&nbsp;можно было фильтровать, чтобы выбрать подходящие. Я&nbsp;мало что&nbsp;понимала, поэтому выбрала стандартную тему Twenty Twenty
В «Вордпрессе» у меня появилась 3931 тема. Их можно было фильтровать, чтобы выбрать подходящие. Я мало что понимала, поэтому выбрала стандартную тему Twenty Twenty
Так&nbsp;выглядит тема Twenty&nbsp;Twenty. Сайт не&nbsp;будет выглядеть точно&nbsp;так, как&nbsp;на&nbsp;картинке, но&nbsp;структура будет такая&nbsp;же. В&nbsp;описании темы авторы рассказывают, что виджеты будут только в&nbsp;подвале страницы, а&nbsp;текст будет располагаться в&nbsp;один столбик. Я&nbsp;попробовала добавить фон в&nbsp;виде картинки, но&nbsp;он мешал читать текстовые блоки, поэтому фон убрала и&nbsp;больше ничего в&nbsp;теме не&nbsp;меняла
Так выглядит тема Twenty Twenty. Сайт не будет выглядеть точно так, как на картинке, но структура будет такая же. В описании темы авторы рассказывают, что виджеты будут только в подвале страницы, а текст будет располагаться в один столбик. Я попробовала добавить фон в виде картинки, но он мешал читать текстовые блоки, поэтому фон убрала и больше ничего в теме не меняла

Шаг 4. Добавить меню и название сайта. Это можно сделать через кнопку «Настройте свой сайт» или через вкладку «Внешний вид» в меню консоли.

Можно создать не одно меню, а разные варианты, например, для мобильных и стационарных устройств или для подвала страницы.

В&nbsp;меню можно создать страницы, добавить рубрики и&nbsp;ссылки. Сначала я&nbsp;слегка запуталась между страницами и&nbsp;рубриками, но&nbsp;если что-то идет не&nbsp;так, в&nbsp;консоли появляется сообщение об&nbsp;ошибке
В меню можно создать страницы, добавить рубрики и ссылки. Сначала я слегка запуталась между страницами и рубриками, но если что-то идет не так, в консоли появляется сообщение об ошибке

Шаг 5. Подобрать и добавить контент через консоль. В больших проектах за контент отвечает контент-менеджер или специально обученный человек. У меня проект маленький и некоммерческий, поэтому свой сайт я буду заполнять сама.

Записи добавляются по одному и тому же принципу — в меню надо нажать на «Добавить новую запись». При этом надо выбрать нужную страницу или рубрику, если их несколько. Ничего сложно в наполнении сайта нет, но это монотонная и однообразная работа, поэтому подойдет не всем.

Размер шрифтов, цвет, расположение текста можно менять в текстовом редакторе. Там же можно вставлять картинки и видео.

На сайте информация появится после того, как нажмете кнопку «Обновить» или «Опубликовать». Все редакции сохраняются, поэтому можно вернуться к предыдущей версии.

Можно настраивать видимость записей: для всех пользователей, только для тех, кто знает пароль, или только для себя.

Чтобы открыть текстовый редактор, в&nbsp;меню в&nbsp;разделе «Записи» надо выбрать «Добавить новую». Сначала необходимо заполнить заголовок, потом можно переходить к&nbsp;самой записи
Чтобы открыть текстовый редактор, в меню в разделе «Записи» надо выбрать «Добавить новую». Сначала необходимо заполнить заголовок, потом можно переходить к самой записи
В&nbsp;текстовом редакторе можно писать текст, вставлять картинки, менять шрифт и&nbsp;т.&nbsp;п.
В текстовом редакторе можно писать текст, вставлять картинки, менять шрифт и т. п.

Мой сайт уже живет в интернете. Несмотря на то что я заполнила еще не все страницы, уже успела показать сайт друзьям и родственникам.

Мой сайт совсем не&nbsp;похож на&nbsp;личный блог какой-нибудь звезды спорта или&nbsp;«Инстаграма», потому&nbsp;что, чтобы воспользоваться всеми возможностями «Вордпресса», мне&nbsp;надо еще&nbsp;тренироваться и&nbsp;учиться. Мрачноватый черный фон заголовка и&nbsp;подвала можно сменить в&nbsp;любой момент, но&nbsp;пока мне нравится контраст
Мой сайт совсем не похож на личный блог какой-нибудь звезды спорта или «Инстаграма», потому что, чтобы воспользоваться всеми возможностями «Вордпресса», мне надо еще тренироваться и учиться. Мрачноватый черный фон заголовка и подвала можно сменить в любой момент, но пока мне нравится контраст

Лучшие конструкторы сайтов

Конструкторы похожи на CMS, но еще проще. Можно наполнять сайт прямо через браузер — никаких дополнительных программ устанавливать не надо.

Как правило, конструкторы работают по технологии SaaS — «software as a service» — то есть одновременно с конструктором предоставляется и облачный хостинг. Чаще всего существует бесплатный пакет шаблонов или тестовый период, который можно продлить и оплатить, если сервис понравился.

Конструкторы сайтов похожи между собой по структуре и модулям, но отличаются количеством шаблонов, стоимостью и удобством использования. Во всех конструкторах есть раздел «Помощь», где подробно написано, как выбрать шаблон или как сделать так, чтобы сайт появился в результатах поиска.

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

Можно создать сайт бесплатно, но можно воспользоваться и платными подписками. В бесплатном варианте будет некрасивое доменное имя. Например, в моем случае — julsemen.wixsite.com/название сайта.

UKit платный российский конструктор сайтов, но есть тестовый период 14 дней. Никакого кода для создания сайта не надо. Хостинг тоже не нужен: облачный входит в подписку.

В эту же группу входит UCoz. Это система управления сайтами и хостинг для сайтов, созданных на «Юките». Код закрытый, базы данных подключать нельзя, много навязчивой рекламы.

Стартовая стоимость создания сайта в&nbsp;«Юките» не&nbsp;сильно отличается от&nbsp;стоимости хостинга, который я&nbsp;выбрала. Но&nbsp;бесплатного варианта, как&nbsp;в&nbsp;«Виксе», нет&nbsp;вообще
Стартовая стоимость создания сайта в «Юките» не сильно отличается от стоимости хостинга, который я выбрала. Но бесплатного варианта, как в «Виксе», нет вообще
В зависимости от&nbsp;целей можно выбрать разные тарифные планы и&nbsp;возможности конструктора. Стартовая цена есть только у&nbsp;решения «Сайт под&nbsp;ключ». Как и&nbsp;в&nbsp;других конструкторах, сайт для&nbsp;себя, скорее всего, будет дешевле, чем сайт для&nbsp;бизнеса
В зависимости от целей можно выбрать разные тарифные планы и возможности конструктора. Стартовая цена есть только у решения «Сайт под ключ». Как и в других конструкторах, сайт для себя, скорее всего, будет дешевле, чем сайт для бизнеса

Tilda Publishing модульный конструктор. Один сайт можно сделать бесплатно, но для работы будут доступны не все блоки и нельзя будет использовать свой домен. Также нельзя создать интернет-магазин, принимать оплату на сайте, а вопросы в службу поддержки останутся без ответа.

1C-UMI. В этом конструкторе есть четыре бесплатных вида сайта и различные платные варианты. В бесплатных вариантах, как и везде, есть ограничения — размер дискового пространства, имя сайта, реклама.

В «Юми» есть интеграция с 1С и «Яндекс-деньгами», то есть можно создать интернет-магазин и принимать оплату.

Weebly для пользователей из России не работает, и сайт не открывается. Судя по отзывам, на нем можно создать бесплатный сайт или блог. Этот конструктор популярен в США и Европе.

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

В Mozello можно создать блог, сайт или интернет-магазин. Владельцы конструктора сразу предупреждают, что&nbsp;удаляют сайты, которые продвигают любые виды интернет-заработка. Стоит внимательно прочитать правила, прежде чем&nbsp;оплачивать какие-то услуги этого конструктора
В Mozello можно создать блог, сайт или интернет-магазин. Владельцы конструктора сразу предупреждают, что удаляют сайты, которые продвигают любые виды интернет-заработка. Стоит внимательно прочитать правила, прежде чем оплачивать какие-то услуги этого конструктора

Инструкция: как создать сайт в конструкторах на примере Wix

Шаг 1. Нажать кнопку «Создать сайт». Сайт, конечно, сразу не появится — сначала придется пройти еще несколько шагов.

На&nbsp;главной странице «Викса» есть большая кнопка «Создать сайт». Пропустить ее&nbsp;сложно, даже если очень захочется
На главной странице «Викса» есть большая кнопка «Создать сайт». Пропустить ее сложно, даже если очень захочется

Шаг 2. Войти через аккаунт в соцсети или зарегистрироваться как новый пользователь. Я выбрала вариант «Продолжить с Google», поэтому в названии моего бесплатного сайта появилась часть электронного адреса — «julsemen».

Окно регистрации аккаунта открывается сразу после того, как&nbsp;нажмете кнопку «Создать&nbsp;сайт»
Окно регистрации аккаунта открывается сразу после того, как нажмете кнопку «Создать сайт»

Шаг 3. Выбрать тип сайта. «Викс» предлагает 12 категорий, например бизнес, интернет-магазин или портфолио и резюме.

Неважно, какой тип сайта выбрать на&nbsp;этом этапе, потому что&nbsp;«Викс» все&nbsp;равно покажет в&nbsp;меню все&nbsp;существующие шаблоны и&nbsp;категории
Неважно, какой тип сайта выбрать на этом этапе, потому что «Викс» все равно покажет в меню все существующие шаблоны и категории

Шаг 4. Выбрать, как создавать сайт. Конструктор предлагает создать сайт с помощью искусственного интеллекта или в редакторе. Я предпочла редактор, поэтому нажала кнопку «Выбрать шаблон». Сайт будет задавать вопросы и по ответам подберет дизайн.

Шаг 5. Выбрать шаблон. Готовые шаблоны «Викса» меня не устроили, хотя их много. Я выбрала пустой шаблон, потому что хотела все настроить самостоятельно.

Шаблон можно просто посмотреть или сразу начать редактировать. Редактор открывается в отдельном окне.

Готовых шаблонов в&nbsp;«Виксе» много и называются они&nbsp;многообещающе. Например, «Блог модной мамы» или&nbsp;«Дрэг-квин». Сначала любой шаблон можно посмотреть, а&nbsp;потом уже&nbsp;редактировать
Готовых шаблонов в «Виксе» много и называются они многообещающе. Например, «Блог модной мамы» или «Дрэг-квин». Сначала любой шаблон можно посмотреть, а потом уже редактировать
Если выбрать пустой шаблон, откроется чистый белый лист. Фон, меню, страницы и&nbsp;кнопки придется добавлять самостоятельно
Если выбрать пустой шаблон, откроется чистый белый лист. Фон, меню, страницы и кнопки придется добавлять самостоятельно

Шаг 6. Сохранить выбранный шаблон и выбрать домен. Чтобы работа не пропала из-за технических неполадок, сайт лучше сразу сохранить. Это можно сделать на бесплатном домене «Викса» с некрасивым и длинным именем или использовать собственный.

Сохраненный сайт не появится в интернете, а будет лежать в разделе «Мои сайты».

Чтобы сохранить сайт в&nbsp;«Виксе», надо нажать кнопку «Сохранить» в&nbsp;верхнем меню. После этого появляются бесплатный или&nbsp;платный варианты. Я&nbsp;выбрала «Бесплатный домен&nbsp;wix.com». Поменять можно только последнюю часть названия — ту, что&nbsp;подсвечена
Чтобы сохранить сайт в «Виксе», надо нажать кнопку «Сохранить» в верхнем меню. После этого появляются бесплатный или платный варианты. Я выбрала «Бесплатный домен wix.com». Поменять можно только последнюю часть названия — ту, что подсвечена

Шаг 6. Заполнить сайт в редакторе и опубликовать его. На этом этапе можно добавлять и переименовывать нужные страницы сайта, менять фон и шрифты, добавлять меню, картинки и видео.

Чтобы сайт появился в интернете, надо нажать кнопку «Опубликовать».

Вот что получилось в&nbsp;итоге у&nbsp;моих детей — сайт про&nbsp;покемонов с&nbsp;работами в&nbsp;«Скретче». Орфография, пунктуация и&nbsp;дизайн авторские. Мне&nbsp;кажется, что&nbsp;дизайн поинтереснее, чем у&nbsp;меня
Вот что получилось в итоге у моих детей — сайт про покемонов с работами в «Скретче». Орфография, пунктуация и дизайн авторские. Мне кажется, что дизайн поинтереснее, чем у меня

Мои впечатления от эксперимента

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

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

Кроме того, в ходе эксперимента я познакомилась с конструкторами сайтов и CMS и в принципе могу добавить в резюме строчку: «Умею создавать сайты в конструкторе и на „Вордпрессе“». Теперь я могу обучать работе в конструкторе детей и начинающих пользователей. С «Вордпрессом» все сложнее — я пока не чувствую себя уверенно.

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

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