Как создать простой бесплатный веб-сайт с Github Pages

Веб-сайты с каждым днем размещать становится все проще, и многие сервисы предлагают пакеты менее чем за 5 долларов в месяц. Но если вам просто нужен простой сайт, который не будет иметь большого трафика, вы можете бесплатно разместить его на Github, даже с собственным доменом.

Что такое страницы Github?

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

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

У вас могут быть страницы для вашего имени пользователя или страницы для каждого репозитория. По умолчанию Github назначит вам URL поддомена, например username.github.io или username.github.io/repository. Это можно изменить на любой пользовательский URL.

Что такое статические сайты?

Важно отметить, что Github Pages предназначен только для статических веб-сайтов. Это не обязательно означает, что ваш веб-сайт не может быть интерактивным, это просто означает, что ваш веб-сайт размещается непосредственно из файлов HTML, JS и CSS.

Основное ограничение статических веб-сайтов заключается в том, что они не могут полагаться на то, что сервер будет изменять содержимое для каждого запроса, как в случае с таким языком, как PHP. Например, если вы хотите, чтобы пользователи входили в систему и просматривали профиль, или размещали WordPress (который подключается к серверу базы данных), вам придется разместить его в другом месте.

Однако, если вы обслуживаете клиентские фреймворки JavaScript, такие как React, вы можете размещать целые веб-приложения на Github Pages или у любого другого поставщика хостинга статических веб-сайтов. Это связано с тем, что весь контент генерируется на устройстве клиента, и единственное, что вы предоставляете, — это файл bundle.js со всем кодом.

Ограничения Github Pages — некоммерческое использование

Конечно, это связано с некоторыми ограничениями. По сути, вы не должны использовать Github Pages в первую очередь в коммерческих целях. В частности, они говорят, что его запрещено использовать в качестве «бесплатного веб-хостинга для ведения вашего онлайн-бизнеса, сайта электронной коммерции или любого другого веб-сайта, который в первую очередь направлен на содействие коммерческим транзакциям».

Итак, если вы планировали вести свой бизнес за пределами Github Pages, вы, вероятно, захотите рассмотреть другие альтернативы. Два очень похожих метода «бесплатного хостинга» — это использование корзин AWS Simple Storage Service для размещения статических веб-сайтов или использование статического хостинга Google Firebase. Оба хорошо работают как для любительского, так и для профессионального развертывания статического сайта и имеют бесплатные уровни, которые могут избавить вас от необходимости платить 10 долларов в месяц за размещение собственного сервера.

Github Pages также имеет ограничения по размеру и мягкие ограничения пропускной способности, хотя они довольно разумны. Размер вашего сайта не может превышать 1 ГБ (у вас, скорее всего, возникнут проблемы с обслуживанием сайта такого размера), и если пропускная способность превышает 100 ГБ в месяц, Github может не обслуживать ваш сайт. Для справки, такой объем данных будет стоить вам около 10 долларов в месяц на AWS.

Настройка страницы

Github Pages довольно просто настроить, и если вы знакомы с Github, это должно быть еще проще.

По сути, у вас есть два варианта репозиториев — страницы пользователей или страницы проекта. Если вы используете личный домен, это не должно иметь большого значения, но если вам нужен красивый URL-адрес, вам следует использовать страницу пользователя, которая даст вам URL-адрес в формате username.github. .io. Если вы используете страницу проекта, вы можете настроить много страниц, но каждая из них будет находиться по адресу username.github.io/repository.

В любом случае вам придется создать новый репозиторий. Если вы создаете страницу пользователя, укажите в ней свое имя пользователя плюс .github.io. Убедитесь, что он также общедоступен.

viceversagames.github.io

После этого вам понадобится клиент Git для подключения к Github и продвижения вашего сайта. Вы можете использовать терминал или клиент с графическим интерфейсом, например Github Desktop. Используйте URL-адрес, предоставленный вам в быстрой настройке:

Или, если вы используете приложение Github Desktop, вы можете просто найти его по имени:

Затем вам нужно будет добавить свой контент. Если у вас есть существующий шаблон, который вы хотели бы использовать, скопируйте все активы (файлы HTML, CSS, JS, изображения) в этот каталог, который по сути является «веб-корнем», из которого все будет размещаться. Самое главное — это index.html, главная страница вашего сайта.

Как только все заработает локально, вам нужно будет зафиксировать изменения и опубликовать их на Github.

Вскоре вы увидите новые файлы в своем репозитории, но для полноценной работы вам придется включить Github Pages. На странице репозитория нажмите «Настройки» и прокрутите вниз до «Страницы». Выберите ветку main, из которой будет обслуживаться ваш веб-сайт, и нажмите «Сохранить».

Обновление всего может занять несколько минут, и оно будет обновляться только 10 раз в час, поэтому не вносите изменения слишком быстро.

Вы также захотите включить «Enforce HTTPS» в настройках страниц Github.

Добавление пользовательского домена

Добавить собственный домен очень просто. Сначала вам нужно будет купить его, что вы можете сделать у многих разных регистраторов. Несколько хороших примеров — Google Domains, Namecheap или GoDaddy.

После регистрации вам нужно будет указать свой домен на свою страницу Github. Однако вы не можете просто вставить сюда URL-адрес; вам нужно будет создать запись CNAME, указывающую на username.github.io. Если вы планируете использовать www, установите для параметра Host значение www. Если вы хотите использовать базовый домен отдельно, задайте для параметра Host значение @.

Подождав несколько минут, пока записи DNS будут синхронизированы через Интернет, вы сможете увидеть свой недавно созданный сайт Github Pages по вашему пользовательскому URL-адресу, а в меню настроек он должен отображаться как подключенный.