Github pages что это

Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

You get one site per GitHub account and organization,
and unlimited project sites. Let‘s get started.

Create a repository

Head over to GitHub and create a new repository named username.github.io, where username is your username (or organization name) on GitHub.

If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.

What git client are you using?

Download GitHub Desktop

GitHub Desktop is a great way to use Git and GitHub on macOS and Windows.

Download GitHub Desktop

Clone the repository

Go to the folder where you want to store your project, and clone the new repository:

$ git clone https://github.com/username/username.github.io

Clone the repository

Click the "Set up in Desktop" button. When the GitHub desktop app opens, save the project.

If the app doesn’t open, launch it and clone the repository from the app.

Clone the repository

After finishing the installation, head back to GitHub.com and refresh the page. Click the "Set up in Desktop" button. When the GitHub desktop app opens, save the project.

If the app doesn’t open, launch it and clone the repository from the app.

Hello World

Enter the project folder and add an index.html file:

$ echo "Hello World" > index.html

Create an index file

Grab your favorite text editor and add an index.html file to your project:

Push it

Add, commit, and push your changes:

$ git commit -m "Initial commit"

$ git push -u origin master

Commit & publish

Enter the repository, commit your changes, and press the publish button.

…and you’re done!

Fire up a browser and go to https://username.github.io.

Читайте также:  Топ 10 новинок игр на пк

Use a theme, or start from scratch?

You have the option to start with one of the pre-built themes,
or to create a site from scratch.

  • Choose a theme
  • Start from scratch

Repository Settings

Head over to GitHub.com and create a new repository, or go to an existing one.
Click on the Settings tab.

Theme chooser

Scroll down to the GitHub Pages section. Press Choose a theme.

Pick a theme

Choose one of the themes from the carousel at the top.
When you’re done, click Select theme on the right.

Edit content

Use the editor to add content to your site.

Commit

Enter a commit comment and click on Commit changes below the editor.

Create an index file

Head over to GitHub.com and create a new repository, or go to an existing one.
Click on the Create new file button.

Hello World

Name the file index.html and type some HTML content into the editor.

Commit the file

Scroll to the bottom of the page, write a commit message, and commit the new file.

Repository Settings

Click on the Settings tab and scroll down to the GitHub Pages section.
Then select the master branch source and click on the Save button.

…and you’re done!

Fire up a browser and go to http://username.github.io/repository.

Blogging with Jekyll

Using Jekyll, you can blog using beautiful Markdown syntax, and without having to deal with any databases. Learn how to set up Jekyll.

Custom URLs

Want to use your own custom domain for a GitHub Pages site? Just create a file named CNAME and include your URL. Read more.

Guides

Learn how to create custom 404 pages, use submodules, and learn more about GitHub Pages.

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

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

Для создания репозитория заходим на сайт Гитхаба и в блоке «Your repositories» нажимаем кнопку «New repository».

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

Форма создания репозитория

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

Репозиторий создан, теперь нужно загрузить файлы. Для этого необязательно клонировать репозиторий к себе на компьютер или постигать другие нюансы работы с Гитом — можно воспользоваться интерфейсом Гитхаба. Давайте нажмём кнопку «Upload files».

Читайте также:  Метод ветвей и границ python

Интерфейс репозитория в Гитхабе

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

Интерфейс загрузки файлов в репозиторий Гитхаба

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

Загрузка файлов в репозиторий

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

Интерфейс репозитория в Гитхабе с загруженными файлами

Шаг 3. Проверка работы сайта

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

Сайт работает

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

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

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

Настройки своего домена в GitHub Pages

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

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

Смена DNS-записи домена

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

Мы уже изучили вкратце такие темы, как хостинг и 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/) или на домене второго уровня (например, мой блог 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" — в таком случае репозиторий сразу создастся непустым, и его можно будет клонировать. В противном случае нужно будет инициализировать репозиторий локально и прописывать remote).