Как опубликовать сайт в интернете — Журнал «Код»

Мы хотим сделать сайт и опубликовать его в интернете. К этому моменту мы уже:

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

В чём суть этого процесса:

1. Связываем домен и хостинг. Домен — это название сайта, а хостинг — это место, где сайт хранится и обслуживается. Нужно сказать интернету: «Этот сайт — это вон тот хостинг». Для этого нужно кое-что настроить и на хостинге, и на домене.
2. Ждём, пока интернет узнает об изменениях.
3. Загружаем файлы нашего сайта на хостинг. Готово: они доступны миру.

Разберём это по частям.

Настройка хостинга

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

Все настройки хостинга делаются в панели управления. Иногда она оплачивается отдельно, иногда входит в стоимость хостинга. У SpaceWeb она бесплатная, ключи от неё приходят на почту после регистрации хостинга. Выглядит она так:

Нас интересует вкладка «Домены» — именно там делается привязка домена к хостингу. Заходим туда и выбираем «Добавить домен». В поле вводим имя нашего зарегистрированного ранее домена. Эта запись скажет хостингу: «Когда тебе придёт запрос по этому домену, обслужи его»:

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

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

Настройка домена

Мы научили хостинг принимать запросы по адресу mihailmaximov.ru. Но мы не научили DNS-серверы в интернете отправлять эти запросы на наш хостинг.

Чтобы это произошло, мы должны распространить по интернету новость: «Всем DNS-серверам! Если вам придёт запрос на mihailmaximov. ru, отправляйте его на spaceweb!». Эту рассылку за нас сделает наш регистратор доменов reg.ru — нужно лишь дать ему задание.

Заходим в раздел помощи нашего хостинга и узнаём там, что для направления на него доменов нужно указать такие адреса:

ns1.spaceweb.ru

ns2.spaceweb.ru

ns3.spaceweb.pro

ns4.spaceweb.pro

Переходим в личный кабинет регистратора, выбираем домен mihailmaximov.ru, заходим в редактирование DNS-серверов и прописываем там эти адреса:

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

Отправляем файл на хостинг

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

Что такое FTP и зачем оно нужно

В панели управления хостинга выбираем раздел «Домены», там находим домен mihailmaximov.ru и нажимаем на значок папки рядом с ним. Папка — это файловый менеджер, мы как бы открываем виртуальный диск с нашим сайтом:

Несмотря на то, что сайт мы только создали, там уже что-то лежит. Разберёмся:

Папка cgi-bin — это папка для выполнения скриптов, написанных на языках Perl, C и shell. У нас таких скриптов на сайте нет, поэтому эту папку мы не трогаем.

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

index.html — это документ, который веб-сервер считает корневым, как бы «нулевой километр» нашего сайта. Если запросить сайт mihailmaximov.ru, то веб-сервер найдёт в корневой папке index.html и отдаст его содержимое.

Сейчас в файле index.html лежит стандартный приветственный текст от хостинга, и он нам не нужен. Удалим его. Отмечаем этот файл галочкой и нажимаем вверху «Удалить».

Осталось закачать вместо него то, что нам нужно.

1. Открываем наш файл с сайтом. Для вашего удобства исходный код приведён ниже в расхлопе.
2. Сохраняем этот файл под именем index.html — это будет главный файл нашего сайта.
3. В панели управления хостингом находим кнопку «Загрузить файл», выбираем наш index.html и подтверждаем.

<!DOCTYPE html>
<html>
<!-- служебная часть -->
<head>
  <!-- заголовок страницы -->
  <title>Михаил Максимов — преподаватель информатики</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- загружаем Бутстрап -->
  <link rel="stylesheet" href="https://stackpath. bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style type="text/css">
    img {
      max-width: 100%;
      max-height: 100%;
    }
    h2 {
      font-size: 50px;
      margin-top: 30px;
      margin-bottom: 20px;
    }
    h3 {
      margin-top: 40px;
      margin-bottom: 20px;
    }
    p {
      font-size: 18px;
    }
  </style>
