Как выложить сайт на гитхаб

Размещение на GitHub Pages — Основы HTML, CSS и веб-дизайна

Мы уже изучили вкратце такие темы, как хостинг и HTTP-запросы в уроке Хостинг курса «Введение в веб-разработку». Стоит освежить память, перечитав тот урок, если следующие термины вам не сразу понятны:

Сегодня мы хотим разместить нашу простую HTML-страницу в интернете таким образом, чтобы она стала доступна всем.

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

Но у нас простой случай: есть один HTML-файл и один CSS-файл, нет никакой бизнес-логики или взаимодействий. Достаточно чтобы какая-то машина, подключённая к интернету, отдавала содержимое этих файлов в браузер пользователя по запросу.

По сути это та же операция, что происходит у вас на компьютере, когда вы просто открываете свой локальный HTML-файл в браузере:

1. Операционная система делает запрос в жёсткий диск или оперативную память.
2. Жёсткий диск или оперативная память отдают содержимое файла.
3. Операционная система направляет содержимое файла в программу «браузер».
4. Браузер обрабатывает файлы (потому что знает как это делать, ведь файлы написаны по стандартам HTML и CSS) и формирует внешний вид.

Всё, что мы хотим сделать, это перенести файлы с локального компьютера на удалённый, и сделать так, чтобы к нему можно было обращаться по протоколу HTTP через интернет. В итоге получится так:

GitHub

Если вы проходите наши курсы по порядку, в рамках программ обучения (например, «Бэкенд JS-программист» или «Фронтенд JS-программист»), то в скором будущем вас ожидает курс по Git. Один из уроков там будет посвящён GitHub.

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

