Заметки о покупках в интернете...

Делаем и запускаем свой первый сайт на HTML

Опубликовано: 07.04.2020
Время на чтение: 10 минут

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

Всем привет!

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

Разобравшись в этой кухне и выдержав паузу, я написал свою историю. Иначе ее можно назвать как "пошаговое пособие, по созданию личного сайта, которое я сочинил себе, чтобы отправить в прошлое". В то время, когда я понятия не имел о том, что такое сделать сайт. Если бы я его тогда получил, дела пошли бы проворнее и я стал миллионером. Шутка. Другими словами писал как для себя и сильно старался.

Будет серия заметок. Эта вступительная. Сначала изучи ее. Затем двигайся далее.

Итак, поехали!

Что потребуется

  • Время
  • Усидчивость
  • Рабочий комп и несколько гигов свободного пространства на жестком диске
  • Естественно доступ в сеть
  • Примерно полторы тысячи рублей на хостинг и домен

С чего начать

1. Хостинг

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

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

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

Далее практика.

  • Заходи на сайт hts.ru и регистрируйся. На почту придут реквизиты для доступа к аккаунту. В начале понадобятся только логин и пароль.
  • Входим в панель управления. Выбираем тариф Анлим 1. Почему его и в чем его плюсы? Объясняю. На нем можно держать неограниченное число сайтов. Одного гига для молодого сайта хватит за глаза.
  • Через меню Финансы произвожу оплату хостинга. Обычно беру на год. Это обходится в 1080 руб.

Подведу итог:

1) Поднакопи денег на хостинг

2) Найди подходящего хостера

Мой совет я озвучил выше.

2. Название проекта

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

Где регистрировать название сайта? Для этого нам понадобится регистратор доменных имен. Это компания, которая зарепляет сетевой домен за конкретным человеком или организацией в цифровом мире. В интернете их много. Достаточно вбить в поисковике "регистратор доменов".

Примером может быть REG.ru. Коротко расскажу о работе с этим сервисом и почему в будущем я от него ушел.

Вначале подкупила низкая цена. Регистрацию домена в зоне RU предлагают за 199 руб. При бОльшем количестве начинаются скидки. Я воспользовался их услугами и зарегал один домен. Оплатил 199 и забыл на год. А вот в конце года понадобилось продление. И оно стоило уже 899 руб. Я же рассчитывал на первую сумму и был неприятно удивлен, когда узнал сколько стоит продлить доменное имя. Перенести же домен можно было только после оплаты задолженности, которая возникла на тот момент.

Долг я оплатил. Домен перенес к своему хостеру. Тут мы плавно подходим ко второму варианту покупки домена. Обычно сами хостеры предлагают полный пакет услуг для вебмастера, в том числе и регистрацию домена. Сегодня я отдаю предпочтение этому способу. Как писал выше, в 2020 пользуюсь HTS.ru. Пусть дороже. Домен стоит 350 руб. на год. Зато продление ровно столько же. Маленькая стабильность и никаких сюрпризов.

Далее практика.

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

Мы же начнем регистрировать новое доменное имя. Слева есть меню Домены. Затем вкладка Зарегистрировать новый домен.

регистрация домена

Как видно на следующем скрине "мой сайт о рыбках" свободен. Цена на год 350 руб.

цена домена на hts.ru

Далее ставим галочку напротив варианта в доменной зоне RU и жмем внизу кнопку Заказать. Покупка домена завершается оплатой.

Затем ждем завершения регистрации домена. Процесс занимает около суток. За это время обновляются так называемые DNS сервера у провайдеров. Именно тогда они узнают о новом ресурсе. Набираемся терпения и ждем. Можно пока перейти к следующему пункту о выборе редактора.

После регистрации домена и обновления его DNS-адресов, нам нужно создать на этом домене сайт. Другими словами создать связь между доменом и каталогом на сервере (сайтом).

Подведу итог:

1) Покарпи над названием проекта - возможно в дальнейшем оно выстрелит

2) Найди подходящего регистратора доменных имен - reg.ru, nic.ru, timeweb.com и другие с первой страницы гугла

3) Купи доменное имя - нужна банковская карта

Мой совет я озвучил выше.

3. HTML-редактор

Сделай свой первый сайт на простом HTML. Так называется язык разметки гипертекста. Дальше поймешь нужно оно тебе или нет: бросить или двигаться дальше. Отточи вначале мастерство на статическом сайте.

Разыщи редактор DreamWeaver CC 2014. Простая и удобная программа без наворотов. В последних версиях уже встроенный фрэймворк, но под наши цели он пока не нужен. Поэтому версия CC 2014 подойдет отлично.

Воспользуйся одним из готовых шаблонов, чтобы создать главную страницу. Для этого заходим в меню Файл --> Создать. Тип страницы указываем HTML, макет - две колонки. Далее нажать создать. Сформируется готовая страничка. Ее нужно будет сохранить под названием index.html. Делается как обычно через Ctrl+S.

В следующих обзорах я подробнее разберу структуру страницы.

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

Сохранять название страниц нужно на транслите. Вот удобный сервис для перевода: translit-online.ru

4. Куда сохранить проект?

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

Первую страницу index.html сохраняем именно сюда.

5. Скачай FileZilla

Это бесплатный файловый менеджер. С помощью его будем загружать файлы на сервер. Скачать можно с официального сайта filezilla-project.org.

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

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

6. Robots и htacssess

Также в блокноте создаем текстовый файл с названием robots.txt. В нем мы разрешим поисковикам индексировать наш сайт. Для начала содержание может быть таким:

  • User-agent: Yandex
  • Host: moysiteorybkah.ru
  • User-agent: Googlebot
  • Sitemap: http://moysiteorybkah.ru/sitemap.xml

Файл robots.txt сохраняем в корневой каталог, который у нас называется www

В последней строке у нас ссылка на файл в формате XML. Это карта сайта. Она формируется автоматически в специальном генераторе. Для этого надо зайти, например, на сайт xml-sitemaps.com. Указать ссылку на свой сайт и сервис сформирует нужный нам файл. Его также сохраним в каталог www. Но только после того, как наш сайт будет доступен в сети!

7. Привязка сайта: создаем связь домен-каталог

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

Заходим в меню Домены. Затем в правом столбике "Быстрый доступ" кликаем на иконку Сайты.

связь домен-каталог

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

После этого появится статус Включен. Файлы сайта будут лежать в каталоге /home/srv12345/moysiteorybkah.ru

8. Регистрация сайта в поисковиках

Чтобы сообщить Гуглу о нашем сайте заходим вебмастер по ссылке https://search.google.com/search-console

В левом меню ищем поле Добавить ресурс. Далее следуем подсказкам. Загружаем также нашу карту сайта в формате XML.

Чтобы сообщить Яндексу, идем по ссылке https://webmaster.yandex.ru. Вверху жмем на плюсик и указываем адрес сайта. Также загружаем sitemap.xml

Можно еще сообщить в mail.ru и bing.

8. Установка счетчиков

Счетчик Гугла находится в гугл аналитике: analytics.google.com. Чтобы его получить нужно зарегистрироваться в этом сервисе и сформировать код счетчика. Затем вставить в нижнюю часть сайта.

В Яндексе потребуется зарегистрироваться в Метрике metrika.yandex.ru. В разделе Счетчики перейти вправо и нажать настройки. Там сформировать код счетчика.

Заключение

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

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

Следите за обновлениями.