</head>
<body>
  <div>
    <div>
      <div>
        <h2>Михаил Максимов</h2>
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        <p>Я преподаю информатику с 2008 года, когда предмет ещё назывался ИКТ. Начинал со школы, учил детей разбираться
          в программировании и сдавать ЕГЭ на 90 баллов и выше. За два года вывел нашу школу на второе место в районе по
          олимпиадам по информатике. Вёл два класса коррекции — пятый и одиннадцатый — и знаю, как объяснить основы
          теории вероятности даже тем, кто не хочет ничему учиться.  </p>
        <p>В 2012 защитил кандидатскую диссертацию по обучению информатике детей с недостатком внимания и стал
          внештатным преподавателем РГСУМ им. Макаренко. Параллельно с этим веду курсы по программированию «IDDQD» и
          записываю подкаст «Прогрокаст» с аудиторией 25 000 человек.</p>
      </div>
      <div>
        <img src="http://thecode.local/wp-content/uploads/2019/07/sq_me.jpg">
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        <h3>Мои научные работы</h3>
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        <p><a href="http://thecode.local/baboolya/">Задача про бабушку и помидоры</a></p>
        <p><a href="http://thecode.local/electrician/">Хитрый электрик</a></p>
      </div>
      <div>
        <p><a href="http://thecode.local/le-timer/">Как сделать свой таймер-напоминалку</a></p>
        <p><a href="http://thecode.
   local/sublime-one-love/">Почему Sublime Text — это круто</a></p>
      </div>
      <div>
        <p><a href="http://thecode.local/est-tri-shkatulki/">Поговорим о Якубовиче</a></p>
        <p><a href="http://thecode.local/content-manager/">Как стать контент-менеджером</a></p>
      </div>
      <div>
        <p><a href="http://thecode.local/batareyki-besyat/">Задача про сторожа и фонарик</a></p>
        <p><a href="http://thecode.local/variables/">О названиях функций</a></p>
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        <h3>Контакты для связи</h3>
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        <p>Телефон: +7 (123) 456-78-90</p>
        <p>Почта: <a href="mailto: mihailmaximov@gmail.com">mikemaximov@gmail.
  com</a></p>
        <p>Скайп: mihailmaximov</p>
        <p>Телеграм: @mihailmaximov</p>
      </div>
    </div>
  </div>
</body>
<!-- конец всей страницы -->
</html>

Когда DNS-записи обновятся, все увидят, что находится по адресу mihailmaximov.ru, Всё, сайт готов:

Что дальше

Сейчас наш сайт — это одна страничка в сети, и есть множество способов его улучшить:

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

Всё это мы постепенно сделаем и поделимся с вами. Не переключайтесь.

Как опубликовать веб‑страницу в интернете?

Как сверстать, если никогда не верстал

• ХТМЛ, структура и содержимое

• ЦСС, оформление страницы

• Публикация страницы в интернете

Как сверстать, если никогда не верстал

• ХТМЛ, структура и содержимое

• ЦСС, оформление страницы

• Публикация страницы в интернете

В прошлых советах я рассказал, как с нуля сделать простую веб‑страницу с базовым оформлением.

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

Предположим, что в конце последнего совета у нас получилась такая страница‑визитка — файл index.html с разметкой и стилями:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Иван Фубаров</title>
    ​  
    <style>
      body {
        font-family: Helvetica;
        font-size: 18px;
        line-height: 20px;
        background-color: #000; 
        color: #fff;
      }
      h2 {
        font-size: 32px;
      }
      p {
        max-width: 250px;
        opacity: 0.9;
      }
      .highlighted {
        color: #ffd500;
      }
    </style>
  </head>
  <body>
    <h2>
      Иван <span class="highlighted">Фубаров</span>
    </h2>
    <p>Дизайнер, руководитель, философ, любитель луковых оладий.</p>
    <p>Помогаю бизнесу выглядеть подтянуто и стильно.
  Оптимизирую работу дизайнеров.</p>
    <p>В свободное время занимаюсь йогой и гуляю с котом 🐈</p>
  </body> 
