Михаил Максимов — преподаватель информатики

Объясни мне: как опубликовать свой сайт в интернете

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

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

  • сделали страницу «О себе» на чистом HTML, которая станет основой для сайта;
  • купили для неё домен mihailmaximov.ru;
  • приобрели хостинг, чтобы хранить там все нужные файлы.

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

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

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

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

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

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

Читайте также:  Upload files with python

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

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

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

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

Мы научили хостинг принимать запросы по адресу 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 лежит стандартный приветственный текст от хостинга, и он нам не нужен. Удалим его. Отмечаем этот файл галочкой и нажимаем вверху «Удалить».

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

  1. Открываем наш файл с сайтом. Для вашего удобства исходный код приведён ниже в расхлопе.
  2. Сохраняем этот файл под именем index.html — это будет главный файл нашего сайта.
  3. В панели управления хостингом находим кнопку «Загрузить файл», выбираем наш index.html и подтверждаем.
            img < max-width: 100%; max-height: 100%; >h1 < font-size: 50px; margin-top: 30px; margin-bottom: 20px; >h2 < margin-top: 40px; margin-bottom: 20px; >p 
Михаил Максимов

Я преподаю информатику с 2008 года, когда предмет ещё назывался ИКТ. Начинал со школы, учил детей разбираться в программировании и сдавать ЕГЭ на 90 баллов и выше. За два года вывел нашу школу на второе место в районе по олимпиадам по информатике. Вёл два класса коррекции — пятый и одиннадцатый — и знаю, как объяснить основы теории вероятности даже тем, кто не хочет ничему учиться.

В 2012 защитил кандидатскую диссертацию по обучению информатике детей с недостатком внимания и стал внештатным преподавателем РГСУМ им. Макаренко. Параллельно с этим веду курсы по программированию «IDDQD» и записываю подкаст «Прогрокаст» с аудиторией 25 000 человек.

Мои научные работы

Задача про бабушку и помидоры

Хитрый электрик

Как сделать свой таймер-напоминалку

Почему Sublime Text — это круто

Поговорим о Якубовиче

Как стать контент-менеджером

Задача про сторожа и фонарик

О названиях функций

Контакты для связи
Телефон: +7 (123) 456-78-90

Почта: mikemaximov@gmail.com

Скайп: mihailmaximov

Телеграм: @mihailmaximov

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

Что дальше

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

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

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

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

Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию

Новые чудеса оптимизации: как делали игру «Принц Персии»

Как сделать плавную анимацию, если доступно всего несколько кадров

Как устроены электронные чернила

Разбираем технологию e-ink

Как работает 3D-принтер

И что можно на нём напечатать.

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

Во всём виноваты базы данных

Карьера аналитика данных в 26 лет: Касперский, X5 и «Много лосося»

Поговорили с Антоном Леоновым, выпускником ВШЭ и ментором «Практикума».

Гуманитарий пробует анализ данных на Python. Каково это?

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

Источник

Бесплатные хостинги для веб-разработчиков

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

В этом списке вы найдете 18 бесплатных сервисов, где легко сможете разместить свой проект и не заплатите ни копейки. Погнали!

Vercel

Данный сервис позволяет собирать и размещать статические веб-сайты на различных фреймворках (поддерживаются как JS-фреймворки, так и, например, генераторы статических сайтов — Hexo, Hugo, Jekyll и другие). Для каждого проекта выделяется несколько бесплатных доменных имен третьего уровня, есть возможность предпросмотра сборки.

Вот что включает в себя бесплатный тариф:

Netlify

Netlify — прямой конкурент Vercel. Однако, кроме функций, которые предоставляет предыдущий сервис, тут на бесплатном тарифе присутствует:

Heroku

Heroku позволяет запускать Full Stack приложения в контейнерах (так называемых Dynos). Поддерживается большое число языков программирования и фреймворков. Главный недостаток — после получаса бездействия проекты, размещенные на бесплатном тарифе, «засыпают», а повторный запуск контейнера требует определенного времени.

На стартовом тарифе доступны:

Stormkit

Stormkit позволяет размещать только проекты на JavaScript. Бесплатно доступны:

Hostman

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

Glitch

Glitch позиционирует себя как коллаборативный сервис для упрощенной разработки веб-сайтов. В основном здесь находятся проекты на NodeJS, но поддерживается ряд других языков. Приложения запускаются в контейнерах, как на Heroku, и тут так же доступно 1000 бесплатных часов работы приложений в месяц. Однако, если на Heroku проекты заливаются через CLI или Git, здесь присутствует браузерная IDE и терминал.

Repl.it

Подобен предыдущему сервису. Бесплатно предоставляется 0.5 Гб ОЗУ и 0.5 Гб дискового пространства.

Surge

Хостинг статических сайтов. Бесплатно доступны:

Firebase

PaaS-сервис от Google, позволяющий разработать бэкенд без написания кода, а также разместить свой статический веб-сайт. Вот что входит в стартовый тариф:

Render

Сервис для размещения статических веб-сайтов. Бесплатно доступны:

GitHub Pages

С помощью этого инструмента из любого репозитория GitHub можно развернуть статический веб-сайт. Поддерживается Jekyll, доступен 1 бесплатный домен 3 уровня, SSL, неограниченный трафик.

begin

Хостинг для практически любых веб-приложений на NodeJS или Deno. Бесплатно доступно 5 веб-сайтов, поддерживается Serverless.

Deta

Достаточно интересный проект, предоставляющий возможность размещения веб-приложений на Python и NodeJS. К каждому приложению подключается NoSQL база данных. Главный минус — все взаимодействие с сервисом осуществляется через CLI. Бесплатно доступны:

Fly

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

Fleek

Позволяет размещать статические сайты, перед этим собирая их на ряде генераторов статических сайтов (если нужного нет в списке, можно выбрать Docker-образ, в котором будет осуществляться сборка, и указать все данные для нее). Бесплатный тариф имеет следующие ограничения:

Microsoft Azure

У данного достаточно известного сервиса есть бесплатный тариф. На нем можно создать до 10 приложений на базе Azure App Service, а также получить некоторые дополнительные функции. Большинство из них будут работать лишь в первые 12 месяцев пробного периода, но часть предоставляется навсегда.

Oracle Cloud

Oracle так же, как и Microsoft, предоставляет возможность испробовать функции на бесплатной основе. Навсегда предоставляются:

Digital Ocean App Platform

На стартовом тарифе можно разместить до 3 статических веб-сайтов:

Заключение

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

Буду рад, если вы предложите свои варианты — достойные сервисы будут также внесены в этот список.

Источник

Оцените статью