У цьому матеріалі ми розглянемо як створити і опублікувати статичний сайт на базі сервісів GitHub та Bitbucket.
Створення сайту на GitHub
Найкращим способом для засвоєння технології GIT, на мою думку, буде створення власного статичного сайту, використовуючи хостинг GitHub Pages.
Для початку необхідно створити новий Git-репозиторій:
В полі Repository name вписуємо свій субдомен у форматі: mywebsite.github.io . Тут є один можливий нюанс. Субдомен вказуємо такий самий як і ваше ім’я профілю. Далі налаштовуємо як показано на скріншоті вище — не забуваємо включити Public і обов’язково Readme (він активує main branch вітку, що потрібно для відображення сайту саме у кореневій директорії). Опісля натискаємо кнопку Create repository і потрапляємо на сторінку новоствореного Git-репозиторію. Шукаємо пункт «Settings» й переходимо в налаштування, де зліва в сайд-меню обираємо розділ “Pages” (або GitHub Pages) — перевіряємо опцію Branch, повинні бути виставлені параметри main та root:
Далі в полі Theme Chooser — оберіть бажану тему (подаються на вибір шаблони на базі статичного двигунця Jekyll) для вашого сайту, наприклад:
Після того як обрали, натискаємо “Select theme” і відкриваємо свій сайт за URL-адресою: вашсайт.github.io Має відкритися ваша сторінка.
Примітка: Покрокове створення сайтів на GitHub Pages також описано тут.
Тепер постає питання: Як же працювати з сайтом, наприклад редагувати, додавати вміст і таке інше?
Для цього існують 2 способи: перший — термінал, другий — спеціальна програма-клієнт GitHub Desktop. Я буду застосовувати термінал Linux, де утиліта git вже інтегрована в систему. Також у ролі протоколу передачі даних — буде застосовуватися SSH.
Отже, необхідно спершу згенерувати SSH-ключі (private and public key) задля зв’язку з сервером GitHub — назву ключів бажано залишати по-замовчуванню, тобто id_.pub (інакше ключ не буде розпізнаний):
ssh-keygen -t rsa -b 4096 -C “user@email”
Приватний ключ додаємо у внутрішній SSH-агент локальної системи:
eval 'ssh-agent' ssh-add ~/privatekey
Вміст публічного ключа з розширенням .pub додаємо у налаштуваннях свого облікового запису GitHub.
Примітка: відкликати доданий ключ з SSH-агента можна командою ssh-add -D
Тепер можна клонувати репозиторій з сайтом на свій локальний комп’ютер чи сервер, де ви будете з ним надалі працювати. Для цього перейдіть у свій репозиторій, клікніть по зеленій кнопці Code і просто скопіюйте команду клонування по SSH, а потім вставте її у терміналі додавши git clone:
git clone git@github.com:user/user.github.io.git
SSH-ключ буде автоматично розпізнаний. Якщо ви призначили додаткову парольну фразу до нього, то просто введіть його.
Після вдалого клонування ви зможете перейти в репозиторій і додати перші зміни.
Тепер необхідно ці зміни синхронізувати (закоммітити) з віддаленим репозиторієм на GitHub:
git add --all git commit -m 'коментар до дії' git push
Відбудеться зв’язок з GitHub-сервером, необхідно ввести парольну фразу до SSH-ключа (якщо така задана), тоді зміни будуть відправлені і негайно синхронізуються на сервері віддаленого репозиторію. Щоправда, іноді зміни на сайті можуть відобразитися не відразу — може спрацювати кеш. В такому випадку необхідно трохи зачекати і виконати перезавантаження веб-сторінки з очищенням кешу CTRL+F5.
Ось так відбувається робота з Git на прикладі створення статичного сайту на GitHub-хостингу.
Створення сайту на Bitbucket
Ще один популярний Git-хостинг, заснований Jesper Nøhr у 2008 році. У 2010-му невеличкий startup куплений австралійською компанією Atlassian, яким належать сервіси Trello та Jira.
Bitbucket дозволяє абсолютно безкоштовно створювати як відкриті, так і закриті репозиторії на основі технології GIT. А також інтегруватися з такими популярними інструментами як JIRA та SNYK.
Спробуємо знову створити власну веб-сторінку — цього разу з допомогою хостингу BitBucket Pages.
Щоб розпочати роботу, першим чином необхідно зареєструватись та створити репозиторій:
Принцип створення статичного сайту на BitBucket той самий, що й в GitHub, ім’я репозиторію має співпадати з ім’ям вашого профілю (workspaceID): workspaceID.bitbucket.io
Тепер необхідно клонувати репозиторій на локальну систему.
Генеруємо командою ssh-keygen приватний та публічний ключі. Приватний додаємо в SSH-агент системи:
eval 'ssh-agent' ssh-add ~/privatekey
Публічний ключ додаємо у налаштуваннях акаунту — Personal settings -> SSH keys. Далі переходимо в новостворений репозиторій зі своїм сайтом, тиснемо кнопку Clone, скопіювавши посилання для протоколу SSH. Вставляємо його у командний рядок Linux:
git clone git@bitbucket.org:workspaceID/workspaceID.bitbucket.io.git
Репозиторій з сайту скопійовано — з’явиться папка сайтом. Далі по аналогії з GitHub, наповнюємо і редагуємо папку з сайтом, після чого з допомогою GIT-команд синхронізуємо зміни з віддаленим репозиторієм на Bitbucket:
git status git add -A git commit -m 'comment' git push
Зачекаємо кілька хвилин, аби кеш оновився й перейдемо за URL-адресою:https://<workplaceID>.bitbucket.io
Повинен завантажитись ваш сайт. До речі, зміни в git-репозиторій можна вносити не тільки локально, а й у веб-інтерфейсі Bitbucket. Проте не забудьте опісля синхронізувати зміни зі своєю локальною директорією з допомогою команди:git pull
Корисний cheatsheet по GIT від Atlassian:
Джерела та посилання
- Git Book
- Керівництво по Git від компанії Atlassian
- Основи веб-розміти для GitHub
- Керівництво по GitHub Pages
- Керівництво по Jekyll на GitHub
- Керівництво по Jekyll
- Visual Code
- PHP IDE Storm
- Sublime Text
Автор: © Konrad Ravenstone, KR. Laboratories Research