</html>

Как страница попадает в интернет

Страницу можно открыть на своём компьютере, если перетянуть ХТМЛ‑файл в браузер.

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

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

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

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

Аренда сервера

Услугу по аренде сервера называют хостингом. Видов хостингов много, они отличаются ценами и специализацией: кто‑то сдаёт простые сервера для несложных сайтов, а кто‑то предлагает мощные серверные кластеры для огромных проектов.

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

Гитхаб как хостинг

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

Гитхаб как хостинг

• Рег.ру

• Таймвеб

Популярные и зарекомендовавшие себя в рунете хостинги — Рег.ру, Таймвеб и Бегет.

• Рег.ру

• Таймвеб

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

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

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

Сначала регистрируемся, ищем в меню «Виртуальный хостинг», выбираем самый простой тариф:

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

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

У крупных хостингов обычно есть бесплатный пробный период

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

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

На одном арендованном хостинге можно разместить несколько своих сайтов, если позволяет тариф

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

На одном арендованном хостинге можно разместить несколько своих сайтов, если позволяет тариф

В Таймвебе первый сайт создаётся сам при регистрации, ничего добавлять не надо:

Наконец, в разделе «Файловый менеджер» загрузим файл нашей страницы в папку сайта.

Название файла index указывает на главную страницу, она откроется по умолчанию при заходе на сайт по его адресу

В зависимости от хостинга, названия папок для загрузки файла могут быть public_html или www. Эти папки могут находиться сразу в файловом менеджере или в папке с названием сайта. Если в нужной папке уже лежит файл с названием index, его нужно удалить.

Название файла index указывает на главную страницу, она откроется по умолчанию при заходе на сайт по его адресу

Адрес сайта

На один сайт может вести сколько угодно доменов

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

На один сайт может вести сколько угодно доменов

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

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

Цена аренды зависит от доменной зоны — текста после точки в адресе. Адрес в распространённой русской зоне .ru обойдётся дешевле, чем в более солидной коммерческой зоне .com и гораздо дешевле, чем в экстравагантной зоне .xxx.

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

Домены удобно арендовать у той же компании, что и хостинг. В Таймвебе купить домен можно во вкладке «Домены и поддомены», кнопкой «Зарегистрировать домен»:

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

История покупки домена hey.com

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

История покупки домена hey.com

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

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

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка

Отправить

Поделиться

Поделиться

Запинить

Твитнуть

Свежак

Полное руководство для начинающих

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

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

Даже самые опытные маркетологи иногда не знают, с чего начать.

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

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

1. Выберите вариант публикации

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

Первый шаг — выбрать один из четырех основных вариантов.

Кодирование (HTML, CSS, JavaScript)

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

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

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

Конструктор веб-сайтов

Конструкторы веб-сайтов — это быстро, легко и дешево.

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

К популярным конструкторам веб-сайтов относятся Wix, Weebly и Squarespace.

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

Готовы совершить скачок и опубликовать свой первый сайт? 😄 Начните здесь ✅Нажмите, чтобы твитнуть

Система управления контентом (CMS)

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

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

Крайне популярный вариант — в мире 70 миллионов сайтов используют CMS. Некоторые из наиболее распространенных:

• WordPress
• Джумла!
• Друпал
• Magento (для сайтов электронной коммерции)

Распространение CMS через Интернет

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

В отличие от конструктора веб-сайтов, CMS требует, чтобы вы выбрали отдельный хост веб-сайта (см. шаг 4).

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

Комбинация

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

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

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

2. Подготовьте содержимое своего веб-сайта

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

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

Мозговой штурм по значимым темам

На что направлен ваш веб-сайт? Как вы думаете, о чем ваша идеальная аудитория хочет читать?

Придумайте список интересных и актуальных тем.

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

Исследование ключевых слов

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

