Github pages как разместить сайт

Как бесплатно залить сайт на GitHub Pages

Допустим, вы сделали какой-то проект, например, собрали себе портфолио по шаблону, и теперь хотите выложить его в интернет. Если вы использовали только HTML и CSS, то необязательно платить деньги, чтобы загрузить сайт куда-то. Вы можете бесплатно выложить сайт на сервис GitHub Pages. Всё, что нужно — аккаунт на Гитхабе.

Создание репозитория

Для создания репозитория перейдите по ссылке https://github.com/new.

Важно, чтобы название репозитория было в виде «username.github.io», где username — имя вашего аккаунта на Гитхабе. В нашем примере это будет evgeniyshklyar.github.io .

Обязательно установите галку на пункте Add a README file.

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

Репозиторий создан, теперь нужно загрузить файлы. Для этого можно воспользоваться VS Code, консолью или GitHub Desktop, но в нашем случае достаточно интерфейса Гитхаба.

Нажмите кнопку Add file — Upload files.

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

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

Проверка работы сайта

Чтобы проверить работу сайта, достаточно перейти по адресу username.github.io, в нашем случае это htmlacademy.github.io. Вуаля!

Шаг 4. Подключаем свой домен

Гитхаб позволяет использовать собственное доменное имя вместо стандартного username.github.io. Для этого, разумеется, вам сначала нужно приобрести его.

Предположим, что у вас уже есть домен. Давайте подключим его к репозиторию. Перейдём во вкладку Settings в интерфейсе репозитория, и в разделе Pages в поле Custom domain введём название нашего домена (например: html-academy.ru) и нажмём кнопку Save.

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

Нам нужно настроить A-запись домена. Для этого перейдём в панель управления DNS-записями, найдём (или добавим) A-запись и укажем 192.30.252.153 в качестве её значения. Ещё будет полезной памятка Гитхаба по настройке А-записей у DNS провайдера.

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

Получить более глубокие знания о работе с Git, попробовать на практике поработать с ветками, с локальным и удалённым репозиторием и изменениями можно на профессиональном онлайн-курсе.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

5 частых ошибок при работе с Git

Git — это важный и довольной понятный инструмент для контроля версий в разработке программного обеспечения, но иногда он может выдавать ошибки, которые сбивают с толку. Если вы столкнулись с одной из этих ошибок, попробуйте наше решение.

• 27 августа 2023

Работа с Git через консоль

Задача: форкнуть репозиторий в GitHub, создать ветку и работать с кодом.

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

Когда мы пишем код, мы постоянно туда что-то добавляем, удаляем, и иногда всё может ломаться. Поэтому перед любыми изменениями стоит сделать копию проекта. Если собирать проекты в папки с именами проект1 , проект1_финал и проект2_доделка , вы быстро запутаетесь и точно что-нибудь потеряете. Поэтому для работы с кодом используют системы контроля версий.

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

Git — самая популярная система контроля версий. С Git можно работать через командную строку (или терминал). В каждой системе своя встроенная программа для работы с командной строкой. В Windows это PowerShell или cmd, а в Linux или macOS — Terminal. Вместо встроенных программ можно использовать любую другую — например, Git Bash в Windows или iTerm2 для macOS.

Как работает терминал: мы вводим команду и получаем ответ компьютера — или всё получилось, или где-то ошибка, или нужно ввести что-то ещё — например, пароль. Поэтому большая часть этой инструкции состоит из команд для терминала. Сначала будет непривычно, но вам понравится.

Но давайте по порядку — установим Git на компьютер.

• 7 августа 2023

GitHub Desktop: обзор и первая настройка

Самая короткая инструкция о том, как сохранить файлы в GitHub и ничего не сломать. И самое главное — никакой консоли, всё через окошки и с помощью мышки. Для этого используем GitHub Desktop.

Внимание! GitHub Desktop не работает на Windows 7×32, поэтому если у вас эта версия системы, обновитесь до Windows 10 или воспользуйтесь программой GitKraken.

В этой статье идёт рассказ о системах контроля версий. Если вы совсем ничего о них не знаете, прочитайте статьи «Словарь терминов для Git и GitHub» и «Введение в системы контроля версий», чтобы понять терминологию и разобраться, зачем мы вообще это делаем.

• 7 августа 2023

Как склеить коммиты и зачем это нужно

Когда вы открываете пулреквест и ваш код смотрят и комментируют другие, бывает нужно что-то исправить. Обычно такие изменения мы комментируем сообщением вроде «Увеличил шрифт на 2px » или «Поменял оттенок фона в шапке». Такие маленькие изменения интересны, только пока они в пулреквесте. Ревьювер (человек, который смотрит ваш код), может легко узнать, что и когда вы изменили, а не читать весь diff заново, а вы можете легко откатить коммит, если он не нужен. Но когда приходит время вливать пулреквест, эти маленькие коммиты теряют свою ценность. Поэтому лучше их склеить в один.

