Планы веб-хостинга бывают разных вариантов и ценовых категорий. Существуют более дорогие планы, позволяющие размещать крупнейшие веб-сайты в мире, но что, если вам просто нужно простое хостинговое решение для простого веб-сайта?
Для статического веб-сайта или небольших веб-приложений существуют бесплатные планы хостинга, которые помогут вам сразу же начать работу в сети. Они требуют немного больше настроек, чем платный хост, но это достойный компромисс бесплатно.
GitHub Pages является одним из таких вариантов, и в этой статье мы покажем вам, как разместить простой веб-сайт с помощью GitHub Pages бесплатно.
Что такое GitHub Pages?
Примечание. Для размещения на страницах GitHub вам потребуется доступ ко всему коду вашего сайта. Как правило, этот вариант лучше всего работает, когда вы кодируете свой сайт с нуля.
GitHub Pages — это сервис, созданный GitHub, который позволяет вам публиковать веб-сайт или веб-приложение, сохраняя его в бесплатном репозитории GitHub.
Вы можете разместить один полный веб-сайт и неограниченное количество «проектных сайтов», которые можно рассматривать как «страницы» на веб-сайте. Код веб-сайта хранится в указанном хранилище GitHub, которое GitHub затем опубликует для просмотра на любом компьютере или планшете.
Процесс довольно прост, но есть немного, чтобы покрыть. Давайте посмотрим, как это сделать.
Основы GitHub
GitHub — это популярный сервис контроля версий для программистов, который использует Git для хранения и управления кодом. Код хранится в репозиториях , которые являются просто контейнерами на облачном сервере, которые позволяют вам получить доступ к вашему коду со всех ваших компьютеров.
Вы можете создавать новые репозитории, используя веб-сайт GitHub или через командную строку, когда у вас установлен Git. Репозитории имеют имена, могут быть открытыми или закрытыми и могут хранить код на любом языке. Как только вы создадите свой репозиторий, с помощью Git вы можете извлечь свой код с сервера, чтобы внести изменения, а затем загрузить его обратно в GitHub.
Git легко установить на ПК и Mac, перейдя на сайт Git и выполнив шаги по установке. Git есть много чего, но вы можете изучить основы Git и использовать его очень быстро.
GitHub уже является нарицательным именем в программировании, и GitHub Pages становится очень полезным, когда вы уже знаете, как его использовать.
Настройка вашего сайта на страницах GitHub
Процесс размещения сайта с помощью GitHub Pages можно упростить в три этапа:
-
- Создать учетную запись GitHub
- Создайте новый репозиторий с несколькими правилами
- Отредактируйте ваш код и загрузите его на GitHub, чтобы ваш сайт работал
Давайте немного подробнее расскажем о том, как опубликовать ваш статический веб-сайт в режиме реального времени на страницах GitHub. Вам понадобятся некоторые знания HTML, поэтому сейчас самое время освежить в деталях некоторые основы HTML.
Создание вашей учетной записи GitHub
В это время вы должны установить Git, если не вернетесь к основам GitHub и убедитесь, что он полностью установлен. Вам понадобится Git для управления вашим кодом через GitHub. Зайдите на сайт GitHub, чтобы зарегистрироваться.
Вам нужно будет выбрать имя пользователя и зарегистрироваться, указав свой адрес электронной почты и пароль. Имя пользователя будет иметь важное значение для запуска вашего сайта. Как только вы зарегистрируетесь, войдите на домашнюю страницу, чтобы начать свой сайт.
Создание вашего GitHub репозитория
На домашней странице GitHub слева вы увидите раздел «хранилища». Здесь будет список всех ваших репозиториев, а также кнопка «Создать», которая позволит вам создать новый репозиторий.
Нажмите «Новый», и вы попадете на новый экран для ввода информации о хранилище. Сначала вам нужно будет ввести имя репозитория. Имя репозитория должно быть следующим, где [ИМЯ ПОЛЬЗОВАТЕЛЯ] — это желаемое имя пользователя:
[USERNAME].github.io Например, если ваше имя пользователя Jake , то вашим именем хранилища будет Jake.github.io . Это очень важный шаг. Это способ, которым GitHub Pages идентифицирует хранилище как живой сайт, а не пустой контейнер, в котором вы хотите кодировать.
Как только вы введете имя пользователя, вы можете ввести дополнительное описание, чтобы добавить некоторые детали в ваш репозиторий (например, «Мой спортивный сайт»).
Выберите «public» или «private», чтобы указать, могут ли другие пользователи изменять ваш репозиторий. Публичный означает, что любой может изменить, частный означает, что только вы можете изменить.
Наконец, вы можете создать файл README для вашего репозитория, который предназначен для хранения документации по проектам. Это совершенно необязательно.
Теперь, когда все заполнено, нажмите «Создать репозиторий», чтобы закончить!
Редактирование и загрузка вашего сайта
Теперь, когда у вас есть репозиторий на GitHub, перейдите к терминалу командной строки. Перейдите в папку, в которой вы хотите сохранить свой проект, и выполните следующую команду, убедившись, что заменили [ИМЯ ПОЛЬЗОВАТЕЛЯ] на свое действительное имя пользователя:
git clone https://github.com/[USERNAME]/[USERNAME].github.io
Функция «клонирования» в git просто делает копию вашего репозитория на вашем компьютере, чтобы вы могли редактировать код. Любые изменения, которые вы вносите в этот код, могут быть сохранены в главном хранилище с помощью командной строки.
Теперь, когда хранилище хранится в папке, перейдите в эту папку с помощью терминала или просто щелкните папку на вашем компьютере. Создайте файл index.html внутри этой папки. Этот HTML-файл будет содержать ваш код.
Откройте файл HTML в текстовом редакторе и добавьте строку <div>, набрав «Hello». Это просто строка для отображения текста и убедитесь, что веб-сайт работает.
Вернитесь в папку, где хранится ваш код с помощью терминала. Теперь вы можете сохранить свои изменения в своем хранилище, запустив этот git-код
git add --all git commit -m "Save changes" git push -u origin master
Это может сбивать с толку, если вы никогда раньше не использовали Git, но это очень просто. git add –all добавляет все сделанные вами изменения в очередь для сохранения. git commit готовит изменения с необязательным флагом -m, который добавляет описание того, что изменилось в этом коммите. (Например, «Сохранить изменения». Вы можете исправить все.) Наконец, git push завершает изменения и загружает новый код в ваш репозиторий.
Просмотр вашего сайта GitHub Pages
Здесь было много, но теперь вы готовы увидеть конечный результат. Загрузите ваш любимый веб-браузер и перейдите по адресу https: // [ИМЯ ПОЛЬЗОВАТЕЛЯ] .github.io, где снова [ ИМЯ ПОЛЬЗОВАТЕЛЯ ] заменяется именем вашего хранилища.
Вы увидите, что ваш сайт опубликован вживую! Его можно просматривать в любом браузере на любом компьютере, планшете или телефоне. Это полностью функционирующий сайт.
Дополнительные параметры для бесплатного веб-хостинга
Теперь, когда вы знаете, как создать бесплатный веб-сайт на страницах GitHub, вы можете создать практически любой тип статического веб-сайта. Это отличный вариант для разработчиков и частных лиц, которым просто нужно небольшое решение.
Нужно что-то более мощное, чем GitHub Pages? Проверьте эти удивительные бесплатные услуги веб-хостинга