Обо мне

Morethan-Log для Astro

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

Однажды я наткнулся на приятный шаблон персонального блога - morethan-log на Next.js с привязкой к Notion. Дизайн зашел моментально, а вот идея жить в чужом workspace вообще не улыбалась. Так что собрал свой порт на Astro, привёл всё к TypeScript, добавил мелкие удобства для себя и теперь делюсь им как 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 или просто маякните мне.

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