Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <h3>Хостинг</h3>

2 Мы уже изучили вкратце такие темы, как хостинг и HTTP-запросы в уроке<a>Хостинг</a>курса "<a>Введение в веб-разработку</a>". Стоит освежить память, перечитав тот урок, если следующие термины вам не сразу понятны:

3 <ul><li>хостинг</li>

4 <li>сервер</li>

5 <li>IP-адрес</li>

6 <li>хост</li>

7 <li>DNS</li>

8 <li>HTTP</li>

9 <li>whois</li>

10 </ul>Сегодня мы хотим разместить нашу простую HTML-страницу в интернете таким образом, чтобы она стала доступна всем.

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

12 Но у нас простой случай: есть один HTML-файл и один CSS-файл, нет никакой бизнес-логики или взаимодействий. Достаточно чтобы какая-то машина, подключённая к интернету, отдавала содержимое этих файлов в браузер пользователя по запросу.

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

14 <ol><li>Операционная система делает запрос в жёсткий диск или оперативную память.</li>

15 <li>Жёсткий диск или оперативная память отдают содержимое файла.</li>

16 <li>Операционная система направляет содержимое файла в программу "браузер".</li>

17 <li>Браузер обрабатывает файлы (потому что знает как это делать, ведь файлы написаны по стандартам HTML и CSS) и формирует внешний вид.</li>

18 </ol>Всё, что мы хотим сделать, это перенести файлы с локального компьютера на удалённый, и сделать так, чтобы к нему можно было обращаться по протоколу HTTP через интернет. В итоге получится так:

19 <h3>GitHub</h3>

20 Если вы проходите наши курсы по порядку, в рамках программ обучения (например, "Бэкенд JS-программист" или "Фронтенд JS-программист"), то в скором будущем вас ожидает<a>курс по Git</a>. Один из<a>уроков</a>там будет посвящён GitHub.

21 GitHub - это хранилище кода. Кроме этого GitHub предоставляет бесплатный хостинг для статических файлов - как раз то, что нам нужно. Этот сервис называется<a>GitHub Pages</a>.

22 Страницы, размещённые на GitHub Pages, могут быть доступны на их поддомене (например,<a>https://guides.hexlet.io/ru/</a>) или на домене второго уровня (например, мой блог<a>https://rakh.im/</a>), если у вас есть свой домен.

23 Для полноценной работы с GitHub необходимо хотя бы базовое понимание Git. Но если вы совсем не знакомы с этой темой - ничего страшного! Прямо сейчас, чтобы разместить страницу на GitHub Pages, нам достаточно следовать простому алгоритму.

24 Начнём:

25 <ol><li>Зарегистрируйтесь на<a>https://github.com/</a>, если ещё не сделали этого.</li>

26 <li><a>Создайте новый репозиторий</a>с именем username.github.io, где username - ваш ник на GitHub.</li>

27 <li>Создайте новый файл. Когда репозиторий не пуст, то в верхнем правом углу есть кнопка "Create New File", но сейчас, когда ещё нет ни одного файла, создать первый можно по прямой ссылке https://github.com/username/username.github.io/new/master, где username - ваш ник.</li>

28 <li>Введите имя index.html и скопируйте туда содержание файла index.html, который у вас получился в предыдущем уроке.</li>

29 <li>Нажмите кнопку "Commit new file".</li>

30 <li>Повторите то же самое для файла style.css.</li>

31 <li>Подтвердите публикацию на GitHub Pages. В настройках репозитория: Settings -> Раздел Options -> Секция GitHub Pages.</li>

32 <li>Через несколько мгновений страница станет доступна по вашему адресу https://username.github.io</li>

33 </ol>(Если вы умеете работать с Git и собираетесь делать всё локально, то при создании репозитория советую выбрать "Initialize this repository with a README" - в таком случае репозиторий сразу создастся непустым, и его можно будет клонировать. В противном случае нужно будет инициализировать репозиторий локально и добавить удалённый репозиторий).