• 14 июня 2023

Основные команды для работы с Git

Работа с Git через терминал — это обязательная часть практики фронтендера. Однако для начинающих разработчиков этот инструмент может показаться сложным. Чтобы вам было проще учиться, мы собрали основные команды для работы с Git.

☝ В некоторых командах мы будем писать URL-адрес удалённого репозитория и название проекта в квадратных скобках, вот так — [ссылка на удалённый репозиторий] . Мы делаем это только для наглядности. Вам квадратные скобки ставить не нужно.

• 22 февраля 2023

Регистрация на GitHub

Создание нового аккаунта на GitHub состоит всего из 10 шагов — и вся регистрация занимает меньше пяти минут.

�� Обратите внимания, что интерфейс Гитхаба регулярно меняется, так что внешне он может отличаться, когда вы читаете эту статью.

Начало регистрации. Так выглядит главный экран Гитхаба, когда вы не зарегистрированы. Главное, что вам нужно заметить — большое поле для ввода почты и зелёная кнопка. Вводите свой адрес и переходите на следующий шаг.

Ввод почты. На следующем шаге начинается регистрация. Подтвердите свою почту с прошлого шага и нажмите Continue (Продолжить).

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

Имя профиля. Теперь выберите имя вашего профиля — оно будет использоваться в интерфейсе, в коммитах и комментариях. То есть именно так вас будет видеть любой пользователь Гитхаба. Для разработчика Гитхаб вместо визитки, так что выбирайте что-нибудь приличное, лучше, если ник будет совпадать с вашими никнеймами на других сайтах.

Если имя недоступно, Гитхаб вам об этом скажет. А если доступно — жмите Continue.

Рассылки. Дальше Гитхаб спросит, хотите ли вы подписаться на рассылку об обновлениях. Впечатайте латинскую У, если хотите, или n, если письма вам не нужны. Готовы спорить, мы знаем, что вы выберете.

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

Подтверждение почты. После капчи вам придёт письмо с кодом на почту. Введите его на следующей странице.

Вот здесь. Главное — не ошибайтесь.

Общая информация о вас и вашей команде. Если вы регистрируете аккаунт для себя, выбирайте Just me. Второй пункт — студент вы или учитель. Выбирайте «Студент», если вы не учитель.

Интересы. Дальше Гитхаб спросит вас об интересах — то есть о том, зачем вы регистрируете аккаунт. Из вариантов:

• Совместная разработка и код ревью.
• Автоматизация. CI/CD, API и другие админские вещи.
• Безопасность. Двухфакторная аутентификация, ревью, сканирование кода и списки зависимостей.
• Приложения. Выбирайте, если будете использовать GitHub Mobile, CLI, Desktop.
• Управление проектами. Проекты, метки, ишьи, вики и другие управленческие дела.
• Управление командами. Организации, приглашения, роли, домены.
• Сообщество. Выбирайте, если Гитхаб интересен вам как соцсеть.

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

Выбор тарифа. На выбор бесплатный тариф или платный GitHub Pro. Практика показывает, что для большинства личных проектов хватит бесплатного тарифа. В сентябре 2022 в него входили:

• Безлимитное количество репозиториев.
• 2000 минут CI/CD в месяц.
• 500 мегабайт места в хранилище пакетов.
• Поддержка сообщества.

Выбор тоже можно пропустить, тогда у вас будет бесплатный тариф.

Всё готово. Теперь у вас есть аккаунт. Можете создать репозиторий и работать с ним, или склонировать чужой. А для работы у вас есть несколько удобных вариантов:

• 28 сентября 2022

Работа с Git в Visual Studio Code

Если вы вёрстаете сайты или пишете код в редакторе Visual Studio Code, то Git за пять минут настраивается прямо внутри редактора. Не нужно запоминать команды для консоли, не нужно тыкать в лишние приложения.

Следуйте инструкции и всё получится.

• 16 сентября 2022

Markdown за 5 минут

Маркдаун, он же markdown — удобный и быстрый способ разметки текста. Маркдаун используют, если недоступен HTML, а текст нужно сделать читаемым и хотя бы немного размеченным (заголовки, списки, картинки, ссылки).

Главный пример использования маркдауна, с которым мы часто сталкиваемся — файлы readme.md , которые есть в каждом репозитории на Гитхабе. md в имени файла это как раз сокращение от markdown.

Другой частый пример — сообщения в мессенджерах. Можно поставить звёздочки вокруг текста в Телеграме, и текст станет полужирным.

Версии маркдауна отличаются, поэтому перепроверьте, какую вы используете.

• 5 октября 2021

Шпаргалка по Git. Решение основных проблем

Поговорим о решении проблем с Git.

• 11 декабря 2020

