Объясни мне: как опубликовать свой сайт в интернете
Покупаем домен, оформляем хостинг, настраиваем привязку и заливаем файлы. Купаемся в лучах славы.
Мы хотим сделать сайт и опубликовать его в интернете. К этому моменту мы уже:
сделали страницу «О себе» на чистом HTML, которая станет основой для сайта;
купили для неё домен mihailmaximov.ru;
приобрели хостинг, чтобы хранить там все нужные файлы.
А теперь нам нужно подружить между собой эти три компонента, чтобы в итоге получился настоящий сайт.
В чём суть этого процесса:
Связываем домен и хостинг. Домен — это название сайта, а хостинг — это место, где сайт хранится и обслуживается. Нужно сказать интернету: «Этот сайт — это вон тот хостинг». Для этого нужно кое-что настроить и на хостинге, и на домене.
Ждём, пока интернет узнает об изменениях.
Загружаем файлы нашего сайта на хостинг. Готово: они доступны миру.
Настройка хостинга
Сейчас у нас есть две отдельные услуги: домен и хостинг. Нужно их связать, чтобы хостинг знал: «Если у меня запросили сайт с таким-то доменом, показать вот такой сайт». Для этого хостинг нужно настроить.
Все настройки хостинга делаются в панели управления. Иногда она оплачивается отдельно, иногда входит в стоимость хостинга. У SpaceWeb она бесплатная, ключи от неё приходят на почту после регистрации хостинга. Выглядит она так:
Нас интересует вкладка «Домены» — именно там делается привязка домена к хостингу. Заходим туда и выбираем «Добавить домен». В поле вводим имя нашего зарегистрированного ранее домена. Эта запись скажет хостингу: «Когда тебе придёт запрос по этому домену, обслужи его»:
Обслуживать сайт — значит, отдать по запросу какой-то файл. Файл должен где-то лежать. Поэтому на следующем шаге нам предложат выбрать имя для папки, где будут храниться файлы для сайта.
Если у нас в хостинге живёт несколько сайтов, нужно будет задать новую папку. Но так как это наш первый сайт на этом хостинге, оставим стандартную:
Настройка домена
Мы научили хостинг принимать запросы по адресу mihailmaximov.ru. Но мы не научили DNS-серверы в интернете отправлять эти запросы на наш хостинг.
Чтобы это произошло, мы должны распространить по интернету новость: «Всем DNS-серверам! Если вам придёт запрос на mihailmaximov.ru, отправляйте его на spaceweb!». Эту рассылку за нас сделает наш регистратор доменов reg.ru — нужно лишь дать ему задание.
Заходим в раздел помощи нашего хостинга и узнаём там, что для направления на него доменов нужно указать такие адреса:
Переходим в личный кабинет регистратора, выбираем домен mihailmaximov.ru, заходим в редактирование DNS-серверов и прописываем там эти адреса:
Обновление данных DNS может длиться от нескольких часов до пары суток — за это время интернет облетает информация, что у вашего домена новый хостинг. Пока записи не обновились, сайт mihailmaximov.ru будет выглядеть так:
Отправляем файл на хостинг
Что мы имеем сейчас: домен привязан к хостингу, хостинг готов обслуживать домен. Но нигде пока нет файлов нашего сайта. Машины, которые обслуживают наш сайт, не знают, что должно выводиться по запросу. Нужно загрузить файлы нашего сайта на хостинг.
В панели управления хостинга выбираем раздел «Домены», там находим домен mihailmaximov.ru и нажимаем на значок папки рядом с ним. Папка — это файловый менеджер, мы как бы открываем виртуальный диск с нашим сайтом:
Несмотря на то, что сайт мы только создали, там уже что-то лежит. Разберёмся:
Папка cgi-bin — это папка для выполнения скриптов, написанных на языках Perl, C и shell. У нас таких скриптов на сайте нет, поэтому эту папку мы не трогаем.
Файл .htaccess — это файл для локальной настройки веб-сервера, то есть той программы, которая отдаёт нам сайт. С помощью этого файла можно защитить папки паролем, добавить переадресации, хитрым образом видоизменять запросы — как-нибудь напишем об этом подробно.
index.html — это документ, который веб-сервер считает корневым, как бы «нулевой километр» нашего сайта. Если запросить сайт mihailmaximov.ru, то веб-сервер найдёт в корневой папке index.html и отдаст его содержимое.
Сейчас в файле index.html лежит стандартный приветственный текст от хостинга, и он нам не нужен. Удалим его. Отмечаем этот файл галочкой и нажимаем вверху «Удалить».
Осталось закачать вместо него то, что нам нужно.
Открываем наш файл с сайтом. Для вашего удобства исходный код приведён ниже в расхлопе.
Сохраняем этот файл под именем index.html — это будет главный файл нашего сайта.
В панели управления хостингом находим кнопку «Загрузить файл», выбираем наш index.html и подтверждаем.
Я преподаю информатику с 2008 года, когда предмет ещё назывался ИКТ. Начинал со школы, учил детей разбираться в программировании и сдавать ЕГЭ на 90 баллов и выше. За два года вывел нашу школу на второе место в районе по олимпиадам по информатике. Вёл два класса коррекции — пятый и одиннадцатый — и знаю, как объяснить основы теории вероятности даже тем, кто не хочет ничему учиться.
В 2012 защитил кандидатскую диссертацию по обучению информатике детей с недостатком внимания и стал внештатным преподавателем РГСУМ им. Макаренко. Параллельно с этим веду курсы по программированию «IDDQD» и записываю подкаст «Прогрокаст» с аудиторией 25 000 человек.
Мои научные работы
Задача про бабушку и помидоры
Хитрый электрик
Как сделать свой таймер-напоминалку
Почему Sublime Text — это круто
Поговорим о Якубовиче
Как стать контент-менеджером
Задача про сторожа и фонарик
О названиях функций
Контакты для связи
Телефон: +7 (123) 456-78-90
Почта: mikemaximov@gmail.com
Скайп: mihailmaximov
Телеграм: @mihailmaximov
Когда DNS-записи обновятся, все увидят, что находится по адресу mihailmaximov.ru, Всё, сайт готов:
Что дальше
Сейчас наш сайт — это одна страничка в сети, и есть множество способов его улучшить:
сделать подразделы;
добавить больше информации;
сделать нормальный дизайн;
повесить каких-нибудь эффектов;
поставить ссылки на соцсети, сделать кликабельным номер телефона и так далее.
Всё это мы постепенно сделаем и поделимся с вами. Не переключайтесь.
На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Как сделать плавную анимацию, если доступно всего несколько кадров
Разбираем технологию e-ink
И что можно на нём напечатать.
Во всём виноваты базы данных
Поговорили с Антоном Леоновым, выпускником ВШЭ и ментором «Практикума».
Мы отправили гуманитария на бесплатный курс в «Яндекс Практикуме». Вот что получилось
Одним из наиболее популярных направлений разработки сегодня является веб. И когда нужно разместить свой проект где-нибудь, кроме localhost, многие сталкиваются с трудностями, ведь хостинг должен быть быстрым, удобным и, желательно, бесплатным 🙂
В этом списке вы найдете 18 бесплатных сервисов, где легко сможете разместить свой проект и не заплатите ни копейки. Погнали!
Vercel
Данный сервис позволяет собирать и размещать статические веб-сайты на различных фреймворках (поддерживаются как JS-фреймворки, так и, например, генераторы статических сайтов — Hexo, Hugo, Jekyll и другие). Для каждого проекта выделяется несколько бесплатных доменных имен третьего уровня, есть возможность предпросмотра сборки.
Вот что включает в себя бесплатный тариф:
50 пользовательских доменов
100 Гб файлового пространства
100 Гб ежемесячного трафика
Неограниченное количество проектов
CLI-интерфейс
Serverless, CDN, CI/CD
Netlify
Netlify — прямой конкурент Vercel. Однако, кроме функций, которые предоставляет предыдущий сервис, тут на бесплатном тарифе присутствует:
Обработка до 100 отправленных форм в месяц
До 1000 авторизованных пользователей в месяц
Аналитика работы сайта
Heroku
Heroku позволяет запускать Full Stack приложения в контейнерах (так называемых Dynos). Поддерживается большое число языков программирования и фреймворков. Главный недостаток — после получаса бездействия проекты, размещенные на бесплатном тарифе, «засыпают», а повторный запуск контейнера требует определенного времени.
На стартовом тарифе доступны:
550 часов/месяц работы Dynos (1000 после привязки банковской карты)
512 Мб ОЗУ на 1 контейнер
CI/CD, CLI
По 1 домену на 1 контейнер
Stormkit
Stormkit позволяет размещать только проекты на JavaScript. Бесплатно доступны:
1 проект
50 Гб трафика
Неограниченное количество доменов
Неограниченное количество сборок
Hostman
Полноценный хостинг с поддержкой бэкенда и баз данных. Однако бесплатный тариф позволяет разместить до 10 веб-сайтов, и то статических:
Glitch
Glitch позиционирует себя как коллаборативный сервис для упрощенной разработки веб-сайтов. В основном здесь находятся проекты на NodeJS, но поддерживается ряд других языков. Приложения запускаются в контейнерах, как на Heroku, и тут так же доступно 1000 бесплатных часов работы приложений в месяц. Однако, если на Heroku проекты заливаются через CLI или Git, здесь присутствует браузерная IDE и терминал.
Repl.it
Подобен предыдущему сервису. Бесплатно предоставляется 0.5 Гб ОЗУ и 0.5 Гб дискового пространства.
Surge
Хостинг статических сайтов. Бесплатно доступны:
Firebase
PaaS-сервис от Google, позволяющий разработать бэкенд без написания кода, а также разместить свой статический веб-сайт. Вот что входит в стартовый тариф:
10 Гб дискового пространства
360 Мб трафика/день
Базы данных
Serverless
Тестирование
Многое другое
Render
Сервис для размещения статических веб-сайтов. Бесплатно доступны:
GitHub Pages
С помощью этого инструмента из любого репозитория GitHub можно развернуть статический веб-сайт. Поддерживается Jekyll, доступен 1 бесплатный домен 3 уровня, SSL, неограниченный трафик.
begin
Хостинг для практически любых веб-приложений на NodeJS или Deno. Бесплатно доступно 5 веб-сайтов, поддерживается Serverless.
Deta
Достаточно интересный проект, предоставляющий возможность размещения веб-приложений на Python и NodeJS. К каждому приложению подключается NoSQL база данных. Главный минус — все взаимодействие с сервисом осуществляется через CLI. Бесплатно доступны:
2 Гб дискового пространства, 2 Гб на базу данных
50 000 обращений к контейнерам в месяц
25 000 обращений к БД в месяц
Fly
Очередной сервис, позволяющий запускать приложения в виртуальных машинах. Со стартовым тарифом вы получите:
8 миллионов секунд работы VM в месяц (хватит примерно на 3 VM, запущенных постоянно)
160 Гб ежемесячного трафика
10 активных SSL-сертификатов
Fleek
Позволяет размещать статические сайты, перед этим собирая их на ряде генераторов статических сайтов (если нужного нет в списке, можно выбрать Docker-образ, в котором будет осуществляться сборка, и указать все данные для нее). Бесплатный тариф имеет следующие ограничения:
3 Гб дискового пространства
50 Гб ежемесячного трафика
250 минут на сборку в месяц
Microsoft Azure
У данного достаточно известного сервиса есть бесплатный тариф. На нем можно создать до 10 приложений на базе Azure App Service, а также получить некоторые дополнительные функции. Большинство из них будут работать лишь в первые 12 месяцев пробного периода, но часть предоставляется навсегда.
Oracle Cloud
Oracle так же, как и Microsoft, предоставляет возможность испробовать функции на бесплатной основе. Навсегда предоставляются:
2 виртуальные машины с 1/8 vCPU и 1 Гб ОЗУ
2 виртуальных диска общим объемом до 100 Гб, до 5 резервных копий
10 Тб/месяц исходящего трафика
Digital Ocean App Platform
На стартовом тарифе можно разместить до 3 статических веб-сайтов:
Заключение
На этом подборка бесплатных хостингов заканчивается. Надеюсь, вы уже нашли себе подходящий вариант и готовы разместить свое приложение.
Буду рад, если вы предложите свои варианты — достойные сервисы будут также внесены в этот список.