Вы должны придумать комбинацию коротких и длинных ключевых слов.

Короткие ключевые слова — это общие термины, которые ищут множество людей. Например, «Художественные принадлежности». Вы, вероятно, никогда не станете лучшим веб-сайтом «товары для творчества» в Google.

Но, может быть, вы могли бы занять место в рейтинге «купить кисти в Сент-Луисе». Это ключевое слово с длинным хвостом. Конкуренция ниже, но и объем поиска тоже.

Ключевые слова с длинным и коротким хвостом ( Источник: Ahrefs)

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

Выберите имя

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

Если имя вашего веб-сайта все еще находится в стадии разработки, вы можете сузить его, увидев, какие доменные имена доступны. Найдите крупных регистраторов доменов, таких как GoDaddy, Namecheap, Bluehost и HostGator.

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

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

Используйте изображения и видеоконтент

Содержание вашего веб-сайта не должно быть исключительно текстовым. Людям нравятся изображения на веб-сайте, и им действительно нравятся видео.

Фактически, 69 % потребителей говорят, что они предпочли бы посмотреть видео, объясняющее продукт или услугу, а не читать текстовую статью о нем (18%) или просматривать инфографику (4%).

Карта вашей контент-стратегии

Аудитория вашего сайта состоит не только из людей одного типа.

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

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

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

Проведите мозговой штурм идей тем контента для каждой персоны покупателя на каждом этапе пути клиента.

Пример сопоставления содержимого ( Источник: Hull)

Редактировать для контроля качества

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

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

3. Спроектируйте и создайте свой сайт

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

Каркас вашего макета

Дизайн веб-сайта начинается с каркаса — чертежа вашего сайта в его простейшей форме. Думайте об этом как о скелете вашего сайта.

Каркас веб-сайта не связан с цветами или шрифтами. Скорее, он служит чертежами для размещения таких элементов, как кнопки, меню и изображения.

Пример каркаса веб-сайта

Вы можете нарисовать каркас вручную или использовать такие инструменты, как Adobe XD, Sketch или Figma.

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

Дизайн внешнего вида вашего бренда

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

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

Внедрение удобного для навигации пользовательского интерфейса

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

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

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

Организованная структура веб-сайта ( Источник: Lucidchart)

Соответствовать элементам дизайна. Кнопки и меню должны вести себя одинаково на сайте.

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили трафик более чем на 1000%?

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

Подпишитесь сейчас

Не пренебрегайте дизайном мобильного сайта. Важно, чтобы ваш сайт был удобен для 54,8 % пользователей Интернета, просматривающих его с мобильных устройств. Мобильный адаптивный дизайн больше не является обязательным.

A/B-тестирование избавляет от догадок при разработке веб-сайта. A/B-тестирование, или сплит-тестирование, сравнивает два элемента веб-страницы друг с другом, чтобы увидеть, какой из них работает лучше. Например, вы можете проверить, получают ли больше кликов красные или синие кнопки CTA.

Используйте результаты сплит-тестов для постоянной оптимизации UX.

Не знаете, как начать A/B-тестирование? Мы подготовили для вас список из десяти лучших инструментов A/B-тестирования WordPress.

4. Разместите свой сайт

Веб-хостинг — это онлайн-сервис, позволяющий опубликовать ваш сайт. Веб-хост предоставляет серверное пространство для файлов веб-сайта.

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

Найти веб-хост

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

Общий хостинг

Ваш первый вариант — использовать одну из популярных хостинговых платформ, таких как GoDaddy или HostGator. Фактический сервер, на котором хранится ваш веб-сайт, будет принадлежать службе хостинга и часто (по крайней мере, в случае самых дешевых тарифных планов) будет использоваться совместно с другими веб-сайтами.

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

Это очень важно, поскольку коэффициент конверсии веб-сайта падает в среднем на 4,42 % с каждой дополнительной секундой загрузки.

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

Управляемый хостинг

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

