Публикация блога с использованием Jekyll

Info

Ниже — «живой» пример блога на Jekyll, который хорошо подходит для GitVerse Pages: с лентой постов на главной, нормальными относительными путями и минимальной, но приятной версткой.

Создайте структуру проекта

В репозитории blog-2026 подготовьте такую структуру:

.
├── _config.yml
├── index.md
├── _posts/
│   └── 2026-01-01-happy-new-year.md
├── _layouts/
│   ├── default.html
│   └── post.html
├── assets/
│   └── css/
│       └── style.css
├── about.md
└── README.md

Этот вариант не привязан жестко к домену и корректно работает с baseurl: _config.yml.

title: "Мой блог"
description: "Небольшие заметки о разработке, продуктах и жизни"
lang: ru
timezone: Europe/Moscow
   
baseurl: "/blog-2026"
   
markdown: kramdown
highlighter: rouge
   
permalink: /:year/:month/:day/:title/
   
future: true
   
plugins:
- jekyll-feed
- jekyll-sitemap
   
# Чтобы не тащить лишнее в сборку
exclude:
- node_modules
- vendor
- Gemfile
- Gemfile.lock

Сделайте главную страницу с лентой постов

Главная будет показывать последние записи — выглядит сразу как «блог», а не как пустой лендинг:

index.md.

---
layout: default
title: "Главная"
---
   
# Привет!
   
Это мой небольшой блог на Jekyll, опубликованный с помощью GitVerse Pages.
   
## Последние записи
   
<ul>
    {% for post in site.posts %}
    <li>
        [{{ post.title }}]({{ post.url | relative_url }})
    </li>
    {% endfor %}
</ul>
   
---
   
Если вы здесь впервые — добро пожаловать 🙌

Добавьте страницу «Обо мне»

about.md.

---
layout: default
title: "Обо мне"
---
   
# Обо мне
   
Здесь может быть описание автора, ссылок и целей блога.

Создайте первый пост

Важно — файл должен называться в формате: YYYY-MM-DD-title.md и располагаться в директории _posts.

2026-01-01-happy-new-year.md.

---
layout: post
title: "С Новым 2026 годом!"
---
   
Первый пост в блоге.
Jekyll прост, как чай, но бодрит надежно ☕️

Настройте шаблоны

Для главной с аккуратной шапкой и правильными относительными путями.

default.html.

<!doctype html>
<html lang="{{ site.lang | default: 'ru' }}">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>
        {% if page.title %}{{ page.title }} · {% endif %}{{ site.title }}
    </title>
   
    <meta name="description" content="{{ site.description | default: page.excerpt | strip_html | truncate: 160 }}" />
   
    <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
        {% feed_meta %}
</head>
<body>
<header class="site-header">
    <div class="wrap">
        [{{ site.title }}]({{ )
        <nav class="nav">
            [Главная]({{ )
            [Обо мне]({{ )
        </nav>
    </div>
</header>
   
<main class="wrap content">
    {{ content }}
</main>
   
<footer class="site-footer">
    <div class="wrap">
        <span>© {{ site.time | date: "%Y" }} {{ site.title }}</span>
    </div>
</footer>
</body>
</html>

Минималистичный для постов, переиспользующий стиль для главной.

post.html:

---
layout: default
---
   
<article class="post">
    <header class="post-header">
        <h1 class="post-title">{{ page.title }}</h1>
        <div class="post-meta">
            {{ page.date | date: "%d.%m.%Y" }}
        </div>
    </header>
   
    <div class="post-body">
        {{ content }}
    </div>
   
    <hr class="sep" />
   
</article>

Добавьте стили

Простой «чистый» стиль:

style.css.

:root {
--bg: #0b1020;
--panel: #0f172a;
--text: #e5edff;
--muted: #9aa8c7;
--accent: #7aa2ff;
--link: #9db6ff;
--border: rgba(255,255,255,0.08);
}
   
* { box-sizing: border-box; }
   
body {
margin: 0;
background: radial-gradient(circle at top, #162049, var(--bg) 60%);
color: var(--text);
font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
   
.wrap {
width: min(920px, 92vw);
margin: 0 auto;
}
   
.site-header {
background: linear-gradient(to bottom, rgba(255,255,255,0.04), transparent);
border-bottom: 1px solid var(--border);
padding: 18px 0;
}
   
.site-header .wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
   
.brand {
color: var(--text);
text-decoration: none;
font-weight: 700;
letter-spacing: 0.2px;
font-size: 20px;
}
   
.nav a {
color: var(--muted);
text-decoration: none;
margin-left: 14px;
}
.nav a:hover { color: var(--text); }
   
.content {
padding: 36px 0 56px;
}
   
h1, h2, h3 {
line-height: 1.2;
margin-top: 1.2em;
}
   
a {
color: var(--link);
}
   
code, pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
   
pre {
padding: 14px 16px;
background: rgba(255,255,255,0.06);
border: 1px solid var(--border);
border-radius: 10px;
overflow: auto;
}
   
.post {
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
border-radius: 14px;
padding: 26px 24px;
}
   
.post-title {
margin: 0 0 6px;
}
   
.post-meta {
color: var(--muted);
font-size: 13px;
}
   
.sep {
border: none;
border-top: 1px solid var(--border);
margin: 28px 0 18px;
}
   
.site-footer {
border-top: 1px solid var(--border);
padding: 22px 0 36px;
color: var(--muted);
font-size: 13px;
}

Включите GitVerse Pages

Инструкцию подключения Pages см. в разделе: Быстрый старт.

Warning

Обратите внимание на пути в шаблонах и стилях. Для корректной работы на разных базовых URL используйте relative_url, как в примерах выше.

Проводник

Публикация блога с использованием Jekyll

Вид графа

Связанные страницы