Полезные команды для работы с Git

Работа с Git через терминал — это обязательная часть практики каждого современного фронтенд-специалиста. Однако, для начинающих это может показаться сложным. Чтобы упростить процесс обучения, мы собрали для вас все самые необходимые команды, которые пригодятся в работе с Git на первое время.

• 1 января 2020

Как использовать GitHub Pages?

GitHub — это сайт «социальной разработки». Он позволяет загружать репозитории кода для хранения в системе управления версиями Git. После загрузки вы можете сотрудничать с другими участниками для работы над общим проектом, а ещё это система с открытым исходным кодом по умолчанию: любой человек в мире может найти ваш код на GitHub, использовать его, учиться по нему и улучшать его. Вы тоже можете взаимодействовать с кодом других людей! В этой статье представлено базовое руководство по публикации контента с использованием функции gh-pages Github.

Публикация контента

GitHub — очень важное и полезное сообщество для участия, а Git/GitHub — очень популярная система управления версиями — большинство технологических компаний теперь использует её в своём рабочем процессе. У GitHub есть очень полезная функция GitHub Pages, которая позволяет публиковать живую демонстрацию кода в виде сайта в Интернете.

Базовая установка Github

1. Прежде всего, установите Git на свой компьютер. Это базовое программное обеспечение для управления версиями, поверх которого работает GitHub.
2. Затем зарегистрируйтесь на GitHub. Это просто.
3. После того, как вы зарегистрировались, войдите в свою учётную запись на github.com с помощью своих имени пользователя и пароля.

Подготовка кода для загрузки

В репозитории на Github вы можете хранить любой код, который вам нравится, но для полноценного использования функции GitHub Pages ваш код должен быть структурирован как типичный веб-сайт, то есть, основной точкой входа должен быть HTML-файл с именем index.html .

Прежде чем двигаться дальше, вам необходимо инициализировать вашу папку (директорию) с кодом как репозиторий Git. Как это сделать:

Направьте командную строку в вашу папку test-site (или папку с любым другим названием, содержащую ваш сайт). Для этого используйте команду cd (т.е. «change directory» — «поменяй директорию»). Вот что вы бы набрали, если бы разместили свой сайт в папке test-site на рабочем столе:

cd Desktop/test-site 

git init 

Дополнительно об интерфейсах командной строки

Лучший способ загрузить код в Github — использовать командную строку. Это окно, в котором вы вводите команды, чтобы делать такие вещи, как создавать файлы и запускать программы, вместо того чтобы кликать внутри пользовательского интерфейса. Оно будет выглядеть примерно так:

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

Каждая операционная система поставляется с инструментом командной строки:

• Windows: Командную строку (Command Prompt) можно вызвать, нажав клавишу Windows, набрав Command Prompt и выбрав её из появившегося списка. Обратите внимание, что в Windows свои собственные условные обозначения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
• OS X: Терминал (Terminal) можно найти в Applications > Utilities.
• Linux: Обычно терминал можно вызвать с помощью Ctrl + Alt + T. Если это не сработает, найдите Terminal в панели приложений или меню.

Сначала это может показаться немного пугающим, но не волнуйтесь — вы быстро разберётесь в основах. Вы говорите компьютеру что-то сделать в терминале, введя команду и нажав Enter, как показано выше.

Создание репозитория для вашего кода

1. Затем вам нужно создать новый репозиторий для ваших файлов. Нажмите «Плюс» (+) в правом верхнем углу главной страницы GitHub и выберите «Новый репозиторий» (New Repository).
2. На этой странице в поле «Имя репозитория» (Repository name) введите имя для своего репозитория, например my-repository.
3. Также добавьте описание, чтобы уточнить, что будет содержать ваш репозиторий. Ваш экран должен выглядеть так:
4. Нажмите «Создать репозиторий» (Create repository); откроется следующая страница:

Загрузка файлов на GitHub

1. На текущей странице вас интересует раздел …or push an existing repository from the command line («. или загрузите существующий репозиторий с помощью командной строки»). В этом разделе вы должны увидеть две строки кода. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так:

git remote add origin https://github.com/chrisdavidmills/my-repository.git

git add --all git commit -m 'adding my files to my repository' 

git push -u origin main 

Больше информации о GitHub

Если вы хотите поменять что-то на своем тестовом сайте и загрузить результат на GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам потребуется ввести следующие команды (нажимая Enter после каждой), чтобы загрузить их на GitHub:

git add --all git commit -m 'another commit' git push

Вы можете написать более подходящее сообщение вместо another commit, чтобы уточнить, что именно вы только что изменили.

Мы едва коснулись Git. Чтобы узнать больше, начните с нашей статьи Git и GitHub.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Создание сайта 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»

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

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

Автор Алексей На чтение 4 мин Просмотров 6.4к. Опубликовано 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.