Jekyll
С помощью Jekyll (генератор статических сайтов) и GitHub Pages (хостинг, на котором работает Jekyll) можно создать бесплатный статический сайт для своего блога или личного сайта. Лимит размера - 1 ГБ.
Для создания сайта необходимо зарегистрироваться на GitHub:
Для создания сайта необходимо установить:
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/
Информация на сайте
В файле _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://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}
Добавление аудио
https://stackoverflow.com/questions/63701944/how-to-embed-audio-into-a-jekyll-blog
Добавление видео
https://github.com/nathancy/jekyll-embed-video
Добавление иконки сайта
https://medium.com/@xiang_zhou/how-to-add-a-favicon-to-your-jekyll-site-2ac2179cc2ed
Обновление сайта
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>
# Заглавие текста
Комментарии
https://help.disqus.com/en/articles/1935528-jekyll-installation-instructions
Аннотации
Существует способ эмулировать заметки на полях - аннотации.
Вставь папку _sass в папку сайта. Добавь в _layout.scss:
.annotated-text {
background-color: transparent;
cursor: default;
position: relative;
display: inline;
}
.annotated-text.visible {
background-color: #ffeeba;
cursor: pointer;
}
.annotation-bubble {
display: none;
position: absolute;
background: white;
border: 2px solid #999;
border-radius: 4px;
padding: 12px;
width: 280px;
box-shadow: 0 3px 8px rgba(0,0,0,0.25);
z-index: 100;
left: 50%;
transform: translateX(-50%);
top: 100%;
margin-top: 8px;
line-height: 1.4;
}
.annotation-bubble::before {
content: '';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
border-width: 0 10px 10px 10px;
border-style: solid;
border-color: transparent transparent #999 transparent;
}
.annotation-bubble::after {
content: '';
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%);
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: transparent transparent white transparent;
}
.annotation-bubble.active {
display: block;
}
#toggle-annotations {
position: fixed;
top: 20px;
right: 20px;
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#toggle-annotations:hover {
background-color: #0056b3;
}
Добавь в post.html:
<script>
document.addEventListener('DOMContentLoaded', function() {
let activeAnnotation = null;
const annotatedTexts = document.querySelectorAll('.annotated-text');
const toggleButton = document.getElementById('toggle-annotations');
let annotationsVisible = false; // Start with annotations hidden
// Create and append bubble element
function createBubble(text, parent) {
const bubble = document.createElement('div');
bubble.className = 'annotation-bubble';
bubble.textContent = text;
parent.appendChild(bubble);
return bubble;
}
// Handle click on annotated text
annotatedTexts.forEach(text => {
const bubble = createBubble(text.dataset.annotation, text);
text.addEventListener('click', (e) => {
e.stopPropagation();
if (!annotationsVisible) return;
if (activeAnnotation === bubble) {
bubble.classList.remove('active');
activeAnnotation = null;
} else {
if (activeAnnotation) {
activeAnnotation.classList.remove('active');
}
bubble.classList.add('active');
activeAnnotation = bubble;
}
});
});
// Close annotation when clicking outside
document.addEventListener('click', () => {
if (activeAnnotation) {
activeAnnotation.classList.remove('active');
activeAnnotation = null;
}
});
// Toggle all annotations
toggleButton.addEventListener('click', () => {
annotationsVisible = !annotationsVisible;
annotatedTexts.forEach(text => {
if (annotationsVisible) {
text.classList.add('visible');
toggleButton.textContent = 'Hide Annotations';
} else {
text.classList.remove('visible');
if (activeAnnotation) {
activeAnnotation.classList.remove('active');
activeAnnotation = null;
}
toggleButton.textContent = 'Show Annotations';
}
});
});
});
</script>
Добавь в Markdown поста:
<button id="toggle-annotations">Show Annotations</button>
Аннотирование:
<span class="annotated-text" data-annotation="Annotation.">Piece of the text.</span>