Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Любой проект рано или поздно достигает состояния, когда его пора выкладывать в интернет. Это может быть связано с тем, что вы закончили проект или хотите проверить его на разных устройствах. В любом случае, как говорят художники, не стоит делать проекты "в стол". Их обязательно нужно показывать.

2 Чтобы выложить ваш проект в интернет, нужно воспользоватьсяхостингом- специальным сервером, который будет хранить ваши файлы и предоставит доступ к ним через специальноедоменное имя(например, сейчас вы находитесь на сайте с доменным именемhexlet.io). Если вы хотите более подробно узнать, как и каким образом, используя доменное имя, мы попадаем на нужный сайт, то можете прочитать наш<a>гайд по DNS</a>.

3 В этом уроке мы рассмотрим бесплатный хостинг GitHub, который вы можете использовать, чтобы выложить свою верстку в интернет. Так как сейчас у нас простые страницы, созданные с помощью HTML и CSS, то нам подойдутхостинги статичных сайтов. Эти сайты не используют сложную логику, связанную с базами данных и языками программирования, которые выполняются на сервере. Поэтому нам достаточно, чтобы просто какой-то сервер хранил у себя наши файлы и открывал их по запросу.

4 По сути сервер сделает все то же самое, что делал ваш компьютер, когда вы создавали верстку на нем:

5 <ul><li>Операционная система сделает запрос к жесткому диску или оперативной памяти</li>

6 <li>Жесткий диск или оперативная память отдаст содержимое файла, к которому произошел запрос</li>

7 <li>Ваш браузер обработает данные, которые ему поступили, и выведет результат на экран</li>

8 </ul><h2>Подготовка страницы</h2>

9 Чтобы выложить страницу в интернет, ее вначале нужно создать. Чтобы сосредоточиться на процессе размещения, наша страница будет состоять из одного HTML-файла и одного CSS-файла. Выполним следующие шаги:

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

11 <li>В созданной директории создайте файлыindex.htmlиstyle.css</li>

12 <li>Подключите файл стилей к вашему HTML-файлу. Не забудьте создать базовую разметку сайта</li>

13 </ul>Создайте любую разметку, которую только хотите. Не бойтесь экспериментировать и со стилями. Дайте волю своей фантазии :) Например, это может быть небольшой рассказ о вас. Я создал именно такое описание, и выглядит оно следующим образом:

14 index.html

15 внутри тега body

16 style.css

17 <h2>GitHub Pages</h2>

18 В рамках каждой профессии наХекслетестудент обязательно познакомится сgitи с его главным воплощением -GitHub. Возможно, вы уже слышали о таком хранилище кода. Это невероятно полезная и удобная система, без которой трудно представить современную разработку. Сейчас нас интересует то, чтоGitHubпозволяет бесплатно выложить у себя статичный сайт. Это происходит с помощью сервиса<a>GitHub Pages</a>.

19 Конечно, для полноценной работы нужно знать основыGit, но и без них мы сможем выложить простую страницу, которую создали в этом уроке.

20 Настало время выложить вашу страницу:

21 <ul><li>Зарегистрируйтесь на<a>GitHub</a>, если еще не делали этого.</li>

22 <li><a>Создайте новый репозиторий</a>. Репозиторий - это место, где хранится код вашего проекта. В качестве имени репозитория используйтеusername.github.io, гдеusername- ваш ник наGitHub.</li>

23 </ul><ul><li>Загрузите созданные вами файлыindex.htmlиstyle.cssнаGitHub. Это можно сделать, если добавить вURLстраницы с вашим репозиторием/upload/. Получится ссылка вида<a>https://github.com/username/username.github.io/upload/</a>, гдеusername- ваш ник наGitHub. После того, как вы выбрали файлы, нажмите кнопкуCommit changes.</li>

24 </ul><ul><li>Перейдите в настройки репозитория. Это вкладкаSettings. В левом меню перейдите во вкладкуPages. Если вы все сделали по инструкции, то GitHub автоматически включит сайт по указанной ссылке. Если имя репозитория другое, то необходимо выбрать веткуmainв разделеSource</li>

25 </ul>Все, теперь вы можете посмотреть на свою страницу, перейдя по ссылке, которую предоставил вамGitHub.