Morethan-Log for Astro

A modern, customizable blog template built with Astro. Fast, responsive, and multilingual out of the box.

🌐 Live Demo

Inspiration: I loved the original morethan-log Next.js template so much that I ported it to Astro for my own site, sereja.com - and open-sourced the result as morethan-log-astro so fellow Astro fans can spin up a blazing-fast blog with the same clean design in seconds.

🚀 Features

• 🌍 Multilingual Support - Built-in support for multiple languages (EN/RU by default)
• 📱 Responsive Design - Looks great on all devices
• 🌙 Dark Mode - Automatic theme switching based on system preferences
• 🔍 Search Functionality - Built-in search for your content
• 📝 Markdown Support - Write posts in Markdown with full syntax highlighting
• 🏷️ Categories - Organize posts by categories
• 📊 SEO Optimized - Meta tags, sitemap, multilingual RSS feeds included
• ⚙️ Highly Configurable - Easy customization through single config file
• 💬 Social Links - Add your social media profiles easily

📦 Quick Start

Prerequisites

• Node.js 18+ and npm

Installation

1. Quick Start with npm create (Recommended)

   The easiest way to get started is using the Astro CLI:

   npm create astro@latest -- --template JustSereja/morethan-log-astro

   This command will:

   • Prompt you for a project name
   • Create a new directory with your blog
   • Install all dependencies automatically

   Then navigate to your project:

   cd [your-project-name]

2. Alternative: Use GitHub Template

   If you prefer to create a GitHub repository first:

   

   Then clone and set up:

   git clone https://github.com/[your-username]/[your-repo-name].git
   cd [your-repo-name]
   npm install

Running the Development Server

Start the development server:

npm run dev

Open your browser and visit http://localhost:4321 to see your blog!

⚙️ Configuration

All site configuration is centralized in src/site.config.ts:

export default {
  title: "Morethan-Log",
  description: {
    en: "A modern blog template built with Astro",
    ru: "Современный шаблон блога на Astro"
  },
  siteUrl: "https://morethan-log-astro.sereja.com",
  author: {
    name: "Sereja",
    email: "[email protected]",
    // ... more options
  }
  // ... see full config options in the file
}

Social Links

Add your social media profiles:

socialLinks: {
  github: "https://github.com/JustSereja",
  twitter: "https://twitter.com/your-twitter",
  linkedin: "https://linkedin.com/in/your-linkedin",
  // Add more as needed
}

Categories

Configure blog categories:

categories: {
  blog: {
    enabled: true,
    path: "/blog",
    icon: "💻"
  },
  // Add more categories
}

Features

Toggle features on/off:

features: {
  darkMode: true,
  search: true,
  rss: true,
  // ... more features
}

📝 Writing Posts

Creating a New Post

1. Create a new .md file in the appropriate directory:

   • Blog posts: src/pages/blog/
   • Technology posts: src/pages/technology/
   • Projects: src/pages/projects/

2. Add frontmatter:

---
layout: '../../layouts/Post.astro'
title: 'Your Post Title'
h1: 'Display Title'
date: 15.03.2024
custom_category: 'blog'
image: '/img/posts/your-image.jpg'
description: 'A brief description of your post'
---

Your post content here...

Multi-language Posts

For Russian translations, create the same file structure under src/pages/ru/:

src/pages/blog/my-post.md        # English
src/pages/ru/blog/my-post.md     # Russian

Add language links in frontmatter:

hreflang_en: '/blog/my-post'
hreflang_ru: '/ru/blog/my-post'

Language Support

The template supports both multilingual and single-language content:

Multilingual Posts (Default)

hreflang_en: '/blog/my-post'
hreflang_ru: '/ru/blog/my-post'

Single-Language Posts

For content that exists in only one language, simply omit the hreflang for the missing translation:

English-only post:

hreflang_en: '/blog/english-only-post'
# No hreflang_ru - when users switch to Russian, they'll be redirected to the Russian homepage

Russian-only post:

hreflang_ru: '/ru/blog/russian-only-post'
# No hreflang_en - when users switch to English, they'll be redirected to the English homepage

This is perfect for:

• Language-specific announcements
• Regional content
• Technical documentation in one language
• Gradual content translation

RSS Feeds

The template provides multilingual RSS feeds with full content support:

Feed Structure

• Main Feed (/rss.xml) - Contains posts in the default language (English)
• English Feed (/en/rss.xml) - English posts only
• Russian Feed (/ru/rss.xml) - Russian posts only

This approach ensures subscribers never receive content in languages they don't understand. The main feed (/rss.xml) serves the default language to maintain compatibility with RSS readers that expect a feed at this standard location.

Features

Each RSS feed includes:

• ✅ Full HTML content (not just descriptions)
• ✅ Properly converted image URLs (relative to absolute)
• ✅ Author information
• ✅ Post categories
• ✅ All required RSS 2.0 elements

Feed Discovery

RSS feeds are automatically linked in the <head> of each page:

• The main feed (/rss.xml) contains default language content
• Language-specific feeds are available at /{lang}/rss.xml
• Alternative language feeds include hreflang attributes

Customizing Default Language

To change which language appears in the main RSS feed, update defaultLanguage in site.config.ts:

// site.config.ts
export default {
  // ...
  defaultLanguage: "ru", // Change to make Russian the main feed language
  // ...
}

🎨 Customization

Styling

• Main styles: public/css/style.css
• Modify CSS variables for colors and themes
• Dark mode styles are included

Images

Placeholder Images

The template includes category-specific placeholder images for posts without featured images:

• Blog posts: /public/img/posts/placeholder-blog.svg (Purple gradient with document icon)
• Technology posts: /public/img/posts/placeholder-technology.svg (Green gradient with code terminal)
• Projects posts: /public/img/posts/placeholder-projects.svg (Orange gradient with gear icon)
• Default: /public/img/posts/placeholder.svg (Simple fallback)

Posts automatically use the appropriate placeholder based on their category.

RSS Channel Image

For RSS feeds, the template supports both SVG and PNG formats:

• Create your logo as /public/img/rss-logo.png (144x144px) for best compatibility
• Falls back to /public/img/rss-logo.svg if PNG doesn't exist
• PNG format is recommended as it's more universally supported by RSS readers

Adding New Languages

1. Add language to src/i18n/ui.ts:

export const languages = {
  en: 'English',
  ru: 'Русский',
  es: 'Español'  // New language
};

2. Add translations:

export const ui = {
  // ... existing languages
  es: {
    'name': SITE_CONFIG.author.name,
    'ui.about': 'Acerca de',
    // ... more translations
  }
}

Custom Pages

Create new pages in src/pages/ using .astro or .md files.

Language-Specific Social Links and Author Names

The template now supports different social links and author names for each language:

1. Language-Specific Social Links: Configure different social media profiles for each language in src/site.config.ts:

   socialLinks: {
     en: {
       github: "https://github.com/EnglishUsername",
       twitter: "https://x.com/EnglishHandle",
       // ... other social links
     },
     ru: {
       github: "https://github.com/RussianUsername",
       twitter: "https://x.com/RussianHandle",
       // ... other social links
     }
   }

2. Language-Specific Author Names: Set different author names for each language:

   author: {
     name: {
       en: "John Doe",
       ru: "Иван Иванов"
     },
     // ... other author fields
   }

🚀 Deployment

Build for Production

npm run build