Обо мне

Morethan-Log для Astro

Серёжа
Серёжа
30 июля 2025 г.

Когда дело касается выбора шаблона для сайта - я свирепею. Для меня это превращается в длительный процесс прокрастинации и перебора всех возможных вариантов, пока я наконец не найду свой hidden gem.

Так я и наткнулся на morethan-log. Шаблон дичайше запал мне в душу, и я начал пытаться портировать его вручную с оригинальной репы, но это не увенчалось успехом.

Тогда я просто дал задачу верстальщику, чтобы он вручную переверстал весь шаблон под static html версию, а затем дал задачу AI агентам портировать это все на любимый Astro JS, обвешав это всё различными фишечками и плюшками под капотом. Так и появился он — ✨ Morethan-Log для Astro ✨.

📦 Что под капотом

  • Мультиязычный сетап (английский и русский из коробки) и понятная настройка новых локалей через src/config/locales.ts
  • Поиск, тёмная тема, RSS для каждого языка, плюс фронтматтер с типами, чтобы не забыть описание или дату
  • Вся структура сайта живёт в src/config/site.ts: навигация, категории, разделы контактов, переключатели фич и форматы дат
  • Можно писать обычный Markdown и подключать MDX с React islands только там, где хочется интерактива.
  • Уже лежат плейсхолдеры для картинок, Open Graph теги и остальные SEO мелочи, так что страница красиво выглядит даже без своих обложек

🚀 Как стартануть

npm create astro@latest -- --template JustSereja/morethan-log-astro
cd your-blog
npm run dev

Локальный сервер ждёт на http://localhost:4321. Правите файлы в src/ и сразу видите изменения. Если удобнее начать с GitHub template, жмите кнопку на репозитории, клонируйте свой форк, дальше npm install и npm run dev.

⚙️ Настраиваем под себя

  • src/config/site.ts держит название, описания, автора, меню, категории, контакты, фичи и форматы дат для каждого языка.
  • src/config/locales.ts отвечает за набор языков: код, локаль, подпись и дефолт. Так Astro правильно строит ссылки и hreflang.
  • Для каждого языка можно сделать свои ссылки и даже разные имена автора. Поддерживаются эмодзи и свои SVG иконки.
  • Стили лежат в public/css/style.css. Меняете переменные и получаете нужную палитру. Светлая и тёмная темы уже готовы.

📝 Контент и посты

Все посты лежат в src/content/posts/<lang>/<category>/. Чтобы шаблон связал переводы, файлы для разных языков держим с одинаковым именем.

---
title: 'Новый проект'
h1: 'Новый проект'
description: 'Короткий тизер для карточек'
date: '2025-07-30'
announcement: 'Необязательный текст для списков'
image: '/img/posts/your-cover.jpg'
aiGenerated: false
draft: false
---

permalink почти всегда можно оставить пустым. Папка уже задаёт язык и категорию. Страницы в src/content/pages работают по той же логике.

🎁 Пара бонусов

  • RSS генерируется для каждого языка: /rss.xml для языка по умолчанию и /<lang>/rss.xml для остальных. Подписчики получают только свои тексты.
  • В продакшн сборке dist/404.html автоматически копируется в dist/404/index.html, так что GitHub Pages и Netlify не теряют 404 страницу.
  • Нужен третий язык? Добавьте его в src/i18n/ui.ts, расширьте переводы и закиньте новые папки с контентом.
  • Чтобы подтянуть свежие обновления шаблона, есть make update-template. Скрипт скачает актуальный код, аккуратно обновит компоненты и ассеты, а ваш контент и конфиги не тронет.

Этот же шаблон крутится здесь - на sereja.com. Забирайте, настраивайте под себя и пишите. Если найдёте баг или придумаете что-то крутое, создайте issue на GitHub или просто маякните мне.

← Назад ↑ Наверх