Создание сайта на PHP своими руками


Почему не WordPress?

Готовые движки — это удобно, но разработка на чистом PHP, CSS и JS позволяет полностью контролировать код, не плодить лишние плагины и экономить ресурсы моей малинки Raspberry Pi 3.

Шаг 1: Модульная архитектура и база данных

Я разделил сайт на логические блоки: шапку header.php, подвал footer.php и контентную часть, связав их через стандартный PHP include. Изначально роль СУБД выполнял единый плоский файл-массив articles_db.php.

Шаг 2: Динамическая страница «Обо мне»

Создал полноценный раздел «Обо мне» прямо внутри своей структуры данных. Чтобы не захламлять главную страницу, я исключил её из общего списка записей через PHP-условие if ($id === "about") continue;, оставив доступ только по прямой ссылке из шапки сайта.

Шаг 3: Борьба за юзабилити и верстку

В ходе настройки CSS я добавил «воздуха» между заголовками h2 и текстом. Также кардинально улучшил UX сайдбара: поменял блоки местами, подняв глобальный список «Все записи» на самый верх, чтобы навигация была статичной и не прыгала по высоте.

Шаг 4: Мобильная адаптивность и кэш Safari

После проверки отображения на мобильных устройсвах, внедрил медиа-запросы @media (max-width: 768px), благодаря чему двухколоночный интерфейс на смартфонах красиво перестраивается в один вертикальный ряд. Столкнувшись с жестким кэшированием стилей в iOS Safari, я успешно победили его с помощью тестирования в режиме «Частного доступа».

Шаг 5: Изолированная страница 404

Вместо дефолтного окна Nginx я сверстал кастомную страницу 404 в соответствии со стилем своего сайта. Чтобы избежать визуального бага «матрёшки» (когда шапка дублировалась внутри контента), я перенес валидацию array_key_exists на самый верх файла article.php. Теперь при неверном URL происходит чистый редирект на красивый полноэкранный интерфейс ошибки.

Шаг 6: Масштабируемость контента (Оптимизация)

Когда хранить огромные портянки текста в одном PHP-массиве стало неудобно, я провел рефакторинг. Полностью разгрузил articles_db.php, оставив там только метаданные статей. Сам текст теперь хранится в отдельных изолированных файлах в папке content/ и динамически подтягивается в правую колонку с помощью безопасной связки функций file_exists() и file_get_contents().