Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Публикация в интернете Основы современной вёрстки

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

Чтобы выложить ваш проект в интернет, нужно воспользоваться хостингом — специальным сервером, который будет хранить ваши файлы и предоставит доступ к ним через специальное доменное имя (например, сейчас вы находитесь на сайте с доменным именем 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/upload/, где username — ваш ник на GitHub. После того, как вы выбрали файлы нажмите кнопку Commit changes.

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

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

Настройки GitHub Pages

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


Аватары экспертов Хекслета

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

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

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

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

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

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

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

Открыть доступ

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

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

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

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
27 октября 8 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
27 октября 8 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
27 октября 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
27 октября 8 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

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

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

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