Но это еще не все для тех, кто выбрал Kinsta в качестве своего хостинг-провайдера, например, непревзойденная поддержка, оптимизированная по производительности хостинговая инфраструктура, использующая преимущества сети премиум-класса GCP, оптимизированные для вычислений виртуальные машины C2, 35 центров обработки данных, бесплатная Kinsta CDN на базе Cloudflare. и его глобальная сеть из более чем 200 городов, брандмауэр корпоративного уровня и защита от DDoS.

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

Сделай сам

Другой вариант — взять на себя полную ответственность за настройку, обновление и обеспечение работоспособности серверов вашего веб-сайта.

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

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

Загрузить файлы

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

Тестовый сайт

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

Оптимизация файлов и мультимедиа для повышения производительности

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

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

5. Опубликуйте свой сайт

Вот и все! В тот момент, когда вы делитесь своим творением с миром.

Push Site Live

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

Нажмите «Опубликовать» и запустите.

Отправка сайта в поисковые системы

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

Google

Чтобы отправить свой веб-сайт в Google, настройте свою консоль поиска Google и подтвердите право собственности на веб-сайт.

Самый простой способ подтвердить право собственности на домен — скопировать запись DNS TXT и добавить ее к поставщику доменных имен.

После входа в Search Console перейдите в раздел «Карты сайта» на боковой панели, вставьте URL-адрес своей карты сайта и нажмите «Отправить».

Google Search Console

Bing

Bing требует, чтобы вы следовали почти идентичному процессу с Bing Webmaster Tools. Войдите в систему, перейдите в «Карты сайта» на боковой панели, вставьте URL-адрес своей карты сайта и нажмите «Отправить карту сайта».

Другие поисковые системы

Вы также можете отправить свой новый веб-сайт на Yahoo! и ДакДакГоу.

6. План на будущее

Веб-сайт — это не проект «установил и забыл».

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

Расширение за счет нового контента и функций

Вы должны постоянно писать новый контент для своего сайта. Это поддерживает вовлеченность и интерес вашей аудитории, и это хорошо для SEO.

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

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

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

Увеличьте каналы дохода за счет монетизации

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

Медийная реклама

Никто не любит рекламу на веб-сайте, но это один из самых простых способов монетизировать свое присутствие в Интернете.

Google Adsense – это платформа, позволяющая отображать текстовую, графическую, видео- и интерактивную мультимедийную рекламу. Объявления, которые видят люди, основаны на их личных предпочтениях и истории поиска.

Существуют также альтернативы AdSense , на которые вы можете обратить внимание.

Партнерский маркетинг

Партнерский маркетинг — это когда бренд работает с партнерами (то есть с вами), которые продвигают продукты бренда.

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

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

Продажа контента

Продажа премиум-контента, такого как электронные книги и онлайн-курсы, может принести вам немного денег. Он также служит другим целям.

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

Используйте стратегию SEO

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

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

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

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

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

Используйте стратегию использования социальных сетей

84 % взрослого населения США в возрасте от 18 до 29 лет являются активными пользователями социальных сетей. С помощью привлекательной стратегии в социальных сетях вы можете повысить узнаваемость бренда и привлечь некоторых из этих пользователей на свой сайт.

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

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

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

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

Резюме

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

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

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

---

Экономьте время, затраты и повышайте производительность сайта с помощью:

• Мгновенная помощь от экспертов по хостингу WordPress, круглосуточно и без выходных.
• Интеграция Cloudflare Enterprise.
• Глобальный охват аудитории с 35 центрами обработки данных по всему миру.
• Оптимизация с помощью нашего встроенного мониторинга производительности приложений.

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

Как опубликовать веб-сайт (шаг за шагом)

Вы хотите опубликовать веб-сайт, но вас беспокоят технические вопросы?

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

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

Использование конструктора веб-сайтов для публикации веб-сайтов

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

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

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

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

Более 69% всех веб-сайтов в Интернете созданы с использованием конструктора веб-сайтов или платформы CMS. Это означает, что даже разработчикам не нужно писать код с нуля, чтобы опубликовать веб-сайт.

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