Страницы, размещённые на GitHub Pages, могут быть доступны на их поддомене (например, https://guides.hexlet.io/ru/) или на домене второго уровня (например, мой блог https://rakh.im/ ), если у вас есть свой домен.

Для полноценной работы с GitHub необходимо хотя бы базовое понимание Git. Но если вы совсем не знакомы с этой темой — ничего страшного! Прямо сейчас, чтобы разместить страницу на GitHub Pages, нам достаточно следовать простому алгоритму.

1. Зарегистрируйтесь на https://github.com/ , если ещё не сделали этого.
2. Создайте новый репозиторий с именем username.github.io , где username — ваш ник на GitHub.
3. Создайте новый файл. Когда репозиторий не пуст, то в верхнем правом углу есть кнопка «Create New File», но сейчас, когда ещё нет ни одного файла, создать первый можно по прямой ссылке https://github.com/username/username.github.io/new/master , где username — ваш ник.
4. Введите имя index.html и скопируйте туда содержание файла index.html, который у вас получился в предыдущем уроке.
5. Нажмите кнопку «Commit new file».
6. Повторите то же самое для файла style.css.
7. Подтвердите публикацию на GitHub Pages. В настройках репозитория: Settings -> Раздел Options -> Секция GitHub Pages.
8. Через несколько мгновений страница станет доступна по вашему адресу https://username.github.io

(Если вы умеете работать с Git и собираетесь делать всё локально, то при создании репозитория советую выбрать «Initialize this repository with a README» — в таком случае репозиторий сразу создастся непустым, и его можно будет клонировать. В противном случае нужно будет инициализировать репозиторий локально и добавить удалённый репозиторий).

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

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

Инструкция по размещению сайта на GitHub Pages

Инструментарий

Автор Алексей На чтение 4 мин Просмотров 7.2к. Опубликовано 04.12.2021 Обновлено 04.12.2021

Если вы занимаетесь версткой, по сервис GitHub Pages точно для вас, на нем можно бесплатно размещать статические веб-сайты (html/css/js/изображения). Либо вы сверстали себе визитку или портфолио и не хотите заморачиваться с хостингами, то гитхаб тоже для вас тоже может подойти, при определенных условиях, см. ниже на ограничения.

Особенности и ограничения

Сервис Github Pages предоставляет следующие возможности для статических сайтов:

• Использование HTML, CSS, языка разметки Markdown;
• Встраивание изображений и другого медиа;
• Использование JavaScript.

• Нельзя использовать на сайте PHP либо другие серверные языки — от сюда вытекает: если нужны формы например, обратной связи, то их придется создать в каких-нибудь конструкторах типа FormDesigner и затем уже встроить;
• Серверный код и серверные скрипты выполняться не будут;
• Cookies не используются.

Как опубликовать сайт на GitHub Pages по шагам

Шаг 1. Заводим аккаунт или авторизуемся на GitHub

Идем на GitHub. Если есть аккаунт, то авторизуемся в нем нажав на «Sing in». Если аккаунта нет, заводим его нажав на «Sing up».

На открывшейся странице пишем рабочий email и жмем на Continue.

Появиться окно для ввода пароля, вводите его и снова Continue, появиться поле для ввода логина, затем он спрашивает вас: «Хотите получать обновления продуктов и объявления по электронной почте?» Если хотите указываете «y», не хотите «n». После чего останется пройти капчу и нажать на кнопку «Create account».

На указанные email придет код который нужно ввести на открывшейся страницу. На следующей странице нужно указать количество человек компании (если она есть) и кто вы студент или преподаватель.

Затем выбрать продукты которыми хотите пользоваться (выбирайте все — могут потом пригодиться).

И выбираем бесплатный тарифный план.

Все аккаунт создан, теперь нужно создать репозиторий для нашего проекта с вёрсткой.

Шаг 2. Создание репозитория

Чтобы создать репозиторий нажмите на кнопку «Create repository или New repository»

При создании введите название репозитория (например, nzsd), его описание (не обязательно), выберите тип репозитория Public, поставьте галку на против пункта Add a README file и нажмите на кнопку Create repository:

Шаг 3. Загрузка файлов в созданный репозиторий

Загрузите все файлы вашего проекта, нажав на «Add fille» и выберете «Upload files»

на открывшейся странице, прям берем и перетаскиваем все файлы мышкой.

Перетащатся только файлы которые в корне, в моем случае это файл index.html. Директории для изображений, стилей, скриптов, нужно создавать отдельно и затем уже в них загружать файлы. Для этого щелкните по «Add file» и выбираете «Create new file».

Введите название директории и после названия ставим закрывающийся слэщ «/», после чего она превращается в директорию и чтобы ее создать, нужно добавить в нее какой-нибудь файл, пишем к примеру empty и нажмите «Commit new file».

Таким же образом сражу создаем все необходимые директории. Дальше открываем каждую из них и загружаем в них файлы.

Шаг 4. Публикация сайта в интернете

Перейдите в настройки (Settings) созданного репозитория:

В настройках репозитория найдите вкладку Pages, на ней установите в качестве источника файлов вашей страницы ветку main и директорию root (от корня проекта) созданного репозитория и сохраните.

Теперь ваш сайт опубликован и доступен по адресу вида your-account-name.github.io/repo-name.

Для проверки работы сайта просто перейдите по адресу https://your-account-name.github.io/repo-name – и вы увидите свою страницу, загруженную на Github Pages:

Хотите свой домен?

Гитхаб позволяет использовать ваше доменное имя вместо стандартного username.github.io.

Для этого вам нужно купить домен, далее зайти к регистратору доменов в личный кабинет (в моем случае beget). И изменить информацию о DNS-записях домена.

Нам нужно настроить A-запись домена, для этого переходим в панель управления DNS-записями вашего регистратора, и добавим следующие A-записи:

• 185.199.108.153
• 185.199.109.153
• 185.199.110.153
• 185.199.111.153

Добавлять записи для домена желательно и для с www, и для без www.

После этого нужно подождать хотя бы пару часов и можно идти на гитхаб в настройку репозитория, во вкладке Pages (см. шаг 4) в поле Custom domain ввести название домена (с www или без www — в зависимости где меняли A записи) и нажать кнопку Save.

Всё готово! В течение нескольких часов сайт начнет открываться с нового домена.

Все способы подключения собственного домена подробно описаны в памятке GitHub.

Инструкция по размещению сайта на GitHub Pages

Для размещения статического веб-сайта можно воспользоваться сервисом GitHub Pages. Статический сайт состоит из HTML-страниц с неизменным содержимым. Такие сайты могут использоваться как визитки, портфолио, презентационные страницы.

Особенности и ограничения

Сервис Github Pages предоставляет следующие возможности для статических сайтов:

• Использование HTML, CSS, языка разметки Markdown;
• Встраивание изображений и другого медиа;
• Использование JavaScript.

• Нельзя использовать на сайте PHP либо другие серверные языки;
• Серверный код и серверные скрипты выполняться не будут;
• Cookies не используются.

Как опубликовать сайт на GitHub Pages

1. Создайте аккаунт на GitHub. Предположим, your-account-name — название вашего аккаунта.
2. Cоздайте новый репозиторий для вашего проекта. При создании введите название репозитория (например, repo-name), выберите тип репозитория Public и нажмите на кнопку Create repository:
3. Перейдите в настройки (Settings) созданного репозитория:
4. В настройках репозитория найдите вкладку Options:
5. Пролистайте вниз и найдите раздел Github Pages. Установите в качестве источника файлов вашей страницы ветку master созданного репозитория:
6. Как только вы сохраните изменения, появится сообщение о том, что сайт готов к публикации по адресу вида your-account-name.github.io/repo-name:
7. Далее загрузите все файлы вашего проекта в ветку master созданного репозитория repo-name. При этом файл index.html должен находиться в корневой директории проекта:
8. Для проверки работы сайта просто перейдите по адресу https://your-account-name.github.io/repo-name – и вы увидите свою страницу, загруженную на Github Pages:

Как выложить верстку на github pages. Подробно и с картинками

1. Зарегестрируйтесь на сайте github.com
2. Создайте новй репозиторий. В правом верхнем углу (значок плюсик). Там выберите New repository.
3. Далее у вас появится примерно такая страница там заполняйте поля имени и описания репозитория. Обязательно поставьте галочку “Initialize this repository with a README”. После нажмите создать кнопку “Create” и вас будет создан репозиторий и автоматически откроется его страница. Она будет выглядеть примерно так
4. Затем нажмите кнопку “upload files”.
   
   У вас откроется интерфейс загрузки файлов. Загрузите все ваши файлы (картинки, стили, хтмл), которые необходимы, чтобы показать вашу верстку.
   Обратите внимание на картинки, и обязательно загружайте создавай новую ветку(branch) с названием gh-pages. Подветвердите загрузку.
5. У вас откроется окно пулл реквеста (запроса изменений в репозитории). Нажмите create pull request
6. После этого откроется страница с предложением влить изменения в мастер ветку вашего репозитория. Можете согласиться.
7. проверьте если у вас там файл index.html Именно так должен называться файл, чтобы можно было посмотреть его онлайн. Например, у меня сейчас файл называется demo-5.html. В таком случае я нажимаю на этот файл, меня перекидает на его просмотр, там в правом углу нажимаю на карандашик
   и перехожу в режим редактирования. Переименовываю файл в index.html и подтвеждаю изменения
8. Теперь можно зайти в настройки (settings) репозитория и посмотреть адрес вашей страницы, чтобы увидеть вашу верстку онлайн
   Обычно она сначала показывает 404 ошибку, но в течении минут 5, она должна начать работать.