Jekyll

С помощью Jekyll (генератор статических сайтов) и GitHub Pages (хостинг, на котором работает Jekyll) можно создать бесплатный статический сайт для своего блога или личного сайта. Лимит размера - 1 ГБ.

Для создания сайта необходимо зарегистрироваться на GitHub:

https://github.com/

Для создания сайта необходимо установить:

Git - https://git-scm.com/download/win

Jekyll - https://jekyllrb.com/docs/installation/windows/

Создание сайта

Вместо username использую твой username на GitHub.

Отправляйся в командную строку:

Win+R cmd

git init username.github.io
cd username.github.io
git checkout --orphan main
jekyll new --skip-bundle .
bundle install
git add .
git commit -m "first commit"
git remote add origin https://github.com/username/username.github.io.git
git push -u origin main

Твой сайт будет расположен по адресу https://username.github.io/

Источник: https://docs.github.com/ru/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll

Информация на сайте

В файле _config.yml заполняешь title, author, email, url, description (его можно удалить). В файле about.markdown прописываешь описание сайта.

Создание страницы

Создай .md файл в папке сайта. Например, page.md. Тогда на твоём сайте появится страничка по адресу https://username.github.io/page. Можешь поместить файл в папку folder. Тогда на твоём сайте появится страничка по адресу https://username.github.io/folder/page.

Создание поста

https://jekyllrb.com/docs/posts/

Форматирование

1) Жирный текст - **жирный текст**
2) Курсив - *курсив*
3) Заглавие (в начале текста):
---
comments: true
title: Заглавие
---
4) Заголовок - # текст заголовка
5) Подзаголовок - #### текст подзаголовка
6) Новый абзац - пустая строка
7) Выделение ссылки - <ссылка>
8) Ссылка - [текст](ссылка)
9) Ссылка на страницу сайта: [текст](/папка/страница)
10) Ссылка туда и обратно:
текст<a href="#note" id="note-back">†</a>

<a href="#note-back" id="note">†</a> текст примечания
11) Ссылка на место в тексте:
[Place](#place)

<a id="place"></a>
12) Содержание:
#### Содержание
[Введение](#introduction)

<a id="introduction"></a>
#### Введение
13) Разрыв строки - <br>
14) Пустая строка (двойной разрыв строки) - <br><br>
15) Примечание:
текст[^1] текст[^2]

[^1]: текст примечания

	текст примечания

[^2]: текст примечания
16) Цитата:
> цитата
>
> продолжение цитаты
17) Маленький текст - <sub>текст</sub>

Блок кода - https://docs.github.com/ru/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks

https://www.markdownguide.org/basic-syntax/

Добавление картинки

Допустим, ты положил картинку image.png в папку images.

Разместить картинку на странице:

![Описание картинки](/images/image.png)

В центре:

{:refdef: style="text-align: center;"}
![Описание картинки](/images/image.png)
{: refdef}

С ссылкой:

{:refdef: style="text-align: center;"}
[![Описание картинки](/images/image.png)](ссылка)
{: refdef}

Обновление сайта

Win+R cmd

cd username.github.io
git add .
git commit -m "new commit"
git push

Можно создать .bat файл и поместить в него эти команды. Тогда коммит можно сделать двумя кликами. Чтобы командная строка не закрывалась сразу после выполнения команд, добавь команду pause.

Запуск сайта локально

Во избежание ошибки, необходимо добавить webrick в Gemfile:

cd username.github.io
bundle add webrick

Запуск сайта:

cd username.github.io
bundle exec jekyll serve

Проходишь по выданному адресу.

Фильтрация зоны навигации (правый верхний угол)

Прописываешь в _config.yml:

header_pages:
  -about.markdown

Изменение размера заглавия

Заходишь в папку minima. На Windows она находится где-то здесь:

C:\Ruby32-x64\lib\ruby\gems\3.2.0\gems\minima-2.5.1

Заходишь в папку _layouts. Копируешь (Ctrl+C) page.html.

Создаёшь папку _layouts в username.github.io. Вставляешь (Ctrl+V). Редактируешь page.html с помощью Notepad++. Удаляешь

 class="post-title"

Указание источника в постах

Иногда я “репощу” некоторые тексты в моих постах. Я предпочитаю указывать источник текста перед текстом. Дефолтный макет постов помещает заглавие наверху, так что я скопировал post.html в папку _layout и удалил кусок кода, который создаёт заглавие.

Markdown файл таких постов выглядит так:

---
layout: post
tag: Reposts
comments: true
title: Заглавие текста
---

Источник: [Название источника](ссылка на источник)
<br><br>

# Заглавие текста