1. Публикация веб-сайта с помощью WordPress

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

Более 43% всех веб-сайтов в Интернете работают на WordPress.

Чтобы начать работу с WordPress, вам понадобится доменное имя (например, wpbeginner.com) и веб-хостинг (здесь хранятся файлы вашего веб-сайта).

Мы рекомендуем использовать Bluehost. Они предлагают пользователям WPBeginner бесплатное доменное имя и щедрую скидку 60% на хостинг (2,75 доллара в месяц).

Если вы хотите попробовать альтернативу, мы рекомендуем SiteGround или любого из этих ведущих хостинг-провайдеров WordPress.

Далее вам необходимо установить WordPress. У нас есть пошаговое руководство по установке WordPress, которое проведет вас через процесс установки.

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

Далее вам необходимо установить и активировать плагин SeedProd. Для получения более подробной информации см. наше пошаговое руководство по установке плагина WordPress.

SeedProd — лучший плагин для создания страниц WordPress. Это позволяет вам быстро публиковать профессионально разработанные веб-страницы для вашего веб-сайта, используя простой пользовательский интерфейс перетаскивания.

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

Альтернативы SeedProd

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

• Beaver Builder — конструктор веб-сайтов WordPress с возможностью перетаскивания и расширенными настройками темы
• Divi Builder — еще один удобный для начинающих конструктор тем WordPress с множеством готовых шаблонов
• Elementor — мощный инструмент для создания страниц для WordPress, подходящий как для начинающих, так и для разработчиков

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

Он широко используется и пользуется доверием миллионов новичков, а также известных брендов, таких как Microsoft, Facebook, и даже правительство США использует WordPress для поддержки веб-сайта Белого дома.

Самое приятное в WordPress то, что существует более 59 000 плагинов WordPress, которые позволяют добавлять на ваш веб-сайт практически любые функции, такие как интернет-магазин (электронная коммерция), контактная форма, функции SEO и многое другое.

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

2. Публикация веб-сайта с помощью Web.com Website Builder

Web.com — один из старейших и наиболее известных инструментов для публикации веб-сайтов для малого бизнеса.

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

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

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

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

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

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

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

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

Альтернативы Web.com Website Builder

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

• Конструктор веб-сайтов с постоянным контактом — конструктор веб-сайтов с функцией перетаскивания и интеллектуальными функциями искусственного интеллекта. Поставляется с бесплатной пробной версией.
• Wix — быстрорастущая платформа для создания веб-сайтов, в которой есть все функции, необходимые для создания веб-сайта.
• Gator от HostGator — полностью размещенный конструктор веб-сайтов, созданный людьми, стоящими за HostGator. Он поставляется с интуитивно понятным издателем перетаскивания с красивыми шаблонами.
• Domain.com Website Builder — полнофункциональный конструктор веб-сайтов с красивыми шаблонами для быстрой публикации веб-сайта.
• GoDaddy — крупный регистратор доменных имен, который также предлагает инструменты для создания веб-сайтов.
• HubSpot Website Builder — универсальная платформа для маркетинга и создания веб-сайтов, которая поставляется с конструктором веб-сайтов, CRM, маркетингом по электронной почте, инструментами продаж и персонализацией.

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

3. Вручную опубликуйте свой веб-сайт

Для тех из вас, кто хочет учиться и хочет погрузиться в основы HTML, CSS и JavaScript, то это путь, который вы можете выбрать.

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

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

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

Все веб-сайты в Интернете нуждаются в хостинге. Он предоставляет вам хранилище на онлайн-веб-сервере, где вы можете загружать и хранить файлы своего веб-сайта.

Вы можете зарегистрироваться в Bluehost, одной из крупнейших хостинговых компаний в мире. Они предлагают пользователям WPBeginner щедрую скидку + бесплатное доменное имя + бесплатный SSL-сертификат.

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

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