Первые шаги по настройке Триремы

Запус­каем блог на локальном сервере, минимально-­необходимо изме­няем его под себя и игра­емся с цветами и шриф­тами в custom.css

Поднимаем локалхост

Напомню краткую инструк­цию:

  1. уста­но­вите себе Node.js,
  2. скачайте и распа­куйте архив с исходниками (гитхаб),
  3. откройте Терминал в папке trireme-­blog командой cd путь­_­до_­пап­ки,
  4. уста­но­вите все нужные скрипты командой npm install,
  5. вызо­вите npx @11ty/e­leventy -­-­serve,
  6. перей­дите на http://localhost:8080 — там вас будет ждать готовая к изме­не­ниям копия этого сайта.

Всё рабо­тает? Пере­хо­дите к следу­ю­щему разделу.

Подробнее о пункте 3 для тех, кто боится слова «Тер­ми­нал»: откройте разар­хи­ви­ро­ванную папку trireme-­blog и скопи­руйте полный путь до неё. В терми­нале набе­рите cd, через Ctrl+Shift+V вставьте путь, нажмите энтер и пере­хо­дите к пункту 4.

После п. 5 должно вылезти что-то такое

Возможно, вы поль­зу­е­тесь Фаер­фоксом и у вас не откры­вает локал­хост — попро­буйте открыть http://[::1]:8080/ вместо этого.

Открываем редакторы кода

Если всё полу­чи­лось, то в брау­зере по адресу http://localhost:8080 сейчас видно главную стра­ницу сайта Триремы. Не сильно привы­кайте к ней — через полчаса и десяток-­другой изме­нённых файлов её будет не узнать.

Вы без проблем можете настроить Трирему, имея под рукой только Проводник и Блокнот — но будет беско­нечно проще, если у вас будет уста­новлен хоть какой редактор кода. Если у вас такого нет, посмот­рите в сторону ВС Кода, Курсора или Зед. Первые два очень похожи, последние два имеют ИИ-­ассистентов в комплекте. Моя душа лежит к Зед: красиво, легко­весно, быстро, с ИИ, мэтчится с Обси­ди­а­ном,. Версия Зед для Виндовс пока в альфе (я не встретил ни одного бага), её можно скачать тут: https://github.com/deevus/zed-windows-builds

Замечательно мэтчится.

В редак­торе кода откройте папку tri­reme_b­log как новый проект, запу­стите npx @11ty/e­leventy -­-­serve в местном Терми­нале и поехали редак­ти­ро­вать файлы

Правим метаданные сайта

Убедимся, что мы действи­тельно имеем полную власть над внут­рен­но­стями: откройте файл _data/metadata.js и запол­ните его инфор­ма­цией о своём блоге — хотя бы в тех местах, где вы готовы.

export default {
	title: "Три­ре­ма",
	descrip­tion:
		"Ещё один сетап для стати­че­ского блога с кодом 11ty и вайбом Эгеи. Без админки, с тотальной кастомизацией.",
	short­de­scrip­tion: "— ещё один сетап для блога",
	url: "https://trireme.magvag.ru",
	lan­guage: "ru",
	blo­g_homepage: "/notes/",
	blo­g_homepage_­name: "Ману­ал",
	nav­ig­a­tion_pages: [
		{ title: "Ману­ал", url: "/notes/", class: "" },
		{ title: "Фичи", url: "/tag­s/fea­tures/" },
		{ title: "#11ty", url: "/tag­s/11ty/" },
		{ title: "#Обсидиан", url: "/tag­s/ob­sidi­an/" },
	],
	blo­g_­found­a­tion: "2025",
	author: {
		name: "Магомед Вага­бов",
		email: "inbox@magvag.ru",
		url: "https://magvag.ru",
	},
	tag_links: [
		{ name: "фичи", url: "fea­tures" },
		{ name: "нави­га­ция", url: "nav­ig­a­tion" },
		{ name: "опти­ми­за­ция", url: "optim­iz­a­tion" },
	],
};

Всё должно быть инту­и­тивно понятно, кроме необя­за­тель­ного поля class для массива nav­ig­a­tion_pages — задав его, можно стили­зо­вать отдельные элементы меню в шапке ЦСС-­классами.

