Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Публикация в интернете

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

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

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

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

  • Операционная система сделает запрос к жёсткому диску или оперативной памяти.
  • Жёсткий диск или оперативная память отдаст содержимое файла, к которому произошёл запрос.
  • Ваш браузер обработает данные, которые ему поступили, и выведет результат на экран.

Работа хостинга

Подготовка страницы

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

  • Создайте директорию на вашем компьютере. Это первый пункт при создании любого сайта. Всегда храните ваши работы в разных директориях, чтобы потом их можно было легко найти или перенести.
  • В созданной директории создайте файлы index.html и style.css.
  • Подключите файл стилей к вашему HTML-файлу. Не забудьте создать базовую разметку сайта.

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

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;
}

GitHub Pages

В рамках каждой профессии на Хекслете студент обязательно познакомится с git и с его главным воплощением — GitHub. Возможно вы уже слышали о таком хранилище кода. Это невероятно полезная и удобная система, без которой трудно представить современную разработку. Курс по Git вас ожидает чуть дальше, а сейчас нас интересует то, что GitHub позволяет бесплатно выложить у себя статичный сайт. Это происходит с помощью сервиса GitHub Pages.

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

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

  • Зарегистрируйтесь на GitHub, если ещё не делали этого.
  • Создайте новый репозиторий. Репозиторий — это место, где хранится код вашего проекта. В качестве имени репозитория используйте username.github.io, где username — ваш ник на GitHub.

Создание репозитория на GitHub

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

Загрузка файлов в репозиторий

  • Перейдите в настройки репозитория. Это вкладка Settings. Во вкладке Options дойдите до вкладки GitHub Pages. GitHub уже автоматически создал вам сайт и в этой секции вы увидите ссылку на него.

Настройки GitHub Pages

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


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».