Статический сайт для проекта на GitHub

Это пошаговая инструкция для всех. Тут мы заведем новый аккаунт и создадим “hello word” страницу в интернете. Все скриншоты сделаны от лица mac OS пользователя эта инструкция от 10.03.2018

Заходим на GitHub

В браузере (IE, Chrome, Safari) вводим https://github.com/ и видим нечто подобное

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

Заполняем поля сверху вниз

  1. Уникальное имя пользователя

  2. Адрес электронной почты

  3. Пароль

Тут может быть несколько рекомендаций. По поводу генерации имени и пароля. Если стоит цель завести личный аккаунт то нет проблем вводите личные данные и свой любимый пароль. Но в моем случае я попробую использовать сгенерированные данные с помощью сервисов генераторов паролей и еmail

После ввода всех данных мы получим нечто такое:

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

где

  1. Ваш статус. Он сообщает что регистрация еще не завершена

  2. Выбор типа аккаунта платный или бесплатный. Главное отличие которых в том что на бесплатном аккаунте можно иметь только публичные репозитории

Ниже также предлагается создать “организацию” и подписаться на новости. Организации это отдельная тема, которая не будет здесь рассмотрена так что пока пропускаем этот момент. Идем дальше, нажимая на зеленую кнопку.

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

Далее нам предлагают заполнить анкетку

Это не обязательный шаг, его можно пропустить нажав на текст “skip this step”. А если кому то интересно то в анкете интересуются:

  1. Вашим опытом в программировании тут есть варианты: новичок, бывалый и специалист

  2. Что вы планируете делать на GitHub и варианты: Разработка, школьные проекты, управление продуктом, дизайн, исследования, что то другое нужно будет написать что.

  3. Как вы можете описать себя и варианты: Студент, просто любитель хобби, профессионал и другое описать словами

  4. Что вам было бы интересно. Ответ предлагают дать в открытой форме

И вот наконец последний экран который сообщает нам о том что регистрация окончена:

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

Активация Email

Еще важно упомянуть, что на указанный вами email придет письмо примерно такого содержания

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

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

Создаем свой первый проект

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

Примерно вот так будет выглядеть страница если пропустить шаг с активацией email

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

Так что рекомендую перейти прямо по ссылке из письма. А так если все прошло успешно

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

Вводим тут название репозитория. Ниже пишем описание если хочется. Выбираем тип репозитория публичный или приватный. Еще ниже нас спрашивают нужно ли сразу вставить README файл. В котором обычно пишут описание проекта. Это считается хорошим тоном когда есть хоть какое то описание. Затем предлагается сразу вставить .gitignore файл на первом этапе он не нужен. Но в дальнейшей работе он будет очень полезен. Так же предлагается указать тип лицензии на каких условиях вы предоставляете код общественности.

Очередной раз жмем на зеленую кнопку:

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

Оказываемся в пустом репозитории

Заполняем репозиторий данными

Для того чтобы заполнить репо данными их нужно создать для этого воспользуемся возможностью создания README файла прямо из интерфейса GitHub

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

Напишем туда что то очень простое

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

Далее заполним форму для “коммита

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

Теперь у нас есть не пустой репозиторий

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

Создаем свою страницу в интернете

Теперь создадим еще один файл именно он будет отображаться в браузере

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

Важно что бы он назывался index.html и лежал в корне репозитория

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

Про стандарт HTML можно говорить достаточно долго, но сейчас мы не рассматриваем этот вопрос. Суть в том что мы просто пытаемся отобразить заметный текст на странице. Далее заполняем описание комита

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

Из нового видно что тут появилась новая настройка. Это ветки очень полезный и мощный инструмент которого мы тоже не коснемся в этот раз. Тут оставляем все как есть и комитим новый файл. Обращаем внимание на последний коммит. Затем идем в настройки

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

Там глубоко матаем вниз

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

До тех пор пока не встретим заголовок GitHub Pages

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

Там выбираем ветку master и включаем эту опцию

Статический сайт для проекта на GitHub
Статический сайт для проекта на GitHub

Это включит бесплатный web сервер который будет доступен по ссылке вида

<ваш логин>.github.io/<название репозитория>

На примере из скриншотов получаем https://c649160.github.io/staticpage/

На этом все удачи всем в освоении новых знаний и горизонтов

Далее пытаемся разобраться что же там за HTML такой