Как самому создать сайт с нуля? Пошаговая инструкция для чайников

Всем доброго дня! Никого из моих знакомых не интересовало, как я зарабатываю в интернете и сколько, до тех пор, пока мой заработок не превысил n-ую сумму.

Наташа, научи создавать сайты. А у меня получится? Я тоже хочу работать дома. Как создать сайт с нуля и начать зарабатывать удаленно? Ты молодец!

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

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

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

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

Я не стала писать про файл robots.txt, так как мало что сама в нем понимаю. Можете пока оставить файл так, как он сформировался при создании сайта через CMS, а можно скопировать содержимое файла у меня, изменив доменное имя на свое - https://sovet-podarok.ru/robots.txt.

Какой хостинг лучше выбрать для сайта на wordpress?

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

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

Негативные отзывы пишут конкуренты. Все мои знакомые вебмастера не променяют его ни на какой другой. К тому же на Бегет можно купить доменное имя для сайта, а значит управлять и оплачивать услуги не выходя из своего личного кабинета. Это очень удобно. Согласитесь?

Процесс регистрации прост. Выбираю самый дешевый тариф Blog. И продолжаю регистрацию как физическое лицо.

Заполняю необходимые регистрационные данные.

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

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

Сгенерированный логин и пароль сохраняю в надежном месте. Для хранения паролей я пользуюсь сервисом - https://www.lastpass.com/ru

Совершаю вход на хостинг, указав логин и пароль.

Как купить доменное имя для сайта ru?

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

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

Где проверить историю домена?

• http://www.nic.ru/whois/
• http://archive.org
• http://yandex.ru и http://google.ru (запрос site:урл_сайта)
• http://ahrefs.com и http://linkpad.ru
• RDS Bar
• Инструменты веб-мастеров Яндекс и Гугл
• Динамика индексации

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

А затем на вкладку «Регистрация доменов».

Ввожу свой домен. Но перейти на шаг оформления покупки я не могу, так как еще не успела пополнить баланс.

Кликаю по кнопке «Пополнить счет». Выбираю страну «Россия» и перечисляю денежки удобным способом.

Заполняю форму для регистрации домена. Ввожу паспортные данные, указываю номер телефона (обязательно его подтверждаю), а также email.

Открывается окно. Здесь написано – Почти все! Осталось установить несколько галочек. Продлевать домен — соглашаюсь, и защитить сайт сертификатом — соглашаюсь.

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

Заявка на регистрацию домена успешно отправлена.

Прошло ровно 2 дня. Сертификат SSL установлен.

Как создать сайт на wordpress с нуля 2019: новое пошаговое руководство

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

Теперь мне надо создать сайт на движке WordPress. Делается это за несколько минут.

Перехожу на вкладку «Установка систем управления».

Выбираю движок WordPress

Задаю логин, например, – brilliantee и пароль — 1jdiJiuyvsh%, указываю настоящую почту администратора, например: fthdarok@gmail.com.

Открываю расширенные настройки. Ввожу имя базы данных и придумываю пароль. Нажимаю кнопку «Установить».

Выскакивает окно-предупреждение, что процесс завершится через несколько минут.

Прошло пару минут. Ввожу свой домен в адресную строку и вижу — движок для сайта установился.

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

Как установить тему на Вордпресс и редактировать ее?

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

Есть проверенные, хорошие, легкие и недорогие темы для сайтов на движке WordPress. Одна из таких тем с микроразметкой, со смайликами, валидная, со встроенными рекламными блоками, называется Root.

Эту тему я давно купила с неограниченной лицензией. Поэтому я смело буду устанавливать на свой новенький сайт проверенную временем тему для сайта.

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

Открывается окно. В нем прописаны все данные, введенные при регистрации.

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

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

Перехожу по вкладке «Внешний вид» — «Темы».

Кликаю на ссылку — добавить новую — загрузить — выберите файл. Выбираю файл с темой, устанавливаю, активирую.

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

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

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

Возвращаюсь на вкладку — внешний вид — темы. Загружаю новый архив под названием root_child.zip. Активирую тему.

Теперь все настройки внешнего вида я буду производить в дочерней теме.

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

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

Внешний вид.

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

Первый блок Структура.

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

Второй блок: Блоки и расположение.

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

