Як я пишу сайт з нуля без затрат частина 4 фінальна

Статтю: Як я пишу сайт з нуля без затрат частина 4 фінальна



1) я не думаю, що Ші здатний за декілька промтів його написати вірно там приблизно 1000 рядків коду, що ніби мало, але я їх вистрадав потом своїм і ші

2) людина зможе, але рівень знань має бути точно значним, тому опишу це так:



1. База даних без бази даних



Більшість сучасних сайтів використовують важкі бази даних (MySQL, PostgreSQL). Щоразу, коли користувач відкриває сторінку, сервер робить запит до бази, чекає відповіді та "збирає" сторінку. Це довго і вимагає ресурсів.


Моя механіка працює інакше. Все "життя" сайту (товари, категорії, статті, налаштування) зберігається у звичайному текстовому файлі — database.json. Це робить систему неймовірно швидкою та стійкою. Базу можна редагувати навіть у звичайному блокноті, не боячись "покласти" сервер.



2. Генератор (generator.py)



Скрипт не створює сторінки в момент запиту користувача. Він робить це наперед. Процес генерації запускається або вручну, або після змін в адмінці, і складається з таких кроків:


Крок 1: Очищення "Чорновика". Перед початком роботи скрипт повністю видаляє стару версію сайту з робочої папки (папка www) і створює чистий майданчик.


Крок 2: Копіювання незмінного. Усі картинки (images), стилі (css) та скрипти (js) просто переносяться у нову папку. Вони не потребують обробки.


Крок 3: "Рендеринг" (Синтез HTML). Тут у гру вступає бібліотека Jinja2. Генератор бере сирі дані з database.json (наприклад, назву книги та її ціну) і вставляє їх у заготовлені HTML-шаблони (папка templates).


Крок 4: Пагінація та Архітектура. Скрипт автоматично розуміє, що якщо в категорії 100 товарів, їх не можна показувати всі одразу. Він математично розбиває їх (наприклад, по 12 на сторінку) і створює окремі фізичні файли: page-1.html, page-2.html тощо.



3. SEO та Пошук (Автономність)



Оскільки сайт статичний (на ньому немає бекенду, який би шукав товари на льоту), генератор створює два важливих файли:


search_index.json — міні-словник усіх товарів. Коли користувач щось шукає на сайті, пошук відбувається миттєво прямо в його браузері за допомогою JavaScript, не навантажуючи сервер.


sitemap.xml — карта сайту для Google. Генератор автоматично збирає всі посилання (на товари, категорії, статті) і формує файл, щоб пошукові роботи швидко індексували нові сторінки.



4. Реліз: З Чорновика у Світ



Коли всі тисячі HTML-файлів створені в "чорновику" (папка www), відбувається фінал. Функція shutil.copytree бере весь цей згенерований масив і одним рухом переміщує в папку public_html (на хостинг). Тільки в цей момент відвідувачі бачать оновлення. Якщо під час генерації (у чорновику) сталася помилка — старий сайт продовжує працювати, відвідувачі нічого не помітять. Це гарантує 100% стабільність.


Так я хотів, і так можливо. Але згодом я змінив логіку: тепер генерація зупиняється на стадії чорновика (у папці www), після чого я переношу файли вручну. Благо, це робиться просто і швидко (інтерфейс хостингу дозволяє виділити файли й просто вказати, куди їх перемістити).


Це безпечніше: не хвилюєшся через можливий збій чи що хтось завітає «в гості» до ядра сайту поковиряти код. Адже в першому варіанті кореневі файли мали б знаходитися надто близько до public_html, бо на моєму хостингу віртуальний образ python можна тільки на 1 папку кинути. Тож поки що оптимальне рішення виглядає саме так. Коли буде час — можливо, зміню логіку, але і так нормально



5. Роль Flask (Адмінка та Сервер)



Хоча сайт статичний, у проєкті використовується фреймворк Flask. Але його роль тут така:


Маршрутизатор для Адмінки: Flask забезпечує роботу панелі керування. Саме він дозволяє завантажувати фото та редагувати JSON-базу через зручний інтерфейс.


Роздача статики: Замість того, щоб генерувати сторінки, Flask просто бере готові HTML-файли з папки public_html і віддає їх браузеру за допомогою команди send_from_directory.




Посуті Адмінка для такого сайту, майже непотрібна, але написав, хай буде, додам:
Оскільки сайт будується навколо одного JSON-файлу, керувати ним можна за допомогою звичайного текстового редактора. Проте я її створив, і ось чому:


Візуалізація даних: Адмінка дозволяє бачити каталог товарів як список із картинками.

Автоматизація рутини: Скрипт сам генерує ID, створює slug і обробляє фото.

Ізоляція: Адмінка працює як окремий інструмент (tools/).

Опанування інструменту: Написати свою адмінку — це як зібрати верстат, на якому потім будеш робити деталі.




Все, що хотів розповісти про сайт, — розповів. Справився як справився. По можливості буду покращувати та описувати цей процес.


Наразі я оптимізував швидкість завантаження на ПК і гаджетах, додаю трохи SEO та описи до книг (чого раніше не робив), і ще багато іншого. З затрат тільки оренда Хостингу і домена.

Тож, як бачите, кожен може написати сайт — потрібна лише увага, воля до дії та жага до нового.



← Назад до блогу
← На головну