Запол­нили? Зайдите на стра­ницу локал­хоста в брау­зере — у вас поме­ня­ется как минимум шапка сайта. Конгратс!

Ремонтируем подвал

Теперь откройте _includes/layouts/base.njk и просмот­рите его по диаго­нали (или попро­сите ЧатГПТ сделать это за вас, если не пере­но­сите вид кода). В этом файле описана мини­мальная ХТМЛ-­разметка любой стра­ницы блога: подклю­ченные стили и скрипты, пред­за­гру­женные шрифты, фавы­конка, шапка и подвал сайта.

Давайте отре­мон­ти­руем подвал. Избавь­тесь от моей личной инфы и запол­ните её своей: почта, контакты, etc. Если вашему блогу больше 1 года, уберите { # и # } вокруг —{× year ×}. Не удив­ляй­тесь тому, что в исходном файле на месте × будут %.

<footer class='unvisitable'>
	<p class="footer-text">© { { metadata.author.name } }, { { metadata.blog_foundation } }{ # –{× year ×} # }<br>
	<a href="/rss/">РСС,</a> <a href="https://t.me/magmoyed">телеграм-канал</a><br>
		Есть вопросы по Триреме? Пишите: <a href="https://t.me/magvag">@magvag</a></p>
	<p class="footer-built"> Сделано на <a href="https://trireme.magvag.ru/">Триреме</a></p>

</footer>

Вы, конечно, можете убрать и надпись Сде­лано на Трире­ме, но тогда я расстро­юсь.

Прикручиваем аватар и фавыконки

Фа­вы­кон­ка
В base.njk вы могли заме­тить строчки

<link rel="icon" href="/assets/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="icon" href="/assets/favicon.png" sizes="32x32">

и не понять, где лежат исходные файлы — корневой папки /assets/ внутри trireme-­blog/ ведь нет. Нужная папка в исход­никах живёт на /con­tent/as­sets/ — в (/_site)/assets/ она дубли­ру­ется во время гене­рации папки статич­ного сайта.

Давайте поме­няем вашему сайту фавы­конку и аватар. Сходите в любимый графи­че­ский редак­тор, нари­суйте favicon.png размером 32 на 32 пикселя и опци­о­нально favicon.svg, если ваша фавы­конка, кхм, иконоч­ная. Слишком сильно не старай­тесь, это чаще вредит, чем помо­гает.

Поло­жите эти файлы в /con­tent/as­sets/ взамен ориги­наль­ных. Если svg-­иконки у вас нет, удалите эту строчку.

<link rel="icon" href="/assets/favicon.svg" sizes="any" type="image/svg+xml">

Если фавы­конка локал­хоста не поме­ня­лась — погуг­лите, как сбро­сить кэш сайта.

Ава­тар­ка
Аватарку меняйте по похо­жему алго­ритму. Сожмите любимую картинку до 135×135 пикселей и конвертируйте в .webp формат. Зачем конвер­ти­ро­вать? Потому что ваш изна­чальный .png будет весить под 50 Кб — больше, чем все ХТМЛ, ЦСС и JS файлы на стра­нице разом. Формат .webp весит где-то в 10 раз меньше.

Ходим по страницам не-постов

Весь движ в Триреме проис­ходит в папке /con­tent/, а все заметки и меди­файлы к ним лежат в подпапке /blog/. Боль­шин­ство из страниц в корне папки это скрипты для гене­рации страниц пачками, вроде tag-pages.njk, но вам стоит загля­нуть хотя бы на index.md — из этого файла сгене­ри­ру­ется содер­жимое главной стра­ницы. Вычи­стите его и запол­ните тем, что вашей душе угодно: рассказом о себе, ещё какой лабу­дой.

Если очень хотите, можете выста­вить metadata.blog_homepage на /, а index.md удалить — тогда на главной будет сразу список постов.

Бонус: настраиваем РСС

Если вы следите за сайтами дюжины-­другой авторов путём пери­о­ди­че­ского прокли­ки­вания их главных стра­ниц, то попро­буйте настроить себе РСС-­читалку. Илья Бирман расписал, насколько это удобно.

Если вы хотите оста­вить у блога РСС-­поток, откройте eleventy.config.js, домо­тайте до этого куска и отре­дак­ти­руйте там мета­данные по красоте.

eleventyConfig.addPlugin(feedPlugin, {
	type: "atom", // or "rss", "json"
	out­put­Path: "/rss/feed.xml",
	stylesheet: "pretty-atom-feed.xsl",
	col­lec­tion: {
		name: "posts",
		limit: 10,
	},
	metadata: {
		lan­guage: "en",
		title: "Blog Title",
		sub­title: "This is a longer descrip­tion about your blog.",
		base: "https://example.com/",
		au­thor: {
			name: "Your Name",
		},
	},
});

Не забудьте сходить в файл content/rss.md и убрать напо­ми­налку в конце!

Избавляемся от сирени (ура, кастомизация!)

Я специ­ально поставил сире­невую тему как дефолтную — так ни один человек с блогом на Триреме не избежит открытия public/css/custom.css и настройке стилей под себя.

Видите /* в начале и  */ в конце? Удалите их и разбло­ки­руете нейтральную тему.

/* :root {
	-­-­background-­color: #fff;

	-­-­text-­color: #000;
	-­-­text-­color-­header: #000;
	-­-­text-­color-­highlight: #000;
	-­-­text-­color-­link: #3857ff;
	-­-­text-­color-­link-­active: #f84890;
	-­-­text-­color-­link-­visited: #b24bab;
	-­-­text-­color-­accent: #f84890;
	-­-­background-­color-­highlight: color-mix(in srgb, #ffe300, trans­parent 50%);
	-­-­spoiler-­color: #a6aed7;
	-­-­code-­background: color-mix(in srgb, var(--text-color), trans­parent 95%);

	-­-­font-­size-­text: 1.125rem;
	-­-­font-­size-­caption: 0.825rem;
	-­-­syntax-­tab-­size: 2;
	-­-­article-­width: 48rem;
	-­-­sidenote-­margin: 3rem;
	-­-­transparency-­underline: 80%;
	-­-­star-­mark: "♥";
	-­-­end-­mark: "❦";
} ...

Смена темы возможна потому, что в ЦСС-­бандле (ЦСС-файле со всеми исполь­зу­е­мыми на стра­нице ЦСС-файлами) правила из custom.css нахо­дятся ниже правил из default.css и браузер считает их более важными.

Вы можете подклю­чить и другие шрифты: конвертируйте их .otf/.ttf файлы в легко­весный .woff2, скопи­руйте .woff2 файлы в папку /pub­lic/­fonts/ и добавьте в  custom.css что-то типа

@font-­face {
	font-­family: "PT Sans";
	src: url("/fonts/PTSansRegular.woff2") format("woff2");
	font-­weight: normal;
	font-­style: normal;
	font-­display: swap;
}

@font-­face {
	font-­family: "PT Sans Caption";
	src: url("/fonts/PTSansCaptionRegular.woff2") format("woff2");
	font-­weight: normal;
	font-­style: normal;
	font-­display: swap;
}

:root {
	-­-­font-­family: "PT Sans", -­apple-­system, system-­ui, sans-­serif;
	-­-­font-­family-­monospace: "PT Mono", Consolas, Menlo, Monaco, mono­space;
	-­-­font-­family-­caption: "PT Sans Caption", -­apple-­system, system-­ui, sans-­serif;
}

А вообще чего это я вас ЦСС учу. Вперёд, откры­вайте режим разра­бот­чика в брау­зере, смот­рите классы и иден­ти­фи­ка­торы инте­ре­су­ющих объек­тов, просите ЧатГПТ сделать с ней то, что вам нужно, добав­ляйте изме­нение в  custom.css.

Почему бы сразу не редак­ти­ро­вать default.css? Вы можете так сделать, но это сильно осложнит обнов­ление до новых версий Триремы — в них, разу­ме­ется, будет изме­нённый default.css и без git объеди­нить ваши измения и мои будет затруд­ни­тельно. Будьте паинь­ками, не лезте в дефолт.

Короче, весе­ли­тесь!