Особенно мне понравилась секция с возможностью добавлять произвольный код между тегами <head>, </body>. Очень удобная функция для «чайников».

Блок Типографика.

Здесь можно устанавливать шрифт, межстрочное пространство.

Свойства сайта.

Здесь я буду загружать подходящую картинку (иконку) в шапку сайта. Пропишу название сайта.

Цвета.

Люблю играть с цветом, особенно когда есть возможность изменять цвет в разных областях.

Фоновое изображение.

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

Меню.

Позволяет настроить отображение меню в разных частях сайта.

Виджеты.

Это еще одна возможность настроить сайдбар. Выводить можно видео, аудио, похожие стать, календарь и т. д.

Главная страница.

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

Дополнительные стили.

Никогда не пользовалась этой вкладкой. Этот вид настройки для программистов. А может быть я просто не вникала, за ненадобностью.

Какие плагины нужны для wordpress?

Я начинаю устанавливать необходимые плагины на новенький сайт. Но для начала перехожу в «Настройки» — «Постоянные ссылки», указываю произвольное формирование ссылок (/%postname%.html).

Теперь я перехожу по вкладке «Настройки» — «Медиафайлы». Здесь делаю такие настройки, как на скриншоте, чтобы движок WordPress не плодил дубли картинок.

Yoast SEO

На всех моих сайтах стоит seo-плагин Yoast SEO. Этот плагин считают лучшим, обновляется он очень часто.

Чтобы установить на сайт первый плагин, я перехожу по вкладке «Плагин» — «Добавить новый». Ввожу в поиск название плагина, нахожу его и устанавливаю. Активирую.

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

Изменения сохраняю. Дальше перехожу по вкладке SEO — Отображение в поисковой выдаче — Общие настройки. Прописываю название и мета-описание сайта вручную.

Изменения сохраняю. На вкладке «Типы содержимого» оставляю настройки без изменения.

Во вкладке «Таксономии» отключаю метки, чтобы они не участвовали в результатах поиска. Удаляю префиксы рубрик.

Отключаю и архив автора.

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

По совету разработчиков темы сделала настройки (смотрите скриншот).

RusToLat.

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

Ввожу название плагина в строку поиска и устанавливаю. После активации дополнительные настройки не нужны.

Google XML Sitemaps.

Этот плагин нужен, чтобы улучшить индексацию страниц и записей поисковыми роботами. Основные поисковые системы — это Яндекс и Гугл. Чтобы установить этот плагин, я в сео-плагине отключила карту сайта. Теперь Яндекс «ругаться» не будет.

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

После активации плагина карта сайта открывается по ссылке — домен/sitemap.xml. Очень скоро я буду добавлять эту ссылку в аддурилку (Яндекс вебмастер) Яндекса и Гугла для ускорения индексации.

WP Super Cache.

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

Нахожу плагин, устанавливаю и временно активирую, чтобы произвести необходимые настройки (Настройки — WP Super Cache).

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

Настройки у меня такие, как на скриншоте.

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

Broken Link Checker.

Устанавливаю еще один плагин, который у меня стоит на всех сайтах. Он помогает находить битые ссылки. Пользуюсь я Broken Link Checker редко, поэтому активирую плагин только на время проверки, а потом снова деактивирую. Не всегда хорошо он справляется со своей задачей. А битые ссылки на видеоролики канала ютуб вовсе не находит.

Тем не менее я его ставлю, так как всегда что-то правлю на сайте, а некоторые страницы и вовсе удаляю. Если одна статья ссылалась на удаленную, ссылка становится битой, то есть нерабочей.

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

В моем случае плагин «Проверка ссылок» совместим с моей версией. Его я и установлю самым обычным способом.

ВП Типограф Лайт.

Не обновлялся WP Typograph Lite уже более 10 лет, но это не мешает ему выполнять функции по форматированию текста, согласно правилам русского языка. Скачиваю плагин с официального сайта - https://ru.wordpress.org/plugins/wp-russian-typograph/.

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

WP-PostViews.

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

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

Обновляйте WordPress до версии 5.0 с активным плагином Classic Editor.

Как сделать фавикон и разместить на вордпресс?

Фавикон для сайта я сделала моментально на одном сервисе, который позволяет генерировать фавиконки за считанные секунды.

А вот и ссылка - https://pr-cy.ru/favicon/

