Генераторы статычных сайтаў з нуля: слоўнік, історыя та першая стварэння сайта
Выучыце тэрміны, якія, як прыпускаюць дакументы SSG, вы вже знаеце: як размішчаюцца лейауты, частковыя элементы і фронт-матэрыялы, звідкі походзяць генераторы та як выбраць однаго без працяў.
Генераторы статычных сайтаў абяцваюц простае рашэнне: пісаць паспекты на Markdown, трываліцу тэгаў у верхней і ніжнай часткі сайта размешчаць у адным месца, і такім чынам стварыць шырокаспектны веб-сайт з простых файлаў. Для багато новачакоў рэальнасць выглядае як стена незрозумелага жаргану, тэрмінал, які выдрукоўвае стэк-трэйсы, і дасягнення, якія прыпускаюць наявнасць гадоў досвіду. Шырокі практычны кялік закрывае гэтую прыему з самага пачатку. Вы дазнаецеся, якія навыкі трэба маты пры пачатку работы, што на самай працоўцы значыць кожны часта з’являючыся тэрмін у дасягненнях генератора, як разныя элементы типовага проекта Eleventy взаімаўязна прыяжджаюць, звядзе куды выйшлі гэтыя інструменты, і якія легкія альтэрнатывы існуюць, калі популярныя варыянты здаюцца занадта складнымі.
Перш чым выбраце генератор: навыкі, якія ўсё час знадобяцца
Генератор статычных сайтаў (SSG) — это шар абстракцыі, які знаходзится над веб-сторанкамі. Якщо вы ніколі раней не стваралі веб-сторанку вручную, этот шар абстракцыі скрывае самэ тое, што вам патрэбна зразумець, калі ўтвараюцца проблемы. Для вашых першых калькі сайтаў кращым спосабам навучэння будзе самастоятельная рэчыпка HTML і CSS. Вы відчуўце труднасці, якія выклікае копіюванне той самай навігацыі ў дзесять файлоў, і самэ гэтыя труднасці пазней змусяць вас скорыстацца генератарам.
Практычна кожны генератор па звычці выказвае адчуткі, што вы вжо впэўненае панаванне маеце над HTML і CSS, часамі таксама над адной часткай JavaScript, дзеякімі загальнымі ідэямі програмавання, такімі як зменны і цыклы, командной лініёй, а таксама зазвычай над Git. Нікому не трэба спачатку опанаваць усё гэта. Справа ў тым, што базовая ментальная модель кожнага шару ператварае загадковую памилку падчас стварэння у проблему, якую можна рашыць, а не ў таўну.
Шлях навучэння з бесплатных рычоў
Наступныя рэсурсы добра працуюць, як правіло, у такой спрадзе. Стварайце маленькія тымчасовыя сайты па ходу, а не спрытварайцеся з гэтым спискам як з домашнім завадам, які трэба адгукнуць першым.
- HTML: кніга «HTML for People» напісана для чытачаў, якія не маюць жаднага досвяду програмавання. Калі вам патрэбна большая глыбіна інформацыі пра сэмантычныя элементы та доступнасць, перайдзіце да модуля MDN пра структураванне контэнта.
- CSS: модуль MDN пра базы стайлізавання раскрывае такія паняйненні, як модэль касеты та макет. Якщо вам больш падходзяць практычныя завданні, курс freeCodeCamp пра адпаведны дизайн практычна паказвае HTML, CSS, доступнасць та адпаведны (фактычна, прыстосованы для мобайла) дизайн.
- JavaScript: модуль MDN пра скрыпты ўзаемна супараджуецца з матэрыяламі пра HTML та CSS, а навчальная програма freeCodeCamp пра JavaScript є інтэрактыўной альтернатываю.
Якщо вы воліце адзін цэнтр знаёмасцей заместа скупкі ресурсоў, навучальная частка MDN пакрывае HTML, CSS, JavaScript і асновы прыёмоў браузера ў аднай навучальной програме. web.dev, The Odin Project і w3schools — ўсё тыя ж варыянты.
Зберагце правильную перспективу: асобісты веб-сайт зазвычай ёсць хобі-праект. Нетрадыцыйныя рашэнняі і памылкі ўскладнююць процес, а кожны маленькі сайт, які вы завершылі, даўае новыя навыкі, якія можна выкарыстоўваць у наступным проекте.
Слоўнік, якія, за прыпускам дакументацыі static-site, вам вядомы
У дакументацыі генератораў часта вжываецца дзесяткі тэрмінаў, як бы всі ўжо вучылі іх з нараджэння. У этай частцы яны апісаны простым языкам, а кожны з іх паказаны ў маленькім, конкрэтным файле з проекта Eleventy (11ty).
Маркап, стыль і прыменне: HTML, CSS і JavaScript
HTML (HyperText Markup Language) апісвае структуру і значэнне докумэнта: загаловкі, параграфы, спялунакі, адпрыемкі, лісты. Це не язык программавання. Ён не можа прыміць рашэнні чыста сам, а таксама не можа чаго-небудзь павтарыць; ён проста апісвае тое, што знаходзится на старонцы. Найменшая корисная старонка мае doctype, <head> з наборам симвалаў і заглавлём, а таксама <body> з контэнтам. Заўважыце, што тут нічога не кантролюе кольоры чыста шрыфты, таму браўзер вяртаецца да своіх стандартных стыляў.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This page has a <a href="https://brennan.day">link</a> and a list:</p>
<ul>
<li>HTML gives a page its structure.</li>
<li>There's no CSS yet, so this is all default styling.</li>
</ul>
</body>
</html>Copy
Якщо запісаць гэта як index.html і ачыніць у будзь-ям браўзеры, вы отрымаеце працоючую веб-старонку, без патрэбы ў серверы. (Знак Copy пасля заканчальнага тэга ёсць залишкам з кнопкі копіювання і не ўскладневае маркап.)
CSS (Cascading Style Sheets) кантролюе тое, як практычна структура паказваецца: кольоры, адстаўкі, тыпаграфія і спосаб, яким макет прыстосоўваецца да разных размераў экрана. Наведзеныя нижэй правілы выбіраюць шрыфт з серифамі, обмежваюць шырыню тексту, каб лініі заставаліся чытальнымі, центруюць столбец з автаматычнымі маржамі, а таксама надаюць сторанцы теплага фона і темных кольераў тексту. Загалоўкі маюць свае сабстоячы правілы кольору.
body {
font-family: Georgia, serif;
max-width: 35rem;
margin: 2rem auto;
padding: 0 1rem;
background: #fff2ce;
color: #02005d;
}
h1 {
color: rebeccapurple;
}Copy
Размешчэнне гэтых правілаў у элементе <style> ў часці <head> паказанай раней сторанцы зміняе яе выгляд без змены жаднае слова ў HTML. Гэта раздзеленне контэнту і практычнага адображэння є ключовым прынцыпам у всіх генераторах статычных сайтаў.
JavaScript — это язык программавання, які выкарыстоўваюць браузеры. Ён дае можлівасць ствараць певную актывацыю: реагаваць на клікі, змянюваць контэнт, запрашаць даныя. Адночасна ён являецца найпростым спосабам зробіць простую сторанку важкай і повольной, таму хорашым стандартам для персональнага сайту є выкарыстоўванне яго толькі там, дзе ён чыста неабходны. У прыведзенай нижэй частцы коду шукаецца элемент з ідентыфікатарам surprise, слухаецца за клікамі на яго, і пад час кліку заменяецца тэкст першага <h1>.
const button = document.querySelector("#surprise");
button.addEventListener("click", () => {
document.querySelector("h1").textContent = "JavaScript did this!";
});Copy
Ёжы ўсё гэта працавало, сторанка патрэбуе адпаведны <button id="surprise">. Без яго querySelector вяртае null, а вызов addEventListener выклікае памылку, што є частай першой памылкай.
JavaScript таксама выкорыстоўваецца на стороне генератора, а не толькі ў браузеры. Багато SSG-аў самі напісаны на JavaScript і выкорыстоўваюць яго для запуску процеса кампілявання чы адмацавання шаблонаў. Eleventy нават дазволяе, каб цэлы шаблон быў файлам JavaScript: любой строкавы тэкст, які вяртае экспортаваная функцыя, стае зместам старонкі.
// hello.11ty.js
module.exports = function () {
return "<h1>Hello from JavaScript!</h1>";
};Copy
У гэтым прыкладзе выкарыстоўваецца CommonJS module.exports. Нявялікія версіі Eleventy таксама падтрымліваюць синтаксис ES module (export default), таму пераканайцеся, які стыль выкарыстоўвае дакументацыя да вашай установленай версіі.
Што на самае працо значэ „статычны“, „кампіляванне“ і „выходны“
- Статычны адміністрацыя означае такую форму выдачы: сервер передае файл абсалютна такім, які ён зберагаецца, у працоўны час не ствараючы новай адпаведзі для кожнаго візітара. Статычная стораніца можа ўсё ж такі мець JavaScript і яе можна рэдагаваць і знову размістыць. Гэта нічога не значыць пра тое, што стораніца будзе нудной або застынуць назаўсёды.
- Дынамічны адміністрацыя означае, што адпаведзь вычысляецца ў момент запиту. Класычная система керавання контэнтам запытае базу дадзенаў і складае стораніцу занова ў кожны раз, калі хтось яе адвідае. Інтернет-магазін — гэта класычны прыклад, таму што асортымент і кошыкі постаюць у стані постоянных змян.
- Генератор статычных сайтаў — это програма, якая чытае выхідны матэрыял (контэнт у формате Markdown, шаблоны, настройкі, адпраўленыя зображэння і іншы ресурсы) і стварае готовы набор файлаў HTML, CSS, JavaScript і зображэнняў, якія можа выдаць будзь-який сервер для статычных сайтаў.
_site/, public/ або dist/. Як правіло, яны не рэдагуюцца вручную, таму што наступны build яны заменяецца.localhost:8000 і часта автаматычна перзбудовваецца кожны раз, калі вы зберагаеце файл ісхідных даных.Файлы настройкі і даны сайту
- Файл налаштавання мае ў сабе параметры для всіх разделаў сайту, такія як назва сайта, базовы URL, меню, катэгорія выходных дакументаў або параметры падачы. Назвы і форматы разлічаюцца залежна ад інструмента:
config.yml,hugo.toml,eleventy.config.jsі іншыя. - YAML — это даследны для людзей формат дадзеных, які часта викорыстоўваецца для налаштавання і падготовкі матэрыялу. Ён дазволяе выражаць строкі, цыфры, спісы і пары «клуч-значэнне». Індентацыя мае значэння, таму адна неправільна разметка можа спанаваць процес стварэння сайту.
- Пара «клуч-значэнне» — это налаштавання, якое складаецца з назвы і значэння, напрыклад
title: My post. У YAML група такіх пар называецца картою. - Параметр або выбар — это налаштавання, якое вы передаеце командзе або запісвайце у файле. Прапуск
--serve, які вы пазнаеце пазней, є адным з прыкладаў.
У Eleventy файлы ў папаке _data стаюць глобальнымі дадзеннямі, доступнымі для кожнага шаблону. Файл src/_data/site.json зберагае інфармацыю, яую бачаюць візітары: назву сайту, короткі апісанне, автара, публічную URL і мову.
{
"name": "My Cool Blog",
"description": "Where I write about whatever interests me.",
"author": "Your Name",
"url": "https://example.com",
"language": "en"
}
Кожны ключ ператвараецца на зменную шаблону. Лейаут, які містіць {{ site.name }}, атрыбуе значэнне „My Cool Blog“, таму перайменаванне сайту адбываецца праз правкі ў одной лініі, а не праз пошук у кожный сторонцы. Jekyll зберагае аднаковы тип інфармацыі ў config.yml, а Hugo — у hugo.toml; ідея тая ж, толькі файлы разныя. Згадайце, што JSON є строгім форматам: додатковыя коміры пасля последней ентраты є синтаксічным бягам, і гэта момент стане важлівым пазней у гэтым кярыранце.
Лейауты, частковыя элементы і шаблонаванне
- Шаблон — это файл, які можна викорыстоўваць знову і які визначае структуру сторанцы, а таксама містіць месца для тых частак, якія можа зменіцца.
- Макет — це шаблон для цэлай сторанцы: заявленне мовы,
<head>, заголовак, основная частка зместу і футер. - Частковы элемент — это маленькі фрагмент, які можна викорыстоўваць знову, напрыклад панель навігацыі, футер або блакат метаданых паспэкту. Уключэнне — це інструкцыя, якая запоўняе адны фрагмент у іншы файл.
- Мова шаблонаў — это сынтаксіс для выварання змэнных, цикліваў над даннымі і прыняцья рашэнняў у шаблонах. Частымі прыкладамі ўсунулі Liquid, Nunjucks і шаблоны Go.
- Умовнае правіла — это правіла типу «так» або «нет» у шаблоне, напрыклад «вываць адпаведныя зображэння толькі калі паспэкт ўказаў такое».
Базавы лейаут, _includes/layouts/base.njk, напісаны на Nunjucks. Заголовак складаецца з сабэтнага заглавка сторанкі і глобальнага назвы сайту; два тэгі include дадзеюць часткі заголовка і футера, а выроблены тэла сторанкі выдрукаваецца ўнутрь <main>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ title }} | {{ site.name }}</title>
</head>
<body>
{% include "partials/header.njk" %}
<main>
{{ content | safe }}
</main>
{% include "partials/footer.njk" %}
</body>
</html>
Фільтр | safe мае важлівэ значэнне. Nunjucks за замовчанням экрэніруе выходны тэкст, што прыводзіць да таго, што HTML паспэкту стае виднымі тагамі. Пазначыць content як безпечны значыць сказаць двіжку, што гэты строк ўзяты з доверлівага, вяліканутага раней HTML. Яго трэба вжываць толькі для контента, які вы кантролюеце.
Самыя часткі ўсьмо толькі фрагменты HTML, які можаць выкарыстоўваць зменныя і ўключаць іншыя часткі. Заголовак пераводзіць на галоўную сторону за дапамогай назвы сайту і запоўнюе навігацыю; навігацыя — цэлае спісаў лінкаў; футер выдрукоўвае рэчы пра правы на адпаведнасць з іменем авара з дадзенаў сайту.
<!-- partials/header.njk -->
<header>
<a href="/">{{ site.name }}</a>
{% include "partials/nav.njk" %}
</header>
<!-- partials/nav.njk -->
<nav>
<a href="/">Home</a>
<a href="/archive/">Archive</a>
<a href="/about/">About</a>
</nav>
<!-- partials/footer.njk -->
<footer>
<p>© 2026 {{ site.author }}</p>
</footer>
Ёсць так, як заўязуюцца гэтыя элементы. Калі паста ў своім фронт-матэрыяле заявляе layout: base.njk, Eleventy адрасоўвае пасту, а потым размешчае рэзультат там, дзе ў лейауте знаходзіцца {{ content | safe }}, і кожны тэг include заменяецца на яго частку. Змініўшы навігацыю раз, кожная сторонка на сайте перадае гэтыя змены праз наступную компіляцыю. Адменаванне такога копіювання-выклеювання ёсць галоўным адказам на існаванне SSG-аў. Є адна маленькая прычына для аберагання: год заўважаная у футеры ёсць жорсткая, таму яна не будзе сама апошневацца, чым толькі як вы не заменіце ёё на зменную.
Файлы з контэнтам, Markdown і фронт-матэрыял
- Файл з контэнтам — это исходны файл для старонкі або паспэўка. Найбольш распаўсюджаны формат — Markdown, але багато генератораў прыманяюць HTML, звычайны текст або іншы форматы.
- Markdown — это лёгкі язык маркапана, у якому знакі пунктуацыі выступаюць за структуру:
#для загалоўкаў, звёздкі для акцэнтавання, галочкі для спісаў. Генератор перакладае яго ў HTML. - Фронт-матэрыял — это блок метаданых у самым верхнім часткі файла з контэнтам, як правіле абмежаны двумя рядкамі з трох галочак. У яму можа быць заглавле, дата, тэгі, назва макета аб пазнака чернавіка.
- Метаданы — это апісовая інфармацыя пра элемент контэнту: заглавле, аўтар, дата публікацыі, тэгі, апісанне, канонічны URL аб выбраны макет.
Файл posts/my-first-post.md, прыведзены нижэй, аб’яднае ўсё гэта. YAML-фронтматыры задаюць заглавле, дату, два тагі, макет і пазнаку чернавіка. Тэкст складаецца з звычайнага Markdown і синтаксішчыны шаблонаў у стыле Nunjucks, якая выводзіць заглавле і у залежнасці ад умов паказвае рэченне.
---
title: My First Post
date: 2026-09-22
tags:
- posts
- cats
layout: post.njk
draft: false
---
Welcome to my blog! This paragraph is **Markdown**.
This post is called "{{ title }}".
{% if draft %}
This sentence only appears while the post is a draft.
{% endif %}
Eleventy чытае фронт-матэрыял пры выкананні будь-чаго. Ключ layout выбірае шаблон адгуклаўвання, тэг posts дадае файл у колекцыю пад назвай posts (якая можа быть выкарыстоўваная сторонай архіва для цыклу), а date задае порядак сортавання па датам. Усё, што знаходзіцца пасля заканчальных галочак, — это тэла. Паколькі значэнне draft тут ў значэнні false, у выходным матэрыяле не павінна з’являцца умовная запаведзь. Заўважыце, што ключ draft не мае вбудованага значэння ў Eleventy; адключэнне чернавіковых версіяў ад фінальнай версіі сайту — гэта тое, што трэба настаўіць самостоятельна.
Хостынг, бэкенды і умовы развяртання
- Хостынг — это служба або машына, якая зберагае вашы файлы выходнага матэрыялу і робіць іх доступнымі ў Інтэрнете. Гэта аднае пытанне з напісаннем сайту і кераванням версіямі.
Контроль версій на адной сторанцы
- Контроль версій фіксуе змяны ў файлах з часам, так што вы можете пераглядаць історыю, парабяляць версіі, вярнуцца да паканальных станоў і сааверцаваць.
- Git — адна з прыемных програм для контролю версій. Яна работае выключна на вашым комп’ютеры і не патрабуе онлайн-сэрвіса для фіксаціі історыі.
- Рэпазітарый (repo) — это папка проекта, історыю якой керуе Git.
- Коміт — это захаваны кадр змян, часта з паштучкай, якая іх апісвае.
- Рэмоцыйны рэпазітарый — это іншая копія рэпазітарыя, якая часта размешчаецца на Codeberg, GitHub, GitLab або вашым сэрверы.
- Push адрасуе вашы локальныя збережаннія на удалённую базу; pull запошчае збережанні з удалённой базы і з’еднае іх з вашай локальной копіяю.
- Сэрвісы Git hosting храняць репазітарыі і частаўка додаюць адслежванне проблем, перагляд коду і автаматызаваныя запускі. Яны зручныя, але яны не ўтвараюць сам Гіт, і Гіт працуе чыста без яных.
Публікацыя новага пасткі з Гітам з тэрміналу выкарыстоўвае чатыры каманды. Першая выканана толькі адназнач на проект; іншыя тры — это ўседзёны цикл стэйджавання файлу, запісу снімка і адправкі яго на удалённую базу.
git init # turn this folder into a repository (once)
git add posts/new-post.md # stage the file for your next commit
git commit -m "Add new post" # save a snapshot with a message
git push # copy your commits to the remoteCopy
У практыцы git push працюе толькі пасля настройкі удаленага рэпазитарыя, напрыклад за дапамою git remote add origin <url>, і для першага адправлення фарбачка зазвычай патрэбна команда git push -u origin main або падобная. Калі гэта настроена, дастатнека простае git push.
Звядзе надышліліся генераторы статычных сайтаў
Калі ўжо є адпаведныя тэрміны, історыя становіцца зразумелей, таму што кожна наступная версія інструментаў дадавала адны з вышэйзгаданых прынцыпаў.
Раздзелэнне напісання тэксту і маркапаў існавала задоўга да падмовы "генератор статычных сайтаў". HSC, скрацанне ад "HTML Sucks Completely", быў прэпрасэсар HTML, выданы Томасам Аглассінгерам у 1996 годзе. Ён вялікі час раней, прыблізна за дзесяць гадоў да таго, калі гэтая категорыя пачала называцца, вядомаў функціі такія як інклюзыі, умовные выразы та перакананне наявнасці супакоўваючых лінкаў.
У паслявяршыні 1990-х і 2000-х гадоў большасць людзей, якія хацелі стварыць блог, выбіралі хоставаныя, дынамічныя сервісы на кшталт Blogger, LiveJournal чыста Open Diary, або інсталавалі програмнае забезпечэнне на аднойчынных базах дадзеных, такія як WordPress. Movable Type – платформа на мове Perl, створаная Бенам і Мена Тротт у 2001 годзе – выбрала іншы падход: кожны раз, калі вы публікувалі матэрыялы через яе веб-інтерфейс, система перзапускала блог у вачынных статычных файлах HTML. Карыстальнікі ніколі не паводзіліся з тэрміналам, пры тым чытальнікі отримвалі статычныя сторанцы. Це давала прынтэсы статычнага выходу людзям, якія ніколі не будуць пісаць команды для стварэння контента.
Nanoc быў створаны у 2007 году Дэнісам Дэфрейне пасля таго, як системы керування контентам на аснове Ruby паспелі зусім занадто медленная на яго віртуальным серверы з 96 MB памяці. Ён увёў можлівасць настройкі дыяграм, метаданых для кожнай стороніцы, падтрымку Markdown і дапаможныя праграмы. У грудзені 2008 году спадчык заснавальніка GitHub Том Престон-Вернер выкліканы незадоволенням важкімі двойчыкамі для блогавання адкрыў Jekyll. Jekyll выкарыстоўваў ідеі Nanoc і даў два ключовыя функцыі: YAML-файлы з інформацыяй на пачатку кожнага файла з контентам, а таксама можлівасць стварэння блогу без дадатковых налаштавань, так што папка з файламі у формате Markdown стаўала блогам. Разам з ям выкліканы GitHub Pages як безкоштовны сервіс для статычнага хоставання, і гэта спалучэнне больш за ўсё інша спрабавала падняць SSG-ы на рівень мейнстриму.
Практычна ўсё, што было створана пасля таго, — это пераадрактуванне таго ж прыему ў іншых мовах. Octopress, які зараз не падтрымваецца, і Middleman продавалі лінейку на базе Ruby. Pelican створаны на Python, а Hyde будуецца на Laravel.
У ліпені 2013 года Стів Франція стварыў Hugo — програму на Go, якая распространяецца у вачынку скомпіляванага бінарнага файлу. Параўняючы з Jekyll, тут не было неабходнасці інсталавацыі средовышча Ruby чы падбору версій gem, а швальнасць кампіляцыі, якая вырахоўвалася за секунды нават для сайтаў з тысячамі стораніца, стала яго асоблівасцю.
У канцы 2017 года Зак Ледерман выклікнуў Eleventy (11ty) — гнучкую альтэрнатыву Jekyll, якая працюе на JavaScript і інсталюецца через npm. Jekyll прыкрепляе вас да Liquid; Eleventy падтрымлівае вялікі список форматаў шаблонаў:
- маркап і контэнт: чысты HTML (
.html), Markdown (.md) і MDX (.mdx)
.11ty.js, TypeScript (.ts), JSX (.jsx) і WebC (.webc).njk), Handlebars (.hbs), Mustache, EJS, Haml і Pug.scss)Дзякуючы дэйскрэтным форматам, для ўжывання інодзе трэба плагін або дадатковая настройка, таму перад тым, як паверыць у які-небудзь з іх, пераканайцеся ў актуальных дасведчэннях Eleventy. Якщо вы вядомы ў паводзе конкрэтнага языка програмавання, каталог генератораў на Jamstack.org дапаможае вам выбраць інструмент, напісаны на гэты язык.
Большая канцэларыя генератораў у тым каталозе не мела новых выданняў ўжо калькі гадоў, і для персональнага сайту гэта часта ёсць прыемна. Статычны сайт не мае коду з баку сервера чы рэгістру, якія былі б доступныя адвядчыкам, таму ўсунутая найпашырэнейшая атакавальная плошча дынамічных блогаў. Якщо новая версія вашага генератора дадае функцыі, якія вам не пасабліваюць, вы можете продаваляць вядомы, і ён будзе працаваць далей, ствараючы той самы сайт. Аднак трэба памятаць, што «жадных апдэйтав» не значыць «жадных рызыкаў»: залежнасці, якія викорыстоўваюцца пад час стварэння, апарат, на яком выкааняецца стварэнне, і любы JavaScript трэціх апрэтакаў, які вы убудовваеце, таксама заставляюць падыходзіць з увагай, а неадрэсаваны інструмент можа з часам перестаць правільна інсталавацца на новейшую аператыўную сістэму чы мовны рантайм.
Git рашае два прыбліжэння, а вам не патрэбны ніякія з іх
Наводчыкі для пачаткуючых практычна завжды радзяць викорыстоўваць Git. Частка гэтага — это проста звычка сярод разработчыкаў, але частка таксама стоіць у історыі: Jekyll, першы шырока адразуўваны SSG, пачаў свою дзейнасць як проект у GitHub. Размешчэнне на GitHub, Codeberg чы GitLab адпавядае на запитанне «Дзе знаходзяцца маі файлы?» адпаведдю «У репазітарыі». Сэрвісы на кшталт Neocities чы Nekoweb адпавядаюць на яго інакш: вы завантажваеце файлы через сам сайт.
На хостынгу на базе Git, такім як Codeberg Pages чы GitLab Pages, нават змены, здабытыя через веб-інтерфейс, стаюць комітамі і падаюць у репазітарыю ў тылу. Вы викорыстоўваете Git, незалежна ад таго, пісваўлялі вы калі-небудзь команду Git чы ні.
Якщо вы самі хостуеце сайт, файлы знаходзяцца на вашай сабе машыне, як правіло, у каталозе на кшталт /var/www/html у Linux. На спяльнай машыне, такой як сервер Tildeverse, яны знаходзяцца ў публічнай папке вашага акаунта; распашчытны спосаб працы там — ствараць файлы локальна і выкарыстоўваць rsync, каб скопіяваць ўсё гэта на спяльную машыну, дзе яны автаматычна выдаюцца.
У такіх наладах корыстна раздзеліць два завадзбы, якія выкаанае Git:
- зберагчы історыю версій, ўжо каб можна было анулюваць некальканосны праверк і пазначыць, што і калі змянілася
- падаць створаныя файлы туды, звідку яны выдаюцца
Ніяка з цых задач не выклікае абсалютнай прытэпкі да викорыстання Git. rsync, кліент FTP чы адформа для загрузкі праз браузер — усе гэта можа ідеальна прыступіць да публікацыі сайту, а звычныя резервныя копіі можу служыць заменай історыі змян у маленькім персональным проекте. Git популярны таму, што ён можа выконваць обе задачы адночасна, не каштуе нічога і падключаецца да безкоштовных хостынгав, таму ён являецца найпростым рашэнням, а не обавязковай умовай.
Разлік межа адносна простым пляном і рэальным стварэнням
На паперы архітэктура генератора блога ўсё такі проста і адносна чыста:
- Статті знаходзяцца ў файлах формата Markdown у папке
posts/ - Шаблон у папке
layout/ўтварае ўпорядкуваны відбітак статэй - Этот шаблон складае фрагменты HTML з папаки
partials/, такія якheader.htmlіfooter.html
config.yml (альбо адэкватны файл) у корні проекту мае параметры для всіх сторанак, такія як назва чыста кольоры"2024-03-14-my-post-title.md"Частка, якую не паказвае дыяграма, — цэх працы. Ператворэнне гэтых папак у ствараную сторанку, напрыклад, у _site/, выкалікае патрэбу ў рантайме мовы програмавання для запуску генератора, і кожны звязак у гэтым ланцугу ёсць месца, дзе можа выйсці проблема.
Адаптаваныя інструменты стараюцца спрытаць гэта, выкорыстоўваючы адну команду, такую як hugo build або npx @11ty/eleventy --serve. Паўтаральны параметр --serve у командзе Eleventy запускае локальны сервер развіцця і перзбудоввае сайт праз кожную зберэжанню вучоркі, у працоўны час не выходячы з режыму перзбудовы. Самэ гэта шырокае вярненне інформаціі робіць рэдагаванне статычнага сайту практычна такім жа мгновенным, як і рэдагаванне жывой сторонніцы.
Платформы для разгортання распространяюць тую ж ідею на хмару. Netlify чыра самастаўляемая Coolify запускаюць процес стварэння сайту на аддаленай машыне, вядомаюць, які інструмент вы используеце, выпалююць вялікія команды і публікуюць папку з рэзультатамі за адресай на кшталт yoursitename.netlify.app. Канцэптуальна гэта тое ж, што і аплодаванне рукапіснага HTML у Neocities і отрымлэнне yoursitename.neocities.org, толькі стварэнне сайту вядзецца на ўсёй іх машыне. Падобныя рэшэнні праслужваюць surge.sh, GitHub Pages, Vercel і таксама продукт Cloudflare — Pages; якое з іх падходзіць, залежыць ад таго, насколькі вы цэніце зручнасць проты незалежнасці ад вялікіх платформ. Якщо вы хочаце пабачыць цэлы процес разгортання з початку да канца, наша інструкцыя па аплодаванню маленькага веб-сайту у Cloudflare пакрывае адны конкрэтны прыклад.
Чаму адзін заканчоўны кома можа зруйнаваць усё
Кожна з эйх выгод апоўнюецца падазрамі: вашы файлы правільныя, среда выканання мовы установлена чыста, і вам зручна працаваць у тэрмінале. Разработчыкі часта перацэнююць, насколькі распашчастым є гэты апошні навык, пры чым такая слепа зона добра паказвана ў каміку XKCD.
Процес складання таксама ўразламны. Адна маленькая граматычная памылка ў важлівым файле, нават такая простая, як зайвы кама, може завернуць установку чыста складанне. Што горэ, паведамлення пра адзінку зазвычай надходзіць з самай среды выканання чыста парсера, а не з генератора, таму яно сформульавана ў тэрмінах програмавальнай мовы, а не вашага сайту. Рэалістычны прыклад: файл дадзеных у формате JSON з заканчоўным кома пасля апошней власнасці выклікае неудачу складання ў Netlify з трэйсам парсера, у яком ніколі не паводзіцца мова пра самы файл, і ў яком ужываюцца тэрміны, зразумелы пачаткуючым.
Калі людзі бачаць такі рэзультаты, яны частаюча прымуяць рашэнне пісаць HTML вручную, перайсці на хоставаныя CMS або взагалі здацца з ідеяю стварэння сайту. Апошні варыянт — гэта справжня втрата. Калькі прыёмы можаць зменшыць шансы на такі рэзультат:
- раніце чысткаванне локальна на развіцкам сервере, прычым перад аплодаваннем, ўсёлякія браки будуць видны на вашам экране першымі
- зменяйце адну рэч за раз, тады найняўжэйшая змена стане явным падазроўнікам, калі ўсё зламаецца
- чытайце паведамленні пра брак з ніжней часткі і шукайце назву файлу і номер рэядка, якія зазвычай ёсць справжнімі падказкамі
- пераканайце JSON і YAML за дапамогою расширэння для рэдагувальніка або інструмента лінтара, таму што гэтыя форматы ствараюць велікую частку бракоў у пачаткавіках
- часта зберагайце рабочыя станы, тады вы завжды зможаце вернуцца да пасляпэўнай версіі, якая чысткавалася
Навчанне праз модыфікацію шаблона
Апробаваны спосаб з’явіцца ў мастэрстве стварэння генератора — это взяць готовы стартавы проект або тэму, запусціць його роботу, а пасля поступова зменяць його элементы, пакуль не разумееш кожны файл. У канцэ наступае момент, калі ты ведаеш достатнька, каб сам стварыць такі проект з нуля. Хорашыя стартавыя проекты для гэтай меты маюць калькі асоблівасцей: чытабельную дакументацыю, малая колькасць файлоў і адны явны месца для кантэнту і налашоўкаў. Тыповыя прыклады выглядаюць так:
- стартавы проект Hugo, дзе пасты знаходзяцца ў катэгоріі
/post, а налашоўкі сайту — у файлеhugo.toml; можна таксама викорыстоўваць функцыі IndieWeb, такія як microformats2 і апрануты h-card - стартавы проект Eleventy, дзе пасты знаходзяцца ў катэгоріі
/posts, а деталі сайту — у файле з дадзенням, напрыкладsite.js - стартавы проект Jekyll, дзе пасты знаходзяцца ў катэгоріі
/_posts, а налашоўкі — у файле_config.yml
Свядома простасць пачатковых прыкладоў ёсць перавагай для навучэння. Калі стылізацыя мінімальная, структура легка відразумелая, а вся роба з дизайнам залишаецца на вас, ўбачыць як вы самі.
Маленькія генераторы з практычна жаданым колікствам рухомых элементаў
Hugo, Eleventy і Jekyll — популярныя выборы, але існуе цэлая група дужа маленькіх генератороў для тых, хто хочаць зрозумець весь інструмент за адно popołudnie.
- barf, які ў складзе ўсьмыслова «блогі дасправады веселыя», — это працэскап з адночы 170 рэйкаў, створаны btxx на адной з версый блог.sh Карла Бартэля. У яго няма паведамленняў пра автара і няма шаблонаў. Вы пішаце файлы у формате Markdown, запускаеце
make build, а пасля за дапамою rsync заваносіце падметнай папкуbuild/. Для вас генеруюцца RSS-фіды; працэскап натычна працуе на OpenBSD, macOS і Linux, а яго стайл-шіт складаецца з чатырох рэйкаў. У дасыланых README і жывой дамэ прыкладзены результаты ўжывання.
bb.sh, які складаецца з апошніх 1 000 ліній і не выкарыстоўвае жадных додатковых залежнасцяў, за выключэнням стандартных утылітаў Unix, такіх як date, grep, sed і head. Першую версію напісаў Карлас Фенолоса у 2011 году, а падход да ўтварэння проекта он тады апісаў у сваёй статцы на блогу; на момент напісання цягоў тэкста проект все ўтримвалі. Калі bb.sh будзе размешаны ў публічным каталогу вашага сервера, запуск команды ./bb.sh post стварае новую пазначку. Можна працаваць з чернавікамі, тэгамі, форматам Markdown і RSS без жадных даполнительных настаўленняў. Спільнатворчыя версіі, такія як bashblog-ng, дадаюць ўсё больш функцый.Ішчыя кілька пунктав, якія варта знать:
- ssg — это shell-скрыпт, сумэнны з POSIX, створаны Романам Залатарэў, які стаў аджычненнем для калька інструментаў у гэтым списку; pyssg — это перапісаныя на Python версіі яго.
- sw, напісаны ў C, — це спецыяльна створаны мінімалістычны веб-фреймворк, а його форк simple-static ўсё більш скрачвае його да таго, што ў документацыі README описваецца як найпростэйшы генератор статычных сайтаў, які толькі мог уявіць його адпаведальны.
- makesite.py — это падобнае до barf і bashblog рашэнне на Python, якое складаецца з менш чым 130 рэйкаў коду; яго створыла Sunaina Pai на прынцыпе, што сам код ёсць дакументацыяю. Не існуе шару налашчэнняў; вы чытаете скрыпт і правіце яго безпосередна.
Ні адны з гэтых рашэнняў не падходзяць за наборам функцый да Hugo чысто Eleventy, і гэта сама мета. Тое, што яны відмовляюцца ад плагінам і форматаў шаблонаў, яны компенсуюць прозрачнасцю: калі ў чымсь з’яўляюцца проблемы, весь програма пасідае на вашам экране.
Якщо вы готавы зовсім пакінуць веб, публікацыя на протаколе Gemini ўтварае іншую альтернатыву. Сторанкі Gemini выкарыстоўваюць просты текстовы формат, які выдаецца такім, які ён є, таму часта взагалі няма нічога, што трэба було бы стварыць.
Ключовыя моменты
- Спачатку выучыце, як напісаць сторанку вручную; генератор автаматызуе тэпліванне, якое вам вже трэба было б розумець.
- Большая частка плутання ўжо з SSG стосуецца слоўніку. Калі джэральны і выходны форматы, процес стварэння, макет, частковыя элементы і фронт-матэрыяль будуць ясны, дакументацыя кожнага інструмента будзе выглядаць аднойчы.
- Макеты, частковыя элементы і глобальныя файлы дадзеных існуюць таму, каб змяны, якія былі зданыя раз, прабілася ў всіх месцах пад час наступнага стварэння.
- Git забезпечвае історыю і спосаб публікацыі, але rsync, FTP чы ўзначленне через прыглядач таксама ёсць легітнымі альтернатывамі для персональнага сайту.