Любой проект рано или поздно достигает состояния, когда его пора выкладывать в интернет. Это может быть связано с тем, что вы закончили проект или хотите проверить его на разных устройствах. В любом случае, как говорят художники, не стоит делать проекты «в стол». Их обязательно нужно показывать.
Чтобы выложить ваш проект в интернет, нужно воспользоваться хостингом — специальным сервером, который будет хранить ваши файлы и предоставит доступ к ним через специальное доменное имя (например, сейчас вы находитесь на сайте с доменным именем hexlet.io). Если вы хотите более подробно узнать, как и каким образом, используя доменное имя, мы попадаем на нужный сайт, то можете прочитать наш гайд по DNS.
В этом уроке мы рассмотрим бесплатный хостинг GitHub, который вы можете использовать, чтобы выложить свою верстку в интернет. Так как сейчас у нас простые страницы, созданные с помощью HTML и CSS, то нам подойдут хостинги статичных сайтов. Эти сайты не используют сложную логику, связанную с базами данных и языками программирования, которые выполняются на сервере. Поэтому нам достаточно, чтобы просто какой-то сервер хранил у себя наши файлы и открывал их по запросу.
По сути сервер сделает все то же самое, что делал ваш компьютер, когда вы создавали верстку на нем:
Чтобы выложить страницу в интернет, ее вначале нужно создать. Чтобы сосредоточиться на процессе размещения, наша страница будет состоять из одного HTML-файла и одного CSS-файла. Выполним следующие шаги:
Создайте любую разметку, которую только хотите. Не бойтесь экспериментировать и со стилями. Дайте волю своей фантазии :) Например, это может быть небольшой рассказ о вас. Я создал именно такое описание, и выглядит оно следующим образом:
index.html
внутри тега body
<main>
<h1>Никита Михайлов</h1>
<h2>Создатель профессии «Верстальщик» на Hexlet</h2>
<hr>
<section>
<h2>Ключевые навыки:</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
<section>
<h2>О преподавателе</h2>
<p>
Много лет работал в аутсорсинговой компании. Развивал клиентские проекты,
делал фичи для разных CMS. В основном верстал, готов передать весь опыт
вам. Поработав с сотнями проектов, научился выкручиваться даже из самых
безнадежных ситуаций. Поможет освоить верстку, чтобы она перестала
казаться чем-то страшным.
</p>
</section>
</main>
style.css
body {
font-family: sans-serif;
line-height: 1.5;
background-color: #f9f9f9;
color: #333333;
width: 980px;
margin: 0 auto;
}
h1 {
text-align: center;
font-size: 36px;
margin-bottom: 0;
}
main > h2 {
text-align: center;
font-size: 25px;
}
В рамках каждой профессии на Хекслете студент обязательно познакомится с git и с его главным воплощением — GitHub. Возможно, вы уже слышали о таком хранилище кода. Это невероятно полезная и удобная система, без которой трудно представить современную разработку. Сейчас нас интересует то, что GitHub позволяет бесплатно выложить у себя статичный сайт. Это происходит с помощью сервиса GitHub Pages.
Конечно, для полноценной работы нужно знать основы Git, но и без них мы сможем выложить простую страницу, которую создали в этом уроке.
Настало время выложить вашу страницу:
Все, теперь вы можете посмотреть на свою страницу, перейдя по ссылке, которую предоставил вам GitHub.
Вам ответят команда поддержки Хекслета или другие студенты.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
Наши выпускники работают в компаниях:
Зарегистрируйтесь или войдите в свой аккаунт