Блог на GitHub

GitHub Pages — це безкоштовний сервіс від GitHub, який дозволяє тобі публікувати статичні веб-сайти прямо з репозиторію. Статичний  - це сайт, який складається з готових HTML, CSS, JS файлів (без бекенду або бази даних). Такий сайт швидко відкривається і не вимагає окремого сервера.

• можна створити персональний сайт або блог;

• зробити документацію для проєкту;

• хостити портфоліо, резюме або лендинг;

• розміщувати демо-версії сайтів або шаблонів;

• використовувати Jekyll (вбудований генератор сайтів) для зручного ведення блогу.

1. Створюємо новий github репозиторій для блогу

вставити імя репозиторію, і обовязково зробити репозиторій “Public”, та поставити галочку “Add a README file”

Далі ідемо відкриваємо на компютері папку де будемо створювати наш блог, і скачуємо наш репозиторій

git clone https://github.com/kodizhuk/kodizhuk.github.io.git

Я все робитиму через Linux, а точніше WSL (Windows Subsystem for Linux). Так простіше.

2. Jekyll

Jekyll — це генератор статичних сайтів, створений спеціально для блогів та персональних сайтів. Він перетворює прості текстові файли (Markdown, HTML, шаблони) у повноцінний вебсайт.

• Ти пишеш контент у Markdown-файлах, наприклад:
  _posts/2025-06-04-pryvit.md

• Jekyll читає ці файли та твої шаблони (_layouts, _includes) і генерує HTML.

• Отриманий статичний сайт можна опублікувати де завгодно — найзручніше на GitHub Pages, бо він офіційно підтримує Jekyll.

 

.
├── _config.yml         # Налаштування сайту
├── _posts/             # Пости (Markdown-файли з датами)
├── _layouts/           # Шаблони сторінок
├── _includes/          # Вставки в шаблони (наприклад, шапка/футер)
├── index.md            # Головна сторінка

Заходимо в нашу папку яку ми скачали з git:

cd .\kodizhuk.github.io\

і створюємо нову папочку docs, і заходимо в неї

mkdir docs
cd docs

Встановлюємо jekyll

gem install bundler jekyll

створюємо Jekyll сайт

jekyll new --skip-bundle .

відкриваємо файл Gemfile і коментуємо рядок і розкоментовуємо github-pages

#gem "jekyll", "~> 4.4.1"
gem "github-pages", group: :jekyll_plugins

відкриваємо файл .gitignore і добавляємо туди

Gemfile.lock

Щоб перевірити сайт локально можна запустити команду нижче та переглянути сайт по адресі http://127.0.0.1:4000.

bundle exec jekyll serve

Вітаємо, сайт працює.

Комітимо та пушимо зміни на гітхаб

git add .
git commit -m "init jekyll site"
git push

3. Публікація сайту

Сайт опублікується автоматично із гілки main, але при потребі можна глянути на github як він це робить. Відкриваємо Actions

відкриваємо останній pages-build-deployment

тут при потребі можна перезапустити деплой вручну

4. Як добавити новий пост?

В нас є папка названа _posts. В неї і будемо закидати нові статті.

Кожна нова стаття повинна мати назву у форматі YEAR-MONTH-DAY-title.md. Там вже лежить приклад, копіюємо його, редагуємо. Я його назву 2025-06-04-test.md, і закину туди текст:

---
layout: post
title:  "Firts Post"
date:   2025-06-04 11:00:00 +0200
categories: jekyll update
---
Hello World, this is my first post.

[jekyll-docs]: https://jekyllrb.com/docs/home
[jekyll-gh]:   https://github.com/jekyll/jekyll
[jekyll-talk]: https://talk.jekyllrb.com/

Далі комітимо наші зміни на гітхаб.

Після деплою можемо переглянути зміни - на головній сторінці появився наш пост.

 

 

Корисні посилання

• docs.github.com
• thinhdanggroup.github.io
• jekyllrb.com
• aleksandrhovhannisyan.com
• pages.github.com