Как создать бесплатный сайт на GitHub Pages
Хотите разместить онлайн-портфолио своих работ, но не умеете создавать сайты? А, может, подумываете о собственном блоге или сайте-визитке, но не знаете, с чего начать? Или же просто не хотите тратить время и деньги на хостинги, доменные имена и т.д.?
Тогда эта статья для вас.
А зачем мне сайт?
Сайт — это ваш способ коммуникации с миром. Если у человек есть собственный сайт, то это поднимает его значимость в глазах окружающих.
Существует несколько способов по созданию простых и бесплатных сайтов для начинающих. В основном такие сайты делаются на базе GitHub и WordPress.
WordPress — это отличный вариант для новичков, которые не разбираются в сайтостроении. К сожалению, здесь есть одно «но». Если создавать бесплатный сайт на WordPress, то все увидят, что вы пользуетесь этой платформой, поскольку адрес сайта будет заканчиваться на wordpress.com, а внизу каждой страницы появится логотип WordPress.
Знакомясь с миром технологий, вы быстро заметите, что умение работать с GitHub даст вам явное преимущество. Ну, а если вы уже прочно обосновались в ИТ-вселенной, то, скорее всего, успели отметиться в каком-то GitHub-репозитории.
При размещении проектов на GitHub люди видят не только ваш код, но и то, что вы делаете и как. GitHub — это настоящий круговорот идей. Так почему бы не создать свой сайт на GitHub и не разместить его в самом репозитории? К тому же так вы добавите несколько коммитов к своему профилю!
Начинаем!
Существует целых два возможных сценария для создания сайтов. Вы либо создаете сайт с нуля, либо уже имеете некий прототип (или готовый сайт), но не знаете, как бесплатно разместить его на GitHub.
Начнем со второго варианта.
У меня есть файлы, но я не знаю, что с ними делать!
А вот здесь все предельно просто — работу за вас сделает GitHub!
Репозиторий — это место, где «живет» ваш проект. Здесь вы создаете структуру проекта, храните папки, файлы, изображения, видео, таблицы, Jupyter notebook, наборы данных и т.д.
Если у вас есть файл index.html, то GitHub сразу поймет, что от него хотят.
Теперь самое время переключиться на GitHub Pages. Зайдите в свой GitHub-репозиторий и нажмите Settings.
Прокрутите до GitHub pages. Здесь вы увидите следующее:
Теперь в выпадающем меню Source выберите master branch или master branch/docs folder. Разница вот в чем: если вы будете размещать проект из папки docs, то эта папка (docs) обязательно должна присутствовать в ветке master, из которой запускается сайт!
Если вы совсем новичок, то, скорее всего, выберете master branch. То есть репозиторий будет размещен «как есть».
Далее следует уведомление, что сайт готов к размещению.
Проявите терпение. Подождите минуту-другую, а затем обновите страницу или попробуйте открыть нужную вам ссылку. Как только сайт будет размещен, вы увидите следующее:
Кликните по этой ссылке.
А вот и ваш бесплатный сайт!
Теперь попробуем создать сайт с нуля.
Я не знаю, с чего начать!
Сейчас поговорим об основах, а Bootstrap, верстку и т.д. прибережем до следующего раза.
Раз мы создаем сайт с нуля, то делать это будем в самом GitHub.
Для начала создадим новый репозиторий.
Укажите название репозитория, его краткое описание, отметьте галочкой Initialize this repository with a README и нажмите Create repository.
Теперь идем в Settings (правый верхний угол) и прокручиваем до раздела GitHub Pages. Открываем выпадающее меню, меняем его значение с None на master branch.
Cоздание сайта на GitHub
Для запуска сайта необязательно покупать хостинг, можно воспользоваться бесплатным сервисом GitHub Pages.
Для создания репозитория заходим на сайт GitHub и в блоке Your repositories нажимаем кнопочку New repository.
Здесь необходимо заполнить параметры нового репозитория. Важно, чтобы название репозитория было в виде username.github.io, где username — ваш ник на GitHub.
Если вы зарегистрированы в качестве организации, ваш репозиторий должен иметь имя organization.github.io, где organization — название вашей компании на GitHub.
Обязательно ставим галочку на Initialize this repository with a README. А затем нажимаем кнопку Create repository.
Репозиторий создан, теперь нужно загрузить файлы сайта. Воспользуемся интерфейсом GitHub. Нажимаем кнопку Upload files.
Затем перетащим файлы в появившееся поле для загрузки. Добавим комментарий к нашему коммиту и нажмём кнопку Commit changes.
Файлы успешно загружены.
Чтобы проверить работу сайта, достаточно перейти по адресу username.github.io, в моем случае это shevelevdesign.github.io.
Гитхаб позволяет использовать ваше доменное имя вместо стандартного username.github.io.
Для этого переходим во вкладку Settings в интерфейсе репозитория, и в разделе GitHub Pages в поле Custom domain введём название нашего домена и нажимаем кнопку Save.
Далее необходимо изменить информацию о DNS-записях домена.
Нам нужно настроить A-запись домена, для этого переходим в панель управления DNS-записями вашего регистратора, и добавим следующие A-записи:
Всё готово! В течение нескольких часов сайт начнет открываться с нового домена.
Все способы подключения собственного домена подробно описаны в памятке GitHub.
GitHub Pages — лучше, чем вы думаете, комментаторы. Сравнение с Php и хостингами слишком прямолинейно, не забывайте, что php и github — технологии из разных эпох. Из-за этого многие преимущества оказались не раскрыты:
1) GitHub Pages имеет неограниченный хостинг, при условии что вы не храните большие файлы.
2) GitHub Pages не нужна база данных, т.к. базой данных является сам репозиторий. Например, вы можете хранить статьи как Markdown-файлы и верстать блог или новостной сайт при помощи Jekyll (liquid), как это сделано например у меня: https://mikush.in Да, поскольку репозиторий — открытый, вы не сможете хранить пароли — и слава богу, пользуйтесь OAuth.
3) Action Points — это дополнительные сервисы. Вышеупомянутый сайт работает без них абсолютно бесплатно
4) Трафик неограничен и труден для DDoS, т.к. ддосить и блокировать росговмаразму придётся айпишники самого GitHub
5) У GitHub есть API для всевозможных действий с репозиторием. При том что GitHub Pages — движок статических вебсайтов (static pages), с помощью API можно настроить взаимодействие с клиентами и различных ботов. Для комментариев/форума можно подключить Disqus.
Если есть вопросы, пишите в личку.
Картинка на шаге 3 не очень подходит ресурсу.
На этом сайте (VC) обязательно следует помнить, что это не для коммерческих проектов. То есть разместить-то можно попытаться, но это как построить ларёк в зоне прибоя или в русле реки, что засыхает между дождями
GitHub Pages is not intended for or allowed to be used as a free web hosting service to run your online business, e-commerce site
Данный сервис НЕ для тех, кто хочет "на халяву" закинуть свой интернет-магазин или какой-то коммерческий проект на вечный хостинг. Гитхаб — это инструмент, который попробовать должен каждый.
С другой стороны, я не вижу трудностей для запуска, например, личного блога или портфолио. Все ограничивается фантазией.
Да, это не классический PHP хостинг и придется поработать со "статикой", но вам дают свободное место на диске на бесперебойном сервере, в худшем случае поддомен GitHub и удобный редактор с GIT.
Creating a GitHub Pages site
You can create a GitHub Pages site in a new or existing repository.
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 products.»
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, use the
drop-down menu, and select New repository.
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.»
On GitHub, navigate to your site’s repository.
Decide which publishing source you want to use. For more information, see «Configuring a publishing source for your GitHub Pages site.»
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.
Configure your publishing source. For more information, see «Configuring a publishing source for your GitHub Pages site.»
Under your repository name, click
Settings. If you cannot see the «Settings» tab, select the
dropdown menu, then click Settings.
In the «Code and automation» section of the sidebar, click
To see your published site, under «GitHub Pages», click
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.»
Your GitHub Pages site is built and deployed with a GitHub Actions workflow. For more information, see «Viewing workflow run history».
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».
Note: 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.
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://<user>.github.io/<repository>/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».
Как использовать GitHub Pages?
GitHub — это сайт «социальной разработки». Он позволяет загружать репозитории кода для хранения в системе управления версиями Git. После загрузки вы можете сотрудничать с другими участниками для работы над общим проектом, а ещё это система с открытым исходным кодом по умолчанию: любой человек в мире может найти ваш код на GitHub, использовать его, учиться по нему и улучшать его. Вы тоже можете взаимодействовать с кодом других людей! В этой статье представлено базовое руководство по публикации контента с использованием функции gh-pages Github.
Публикация контента
GitHub — очень важное и полезное сообщество для участия, а Git/GitHub — очень популярная система управления версиями — большинство технологических компаний теперь использует её в своём рабочем процессе. У GitHub есть очень полезная функция GitHub Pages, которая позволяет публиковать живую демонстрацию кода в виде сайта в Интернете.
Базовая установка Github
- Прежде всего, установите Git на свой компьютер. Это базовое программное обеспечение для управления версиями, поверх которого работает GitHub.
- Затем зарегистрируйтесь на GitHub. Это просто.
- После того, как вы зарегистрировались, войдите в свою учётную запись на github.com с помощью своих имени пользователя и пароля.
Подготовка кода для загрузки
В репозитории на Github вы можете хранить любой код, который вам нравится, но для полноценного использования функции GitHub Pages ваш код должен быть структурирован как типичный веб-сайт, то есть, основной точкой входа должен быть HTML-файл с именем index.html .
Прежде чем двигаться дальше, вам необходимо инициализировать вашу папку (директорию) с кодом как репозиторий Git. Как это сделать:
-
Направьте командную строку в вашу папку test-site (или папку с любым другим названием, содержащую ваш сайт). Для этого используйте команду cd (т.е. «change directory» — «поменяй директорию»). Вот что вы бы набрали, если бы разместили свой сайт в папке test-site на рабочем столе:
Дополнительно об интерфейсах командной строки
Лучший способ загрузить код в Github — использовать командную строку. Это окно, в котором вы вводите команды, чтобы делать такие вещи, как создавать файлы и запускать программы, вместо того чтобы кликать внутри пользовательского интерфейса. Оно будет выглядеть примерно так:
Примечание: вы также можете использовать графический пользовательский интерфейс Git для выполнения тех же задач, если вам неудобно работать с командной строкой.
Каждая операционная система поставляется с инструментом командной строки:
- Windows: Командную строку (Command Prompt) можно вызвать, нажав клавишу Windows, набрав Command Prompt и выбрав её из появившегося списка. Обратите внимание, что в Windows свои собственные условные обозначения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
- OS X: Терминал (Terminal) можно найти в Applications > Utilities.
- Linux: Обычно терминал можно вызвать с помощью Ctrl + Alt + T. Если это не сработает, найдите Terminal в панели приложений или меню.
Сначала это может показаться немного пугающим, но не волнуйтесь — вы быстро разберётесь в основах. Вы говорите компьютеру что-то сделать в терминале, введя команду и нажав Enter, как показано выше.
Создание репозитория для вашего кода
- Затем вам нужно создать новый репозиторий для ваших файлов. Нажмите «Плюс» (+) в правом верхнем углу главной страницы GitHub и выберите «Новый репозиторий» (New Repository).
- На этой странице в поле «Имя репозитория» (Repository name) введите имя для своего репозитория, например my-repository.
- Также добавьте описание, чтобы уточнить, что будет содержать ваш репозиторий. Ваш экран должен выглядеть так:
- Нажмите «Создать репозиторий» (Create repository); откроется следующая страница:
Загрузка файлов на GitHub
- На текущей странице вас интересует раздел …or push an existing repository from the command line («. или загрузите существующий репозиторий с помощью командной строки»). В этом разделе вы должны увидеть две строки кода. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так:
- Затем введите следующие две команды, нажимая Enter после каждой из них. Они готовят код для загрузки в GitHub и просят Git управлять этими файлами.
Больше информации о GitHub
Если вы хотите поменять что-то на своем тестовом сайте и загрузить результат на GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам потребуется ввести следующие команды (нажимая Enter после каждой), чтобы загрузить их на GitHub:
Вы можете написать более подходящее сообщение вместо another commit, чтобы уточнить, что именно вы только что изменили.
Мы едва коснулись Git. Чтобы узнать больше, начните с нашей статьи Git и GitHub.