Всем салют, ADlook на связи!
Чтобы создать максимально полезный текст, мы решили запилить свой гайд о создании сайта с нуля, его наполнении и последующей монетизации, но об этом во второй части.
Начало пути.
В этом тексте мы пошагово разберем создание онлайн-ресурса на примере игрового сайта. Несложные HTML-игры, которые являются отличным способом скоротать время или проветрить мозги после сложной рабочей недели, отлично подойдут.
Итак, что нужно сделать:
1. Домен. Чтобы заполучить имя будущего ресурса нужно отправиться в регистратор. В нашем случае это reg.ru. Создаём профиль. Далее на главной странице выбираем пункт “Домены”.
2. Из предложенных доменных зон выбираем подходящую.
3. Придумываем и создаём недорогое, но цепляющее имя, которое легко запомнить. Иногда придуманный домен может быть занят. Тогда регистратор может предложить выкупить его у владельца. На старте лучше обратить внимание на свободные и менее дорогие варианты.
4. Когда выбор сделан, переходим к оплате. Здесь имеются и дополнительные функции.
За доплату предлагают пакет на 1 год, в него включены возможности быстрого отката изменений ресурсных записей домена, в случае ошибки в их работе.
Такие записи нужны для обмена данными о доменах между серверами. Ошибки же может вызвать их неудачная редактура, если, например, владелец сайта решил привязать к ресурсу поддомен и сделал это неправильно.
В пакете ещё идёт система экстренного оповещения. Она сообщит владельцу сайта о жалобе на ресурс и свяжет с командой регистратора. Они помогут спасти сайт от блокировки.
Можно докупить:
- SSL-сертификат, который будет шифровать конфиденциальную информацию и защищать от мошенников.
- Возможность переадресации, которая позволит перенаправлять юзеров с домена на указанный сайт.
- Также можно получить электронное свидетельство о регистрации домена. Внимательно читаем и решаем, что нам нужно. Ещё потребуется купить хостинг. Он нужен, чтобы предоставить сайту необходимое для файлов пространство.
5. Переходим к оплате товара, выбираем предпочитаемый способ и двигаемся дальше.
После покупки доменное имя нужно разместить на хостинге.
Для этого можно использовать классический хостинг регистратора или сторонний хостинг. После размещения обновление DNS-записи может продлиться до суток.
DNS (Domain Name System) — это система, которая присваивает каждому IP-адресу (адрес каждого уникального устройства в Интернете) своё буквенное имя (домен). То есть, когда пользователь вбивает название сайта, DNS-сервер автоматически переводит его в IP и переносит юзера на нужный сайт.
Когда сайт заработал, и был использован сторонний хостинг (в нашем случае sprinthost.ru), совершаем следующие шаги:
- Отправляемся на него и добавляем созданный сайт в список. Для этого в меню справа кликаем на “Сайты”, в открывшемся окне нажимаем “Добавить сайт”.
Откроется страница со строкой, куда вводим новый домен и кликаем “Добавить сайт”.
- Теперь кликаем на файловый менеджер.
Открываем папку «domains» (домены), ищем добавленный сайт.
Заходим в папку «public.html». Находим кнопку “Создать файл” и в появившемся поле пишем index.html.
Сохраняем.
Так же поступаем ещё два раза и создаём файлы style.css и script.js.
Index.html — будет первой страницей, которую увидит пользователь, её ещё называют «домашней страницей», style.css — это файл, отвечающий за определение стиля, дизайна, вёрстки и т.д., а script.js будет в ответе за весь интерактив на сайте.
Открываем файл index.html. Сюда мы добавим код домашней страницы.
Чтобы это сделать, нужно перейти по ссылке. В открытой вкладке опускаемся ниже и видим поле с текстом кода для файла Index.html.
Копируем и переносим в наш файл index.html. Вставляем и сохраняем.
- Далее опускаемся ниже и видим поле с текстом кода script.js. Снова копируем, открываем наш файл script.js и вставляем туда код.
- Аналогичную операцию проводим и со style.css. Из открытого ресурса мы взяли уже готовые решения по домашней странице, её дизайну и игровому интерактиву.
Если был использован классический хостинг регистратора:
- На почту придёт письмо, где будут указаны логин и пароль для доступа в панель управления и адрес на неё.
- Переходим по ссылке, заполняем поля “логин” и “пароль”, видим приборную панель.
- Теперь кликаем на строчку «Сайты», затем открываем “Файлы сайта” и видим, что тут уже есть файл «index.html», мы добавляем style и script.
- Далее повторяем операции, описанные выше.
После того, как были заполнены файлы и сайт начал работать, можно увидеть, что на нем отсутствуют метатеги и Favicon, из-за этого сайт выглядит бедненько.
Метатеги – это специальные строки кода страницы, которые передают поисковику краткую информацию о сайте. Благодаря им Google или Яндекс смогут найти наш сайт по ключевым словам.
Favicon – это иконка, которая отображается рядом с открытой вкладкой. Сегодня он является своего рода визитной карточкой ресурса и чем лучше по стилю он подходит к сайту, тем лучше.
Вот что нужно сделать для того, чтобы исправить ситуацию:
За Favicon мы отправимся на другой бесплатный ресурс. Переходим по ссылке на favicon. Скачиваем его.
Загруженный ico-файл добавляем в “Менеджер файлов”.
Заходим на сайт и смотрим на открытую вкладку. Иконка есть, у сайта появилась визитка.
Следующим на очереди идет метатег.
1. Отправляемся в Менеджер файлов и открываем index.html. Копируем код ниже.
<meta name="discription" content="Лучшая игра в мире, попытайся выбраться из заточения блоков" /> <meta name="keywords" content="игра, блоки, Breakout, пинг понг, синий, счёт, победа" >
Его можно поставить в любой части файла.“Лучшая игра в мире…” – это описание сайта, а “игра, блоки…” – это ключевые слова, благодаря которым сайт будет находится через поисковики.
Можно изменить описание и слова на своё усмотрение.
- Сохраняем изменения и переходим на сайт.
В панели инструментов браузера находим “Инструменты для разработчика” и открывается код страницы.
Мета-теги на месте.
Итого.
В этом тексте мы разобрали, как при помощи языков кода index.html, style.css и script.js создать свой первый сайт.
Для создания серьезных ресурсов требуются более глубокие знания. Если вас это заинтересовало, советуем посмотреть тематические источники и видеомануалы (например, на YouTube).
В следующей части мы разберём, как добавить рекламный код на ваш сайт для получения первого дохода от монетизации. То есть вы сможете создать свой первый ресурс по нашим мануалам, а после — узнать, как на нём зарабатывать. Без особых усилий, временных затрат и вложений. Есть много способов монетизации: от системы донатов до установки рекламных сеток, как, например, делаем мы для своих паблишеров в ADlook.me. О монетизации с помощью рекламы мы также подробно расскажем в отдельной статье и поделимся интересными кейсами сотрудничества с разными порталами: от крупных СМИ до мелких сайтов узкой направленности. Но это будет позже.
А пока: получилось ли у вас создать сайт по этому гайду?
Чтобы не потерять полезный блог, стоит подписаться и продолжать нас читать.
Это был ADlook, до связи!
Источник: vc.ru
