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

Инструкция по размещению сайта на 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:

Как выложить сайт в интернет за 3 минуты

Если у вас есть сайт и он является статическим, то вам необязательно использовать платный хостинг, вы можете воспользоваться сервисом GitHub Pages. Для этого у вас должен быть аккаунт на Github.

Шаг 1. Регистрация на Github

1. Заходите на сайт Github.
2. Нажимаем кнопку Sing up (зарегистрироваться).
3. Вводим обязательные данные:
   • имя пользователя
   • адрес электронной почты
   • пароль

Выберите тарифный план

Github — полностью бесплатен, но есть интересные фишки, но вам они пока не нужны так что выбираем бесплатный тариф.

Потом вы попадайте на небольшой опрос Github, чтобы его пропустить нажмите skip this step.

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

Для создания репозитория заходим на сайт Гитхаба и в блоке «Your repositories» нажимаем кнопку «New repository». Заполняем параметры нового репозитория. Важно, чтобы название репозитория было в виде «username.github.io», где username — имя вашего аккаунта на Гитхабе. В нашем примере это будет vkfor.github.io. Не обязательно, но установите галочку «Initialize this repository with a README». А затем нажмём кнопку «Create repository».

Шаг 3. Загрузка файлов

Репозиторий создан, теперь можно загрузить файлы.Нажмите кнопку «Upload files».

Затем перетащим файлы в появившееся поле для загрузки.

Напишите комментарий к вашему коммиту и нажмите кнопку «Commit changes».

Готово! Файлы загружены в репозиторий.

Шаг 4. Переход на ваш сайт

Остался последний шаг теперь перейти по адресу username.github.io, в нашем случае это vkfor.github.io.
Вот ваш сайт и в интернете!

Вот и все. Надеюсь я вам помог.

Размещение на 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

Вы можете создать сайт GitHub Pages в новом или существующем репозитории.

Кто эту функцию можно использовать?

GitHub Pages is available in public repositories with GitHub Free and GitHub Free for organizations, and in public and private repositories with GitHub Pro, GitHub Team, GitHub Enterprise Cloud, and GitHub Enterprise Server. For more information, see «GitHub’s plans.»

В этой статье

Note: Organization owners can restrict the publication of GitHub Pages sites from repositories owned by the organization. For more information, see «Managing the publication of GitHub Pages sites for your organization.»

Creating a repository for your site

You can either create a repository or choose an existing repository for your site.

If you want to create a GitHub Pages site for a repository where not all of the files in the repository are related to the site, you will be able to configure a publishing source for your site. For example, you can have a dedicated branch and folder to hold your site source files, or you can use a custom GitHub Actions workflow to build and deploy your site source files.

If the account that owns the repository uses GitHub Free or GitHub Free for organizations, the repository must be public.

If you want to create a site in an existing repository, skip to the «Creating your site» section.

In the upper-right corner of any page, select

, then click New repository.

Use the Owner dropdown menu to select the account you want to own the repository.

Type a name for your repository and an optional description. If you’re creating a user or organization site, your repository must be named .github.io or .github.io . If your user or organization name contains uppercase letters, you must lowercase the letters. For more information, see «About GitHub Pages.»

Creating your site

Before you can create your site, you must have a repository for your site on GitHub. If you’re not creating your site in an existing repository, see «Creating a repository for your site.»

Warning: GitHub Pages sites are publicly available on the internet, even if the repository for the site is private. If you have sensitive data in your site’s repository, you may want to remove the data before publishing. For more information, see «About repositories.»

1. On GitHub, navigate to your site’s repository.
2. Decide which publishing source you want to use. For more information, see «Configuring a publishing source for your GitHub Pages site.»
3. Create the entry file for your site. GitHub Pages will look for an index.html , index.md , or README.md file as the entry file for your site. If your publishing source is a branch and folder, the entry file must be at the top level of the source folder on the source branch. For example, if your publishing source is the /docs folder on the main branch, your entry file must be located in the /docs folder on a branch called main . If your publishing source is a GitHub Actions workflow, the artifact that you deploy must include the entry file at the top level of the artifact. Instead of adding the entry file to your repository, you may choose to have your GitHub Actions workflow generate your entry file when the workflow runs.
4. Configure your publishing source. For more information, see «Configuring a publishing source for your GitHub Pages site.»
5. Under your repository name, click

Settings. If you cannot see the «Settings» tab, select the

dropdown menu, then click Settings.

Visit site.

Note: It can take up to 10 minutes for changes to your site to publish after you push the changes to GitHub. If you don’t see your GitHub Pages site changes reflected in your browser after an hour, see «About Jekyll build errors for GitHub Pages sites.»

Note: GitHub Actions is free for public repositories. Usage charges apply for private and internal repositories that go beyond the monthly allotment of free minutes. For more information, see «Usage limits, billing, and administration».

Notes:

• If you are publishing from a branch and your site has not published automatically, make sure someone with admin permissions and a verified email address has pushed to the publishing source.
• Commits pushed by a GitHub Actions workflow that uses the GITHUB_TOKEN do not trigger a GitHub Pages build.

Next steps

You can add more pages to your site by creating more new files. Each file will be available on your site in the same directory structure as your publishing source. For example, if the publishing source for your project site is the gh-pages branch, and you create a new file called /about/contact-us.md on the gh-pages branch, the file will be available at https://.github.io//about/contact-us.html .

You can also add a theme to customize your site’s look and feel. For more information, see «Adding a theme to your GitHub Pages site using Jekyll».

To customize your site even more, you can use Jekyll, a static site generator with built-in support for GitHub Pages. For more information, see «About GitHub Pages and Jekyll».

Further reading

• «Troubleshooting Jekyll build errors for GitHub Pages sites»
• «Creating and deleting branches within your repository»
• «Creating new files»
• «Troubleshooting 404 errors for GitHub Pages sites»