HTML и CSS

Создание сайта на Github — это просто!

Если Вам нужен сайт, состоящий из ряда статических страниц, то Github — лучшее решение. К статическим сайтам можно отнести сайт-портфолио, сайт-визитка, каталог продукции и любые другие, содержащие в себе текст, теги, изображения и иные компоненты мультимедиа (видео, аудио).

Преимущества создания сайта на Github

При работе с хостингом от Github, можно сразу отметить несколько существенных преимуществ:

  • Вам не потребуется покупать и ежегодно оплачивать домен;
  • Вам не потребуется вносить ежемесячный платеж на оплату хостинга;
  • Вы сможете сразу продемонстрировать свою работу клиентам;
  • Многие веб-разработчики и заказчики, которые не по наслышке знают о github, с уважением отнесутся к вам, увидев в конце популярное «github.io».

 

Этап первый: регистрируем аккаунт

Попробуем создать сайт вместе. Переходим на сайт Github и в форме, состоящей из трех полей вводим будущий username, email и пароль.

Step1 - Sign in

Далее мы увидим страницу приветствия. Все необходимое уже будет стоять, достаточно просто нажать кнопку Continue для продолжения регистрации.

Step1 - Choose plan

На следующей странице располагается небольшой опрос, но этот шаг можно пропустить, кликнув на skip this step

Step1 - Tailor your experience

Не забудьте заглянуть на почту, там Вас будет ждать письмо с просьбой верифицировать аккаунт.

Этап второй: создаем репозиторий

После регистрации вы попадете на стартовую страницу. Чтобы начать проект, необходимо кликнуть на Start a project.

Step2 - Start

И Вас сразу перекинет на страницу по созданию репозитория. Настройки просты: достаточно ввести имя репозитория (имя будущего домена), в нашем случае это tpvesrtak.github.io, установаем галочку около «Initialize this repository with a README» и жмём Create repository. Description заполнять не обязательно.

Step2 - Create a new repository

Все, репозиторий создан.

Step2 - Repository

Этап третий: наполняем сайт

Создание одного лишь репозитория недостаточно. Важно наполнить его файлами, иначе при переходе по ссылке, вида username.github.io мы увидим следующее:

Step3 - Browser

Это именно то, что сгенерировалось в файл README и теперь отображается на сайте. Что нужно сделать, чтобы сайт выглядел так, как мы хотим? Во-первых, на вашем компьютере, должны быть подготовлены файлы для загрузки. Иначе говоря — нужен готовый, сверстанный сайт.

Если сайт готов, то необходимо на странице репозитория нажать на кнопку Upload files.

Step3 - Upload Files

Далее вы попадете на страницу, куда достаточно перенести файлы для загрузки. Но помните, сюда можно скидывать что-угодно, только не папки. Как создавать папки — будет описано ниже.

Step3 - Commit

В блок Commit changes писать, что-либо не обязательно. Гитхаб понимает, что вы пытаетесь сделать и уже за вас описывает действие. Это много увидеть на скриншоте. Жмем Commit changes.

Step3 - Repository

Итак, мы загрузили 2 файла. Теперь необходимо создать 2 папки: css и font. Рассмотрим на примере создание папки для css. Для этого необходимо нажать на кнопку Create new file.

Step3 - Create new file

И мы попадаем на страницу создания файла. Чтобы сделать папку для нового файла, мы должны написать в верхнем поле следующее: css/

Помните, слеш обязателен!

После css/ можно написать слово empty. Выглядеть все это будет так:

Step3 - Way

Все, больше ничего писать не нужно, просто жмем зеленую кнопку внизу Commit new file. После этого мы сразу же попадаем в папку css, куда необходимо загрузить все файлы css. Как это сделать — мы уже знаем. Файл empty можно удалить.

Step3 - Branch

Аналогичную операцию повторим и с папкой font и ее файлами.

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

Step3 - Hosting

Этап четвертый: любуемся сайтом

Самая ожидаемая часть. Смотрим на результат по ссылке: https://tpverstak.github.io 

Надеюсь, статья будет полезна многим, т.к. создавать сайты на Github просто, а самое главное — бесплатно!

Предыдущий пост

Преимущества макетов AI для верстальщиков

Следующий пост

Какими качествами должен обладать верстальщик?

Комментарии

  • Shamil

    Можно вопрос? Можно ли привязать туда свой домен? Если да, то расскажите пожалуйста, как ?

    Reply to Shamil
  • Ksyusha

    Добрый вечер!
    Обязательно под каждый сайт создавать новый аккаунт? Слышала о таком. Пробовала по вашей инструкции, переходя по ссылке выходит ошибка 404 и «There isn’t a GitHub Pages site here. If you’re trying to publish one, read the full documentation to learn how to set up GitHub Pages for your repository, organization, or user account.»

    Думала может дело в том, что у меня аккаунт не новый..

    Reply to Ksyusha
    • ponokir

      Здравствуйте, столкнулся с такой же проблемой. Вы нашли решение?

      Reply to ponokir
  • Irina

    Все очень подробно.

    Reply to Irina
  • Amigos

    спасибо за статью, все очень просто оказывается. раньше я боялся всех этих гитов..

    Reply to Amigos
    • tpverstak

      Рады, что Вам понравилось 🙂

      Reply to tpverstak

Добавить комментарий для Ksyusha Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *