Готово, установлено, запущено: создание статического сайта с GitHub Pages

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

В этом руководстве вы узнаете, что такое статический сайт, включая его преимущества и ограничения, а также как бесплатно создать и развернуть простой персональный веб-сайт, созданный с помощью HTML и Bootstrap, с помощью GitHub Pages.

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

GitHub — это веб-платформа для размещения репозиториев Git и совместной работы над программными проектами. Он предлагает инструменты для обмена и отслеживания изменений кода, управления кодом и его просмотра, а также возможность открывать и просматривать запросы на вытягивание.

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

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

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

Статические и динамические веб-сайты

Как мы видели, GitHub Pages предоставляет способ развертывания статических веб-сайтов. Но в чем разница между статическим сайтом и динамическим сайтом?

Давайте начнем с обсуждения контента на указанных сайтах.

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

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

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

Как правило, мы можем сказать, что веб-сайт является статическим, если он содержит только HTML, CSS и JavaScript во внешнем интерфейсе, без серверных технологий, таких как PHP или Python, которые взаимодействуют с базой данных.

Хотя невозможно создавать динамические веб-сайты с помощью GitHub Pages, вы можете легко создавать свои собственные с помощью CMS, такой как WordPress, или генераторов статических сайтов, таких как Gatsby или Hugo.

Ключевые особенности страниц GitHub

Давайте посмотрим на сильные стороны GitHub Pages как услуги хостинга:

1. Простая настройка и публикация: GitHub Pages позволяет легко начать работу, выполнив всего несколько простых шагов. Вы можете включить GitHub Pages для своего репозитория и указать источник файлов вашего веб-сайта, и GitHub автоматически опубликует ваш веб-сайт и сделает его доступным по URL-адресу на основе вашего имени пользователя и имени репозитория.
2. Пользовательские домены: в GitHub Pages вы можете использовать собственное доменное имя для своего веб-сайта вместо URL-адреса по умолчанию, предоставленного GitHub. Это позволяет вам использовать собственный брендинг и упростить пользователям поиск и доступ к вашему веб-сайту.
3. Поддержка HTTPS: GitHub Pages предлагает поддержку HTTPS, что позволяет безопасно подключаться к вашему сайту. Это очень важно для повышения доверия к вашему сайту.
4. Поддержка Jekyll: GitHub Pages поддерживает Jekyll, генератор статических сайтов, который позволяет создавать сложные веб-сайты с использованием шаблонов и других функций. Это позволяет легко создавать профессионально выглядящие веб-сайты без необходимости писать весь код с нуля.

Ограничения

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

GitHub Pages не позволяет вашему сайту быть больше 1 ГБ, а это означает, что файлы вашего репозитория не могут превышать этот объем памяти. В большинстве случаев для статического сайта более чем достаточно 1 ГБ; просто обязательно сжимайте изображения.

Он также имеет мягкое ограничение пропускной способности в 100 ГБ в месяц. Этой пропускной способности будет достаточно для распространения вашего веб-сайта среди нескольких тысяч человек в месяц, поэтому, если у вас нет огромной аудитории, вам будет хорошо.

Создание и развертывание с помощью страниц GitHub: пошаговое руководство

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

В следующем руководстве вы узнаете, как создать страницу GitHub с нуля. Это включает в себя создание удаленного репозитория, создание адаптивного личного веб-сайта с помощью HTML и развертывание в Интернете с помощью GitHub.

Давайте погрузимся в это!

1. Зарегистрируйтесь на GitHub

Для начала у вас должна быть активная учетная запись GitHub. Если у вас его нет, перейдите на их страницу регистрации. Заполнение формы не займет больше пары минут.

После входа вы сможете создать удаленный репозиторий.

2. Создайте удаленный репозиторий

Репозиторий — это каталог, в котором вы храните весь код, относящийся к конкретному проекту.

На домашней странице GitHub нажмите кнопку «Создать» или «Создать репозиторий», расположенную на левой панели сайта. Это перенаправит вас на форму, где вы заполните информацию о своем репо.

Следующие шаги имеют решающее значение:

1. Установите имя вашего репозитория на "yourusername".github.io .
2. Проверьте общедоступную кнопку. Вы должны сделать репозиторий общедоступным , чтобы опубликовать свой сайт.
3. Добавьте README.

Вы можете иметь репозиторий только для данной личной учетной записи или организации. Вот почему имя репозитория — это ваше имя пользователя и домен github.io . Позже мы увидим, как настроить сайт из репозитория.

Если у вас нет GitHub Pro, вы можете опубликовать страницу GitHub, только если репозиторий является общедоступным. Имейте это в виду, если вы не хотите публиковать исходный код своего сайта.

После этого у вас должно получиться что-то вроде следующего:

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

Для этого щелкните меню Add file в своем репозитории и выберите параметр «Загрузить файлы» . Затем выберите файлы вашего веб-сайта с основным HTML-файлом с именем index.html . Не забудьте также поместить все свои файлы CSS и JavaScript в репозиторий.

Наконец, нажмите кнопку «Зафиксировать изменения» .

В следующем разделе мы создадим простой персональный веб-сайт с помощью HTML и Bootstrap. Затем мы загрузим его на GitHub и настроим как общедоступную страницу GitHub с собственным доменом.

3. Создайте личный сайт

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

Перейдите на вкладку code вашего репозитория и скопируйте URL-адрес SSH в параметре SHH .

Затем запустите терминал или командную строку. В большинстве дистрибутивов Linux и macOS вы можете использовать сочетание клавиш Ctrl + Alt + T или просмотреть меню приложений вашей системы для Terminal . В Windows вы можете использовать Git BASH, установленный по умолчанию, вместе с Git, CMD, PowerShell или клиентом с графическим интерфейсом.

В терминале введите git clone и скопированный URL-адрес. Это загрузит и создаст копию удаленного репозитория на вашем локальном компьютере, чтобы вы могли создать свой веб-сайт.

Затем войдите в новую папку с именем yourusername.github.io с помощью cd и ls . Вы должны увидеть папку .git , содержащую конфигурацию и метаданные вашего проекта, а также файл README.md , если вы его создали.

Откройте ваш любимый текстовый редактор (например, Sublime Text) и приступайте к созданию вашего веб-сайта.

В корне репозитория создайте файл с именем index.html (это имя требуется для GitHub Pages) и введите типичную структуру кода HTML:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kinsta User</title> </head> <body> </body> </html>

Как мы уже говорили ранее, мы собираемся использовать Bootstrap 5.0, CSS-фреймворк с открытым исходным кодом, который помогает нам легче создавать адаптивные веб-сайты. Как вы увидите, нам не придется использовать пользовательский CSS для этого конкретного сайта.

Чтобы добавить Bootstrap на нашу страницу, нам нужно включить скомпилированные CSS и JavaScript через CDN. Вставьте следующий код в HTML <head> , чтобы иметь возможность использовать Bootstrap CSS:

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

Таким же образом мы также включим CDN Devicon, чтобы иметь возможность без особых проблем использовать SVG-иконки популярных языков программирования и технологий:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">

Теперь, чтобы включить JavaScript, вставьте следующий код прямо над концом тега </body> :

 <!-- JavaScript: Above --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Мы начнем с создания заголовка для нашего веб-сайта. Это будет темный заголовок со ссылками на нашу индексную страницу и две другие страницы — «Проекты» и «Журнал чтения», — которые вы можете создать позже:

 <nav class="navbar navbar-dark navbar-expand-lg bg-dark "> <div class="container-fluid"> <div class="mx-4"> <a class="navbar-brand" href="#">Kinsta User</a> </div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Projects</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Reading Log</a> </li> </ul> </div> </div> </nav>

Мы используем оболочку Bootstrap navbar и navbar-expand-lg для создания отзывчивого контейнера, который схлопывается, когда ширина экрана меньше 992 пикселей. Это происходит из-за опции сетки lg . Если вы хотите узнать больше о параметрах сетки, взгляните на страницу макета Bootstrap.

Теперь давайте создадим два адаптивных столбца внутри контейнера: один для бесплатного изображения из Unsplash, а другой для описания себя:

 <div class="container my-4 "> <div class="row justify-content-center"> <div class="col-lg mb-lg-4"> <img src="image.jpg" class="img-fluid" alt=""> </div> <div class="col-lg mx-2 align-self-center"> <div class="my-3"> <h1 class="text-center">I'm a Kinsta User</h1> <p>As a passionate software developer, I am deeply enthusiastic about creating and developing software applications. I am constantly learning and experimenting with new technologies and approaches, and I have a strong desire to create innovative and effective solutions to complex problems. I am driven by my curiosity and love for problem-solving, and I am committed to producing high-quality, well-designed software that meets the needs of users. </p> </div> </div> </div> </div>

Как видите, мы получаем изображение из локального файла, поэтому оно должно быть в репозитории, когда мы отправляем наши изменения в репозиторий GitHub.

Наконец, внутри нашего контейнера Bootstrap мы будем использовать иконки SVG от Devicon, а также немного внутреннего CSS, чтобы выделить наши навыки:

 <!-- Inside the container created above --> <div class="my-4"> <div class="text-center mb-4"> <h1>My Skills</h1> </div> <div class="row "> <style> I { font-size: 4em; } </style> <!-- Skills --> <div class="col"> <div class="text-center"> <h4>WordPress</h4> <i class="devicon-wordpress-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Django</h4> <i class="devicon-django-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Python</h4> <i class="devicon-python-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>GitHub</h4> <i class="devicon-github-original" ></i> </div> </div> </div> </div>

Поскольку мы используем HTML-тег <i> , мы можем рассматривать его как шрифт. Таким образом, мы устанавливаем размер наших логотипов равным 4 em , объявляя его в теге style .

Вот окончательный результат этого простого личного веб-сайта:

Знаете ли вы, что более 50% трафика сайта приходится на мобильные устройства? Поскольку мы использовали Bootstrap, мы сэкономили много кода CSS, а также получили адаптивный веб-сайт, как вы можете оценить ниже.

Вы можете настроить этот сайт так, как хотите. Вот полный исходный код на GitHub, в вашем распоряжении.

Вы даже можете подключить безголовую CMS, такую ​​как Ghost, используя одно из наших полнофункциональных решений для хостинга приложений. Вы можете напрямую подключиться к своему репозиторию GitHub через панель инструментов MyKinsta, и ваш новый сайт будет запущен и запущен за считанные минуты.

Пришло время отправить ваши файлы. Для этого выполните следующие команды на своем терминале на верхнем уровне вашего проекта.

 git add . git commit -m "Added website source code and image" git push

Теперь мы можем использовать этот веб-сайт для настройки нашей страницы GitHub.

4. Публикация пользовательской страницы GitHub

Как только вы отправите index.html в удаленный репозиторий, названный в честь вашего имени пользователя, GitHub автоматически запустит рабочий процесс для настройки вашего сайта в Интернете. Это может занять пару минут, но ваш статический сайт заработает автоматически.

URL-адрес вашего сайта будет примерно таким: https://kinstauser.github.io/

Если через 10 минут ваш сайт не будет в сети, вы можете попытаться внести фиктивное изменение в свой код (например, добавить пробел) и нажать еще раз, чтобы повторно активировать процесс создания GitHub Pages.

5. Публикация страницы репозитория GitHub

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

В качестве примера мы будем использовать сайт технологии HTML, который мы создали в руководстве по Git для веб-разработки.

Самый простой способ — перейти на вкладку «Настройки» нашего репозитория, затем в параметр « Страницы» в разделе «Код и автоматизация».

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

После того, как вы выбрали ветку, выберите папку, из которой вы хотите обслуживать файлы — обычно это корень ( / ) — и нажмите «Сохранить».

Снова подождите несколько минут. Ваш сайт должен быть доступен по адресу "yourusername".github.io/ .

Чтобы отменить публикацию сайта репозитория, вы можете перейти в «Настройки» , затем «Страницы » и нажать на три точки. Вы увидите окно с сообщением Отменить публикацию сайта .

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

6. Настройка пользовательского домена

Самый простой способ настроить собственный домен для страницы GitHub и убедиться, что он работает, — это обратиться к своему провайдеру DNS и создать четыре записи A для IP-адресов страниц GitHub:

 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

Вы также должны настроить запись CNAME с yourusername.github.io в качестве цели. Обычно изменения DNS происходят медленно, поэтому наберитесь терпения, это может занять до целого дня.

После этого перейдите в раздел «Пользовательский домен» в настройках вашего репозитория, введите свой домен, нажмите кнопку «Сохранить» и подождите, пока GitHub проверит ваш личный домен.

Кроме того, если ваш DNS поддерживает это, установите флажок «Использовать HTTPS» , чтобы ваш сайт обслуживался только через HTTPS.

Поздравляю! Если вы дошли до этого пункта руководства, у вас есть статический веб-сайт, размещенный на страницах GitHub бесплатно.

Лучшие практики для страниц GitHub

Прежде чем мы разойдемся, вот несколько рекомендаций, которые следует учитывать при публикации сайта GitHub:

1. Никогда не делайте прямых коммитов в ветке, из которой вы развертываете. Внесите изменения в другие ветки, затем создайте запрос на извлечение.
2. Выберите хороший домен для своего сайта, если вы можете себе это позволить. Это одно из самых важных решений для вашего личного бренда или бренда проекта.
3. Не используйте страницы GitHub в коммерческих целях, например для создания сайта электронной коммерции.
4. Оцените свои потребности. Замечательно иметь возможность опубликовать статический сайт бесплатно, но если вы ожидаете много трафика или хотите использовать сложные функции, лучше всего заплатить за отличный хостинг.

Резюме

Веб-разработка с каждым днем ​​становится все сложнее и сложнее. Статические сайты существуют с момента появления Интернета, и это отличный способ начать создавать проекты.

Из этого руководства вы узнали, что такое статические сайты и как их настроить в Интернете с помощью GitHub Pages. Вы создали простой личный сайт с помощью Bootstrap и опубликовали его как свой пользовательский сайт GitHub. Вы также узнали, как настроить и запустить сайт проекта и как при необходимости отменить его публикацию.

В целом, GitHub Pages — это удобный и мощный способ бесплатного размещения статического веб-сайта. Если вы хотите продемонстрировать свое портфолио, поделиться своими проектами с открытым исходным кодом или начать создавать онлайн-присутствие, GitHub Pages — отличный выбор. И как только вы получите достаточно трафика или будете готовы создать сайт с полным стеком, вы можете легко перейти на другие службы хостинга приложений, такие как Kinsta, не теряя ни секунды.