Загружаю маленькую картинку и ву-а-ля. Фавиконка с моей картинкой автоматически скачалась в папку загрузок. Можно закидывать файл в корневую папку сайта.

Перехожу в настройки: внешний вид темы — настроить — свойства сайта.

Загружаю квадратное изображение с расширением iсo. Если что-то пошло не так, можно зайти в свой аккаунт на хостинге, перейти по вкладке «Файловый менеджер», и загрузить файл в корень папки.

Захожу по адресу https://доменное_имя/favicon.ico. Фавиконка загружается с моего сайта. Отлично!

Политика конфиденциальности и пользовательское соглашение

Создаю первые две страницы. И та и другая должны быть на любом сайте. Однажды мы с коллегами уже писали политику конфиденциальности и пользовательское соглашение, поэтому я решила не усложнять себе жизнь. Скопирую 2 страницы с сайта https://sovet-podarok.ru/, заменю имя сайта, а текст оставлю как есть.

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

Открываю страницу, сношу текст и вставляю свой. Редактирую, прописываю свою контактную информацию (почту я создала на хостинге), сохраняю.

Подобным образом создаю страницу с пользовательским соглашением.

Примеры страниц:

1. https://sovet-podarok.ru/politika-konfidencialnosti
2. https://sovet-podarok.ru/polzovatelskoe-soglashenie

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

Теперь у меня на сайте есть 2 опубликованные статьи. Перехожу по вкладке Внешний вид — Настроить — Блоки и расположение — Подвал. И в специальном поле «Текст под копирайтом»  вставляю текст, в котором прописываю ссылки на страницы вместо знаков решетки.

a href=«#»Политика конфиденциальности/a | a href=«#» target=«_blank»>Пользовательское соглашение</a> <pdiv style=«font-size: 10px»Информация на сайте предоставлена для ознакомления, администрация сайта не несет ответственности за использование размещенной на сайте информации/div

Готово! Теперь в подвале сайта появились две ссылки.

Попутно я создала еще две страницы. Первая страница — Обратная связь (я вставила шорткод — contactform), а вторая — Карта сайта для людей (вставила шорткод htmlsitemap).

Обе страницы я добавила в меню, которое отображается в шапке сайта.

Как добавить на сайт счетчик посещений?

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

Обычно я устанавливаю 4 счетчика:

1. https://www.liveinternet.ru/add
2. https://top.mail.ru/add
3. https://metrika.yandex.ru/add
4. https://analytics.google.com/

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

Счетчики я установила. Осталось добавить новый сайт в Гугл и Яндекс-вебмастер.

После этой процедуры можно создавать первую рубрику и публиковать статьи на сайт.

Как добавить сайт в Яндекс Вебмастер?

Чтобы добавить свой новенький сайт в Яндекс Вебмастер я перехожу по ссылке https://webmaster.yandex.ru/sites/ и нажимаю на плюсик.

Указываю адрес сайта, по которому он будет участвовать в поиске.

Подтверждаю право на сайт с помощью мета-тега.

Копирую код и вставляю его перед закрывающим тегом head в специальное поле, которое можно найти в настройках темы — Блоки и расположение — Коды.

Перехожу в Яндекс Вебмастере на вкладку Индексирование — файлы Sitemap. Открылось поле, в которое я должна вставить ссылку на карту сайта, сформированную плагином.

Ссылка добавилась в очередь на обработку.

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

Как добавить сайт в Гугл Вебмастер

У меня уже есть аккаунт Google, поэтому я смело перехожу по ссылке http://www.google.com/webmasters/tools/. Нажимаю на красную кнопку «Добавить ресурс».

Нажимаю кнопку добавить. Гугл просит подтвердить права на ресурс.

Я подтвердила свои права с помощью метатега точно так же, как и в Яндекс Вебмастере.

Теперь добавлю ссылку на карту сайта.

Нажимаю на кнопочку, в окошке дописываю адрес вручную - sitemap.xml

Как заработать на сайте?

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

Мне основной доход приносит реклама от Google, Яндекс, а также:

]тизерная сеть;

пуш-рассылка.

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

Всегда рада ответить на ваши вопросы, задавайте в комментариях. Отвечайте на вопросы моих читателей, если вы в них компетентны.

С уважением, Наталья Краснова.