Nice Events - Tapahtumapalvelut

Blazing fast, SEO-first website built with Astro + MDX for optimal performance and content publishing.

Miksi Astro + MDX?

• Zero JS by default → Paremmat Core Web Vitals, nopeampi lataus
• Staattinen generointi → Optimaalinen SEO ja nopeus
• Yksinkertainen MDX-workflow → Markdown + React-komponentit ilman ylimääräistä konfiguraatiota
• Optimoitu sisältökeskeisiin sivustoihin → Parempi suorituskyky kuin Next.js
• Pienempi build-koko → Nopeampi lataus

Ominaisuudet

• ⚡ Blazing Fast: Astro staattisella generoinnilla
• 🔍 SEO-Optimized: Semantic HTML, structured data, automaattinen sitemap
• ♿ Accessible: WCAG 2.1 compliant, keyboard navigation
• 📱 Responsive: Mobile-first design Tailwind CSS:llä
• 📝 MDX Blog: Yksinkertainen markdown-pohjainen blogi
• 🌐 Finnish Language: Täysi suomenkielinen tuki

Teknologiat

• Astro 4 - Moderni staattinen site generator
• MDX - Markdown + React-komponentit
• TypeScript - Type safety
• Tailwind CSS - Utility-first CSS
• @astrojs/sitemap - Automaattinen sitemap

Projektin rakenne

niceevents_web/
├── src/
│   ├── components/        # Astro komponentit
│   │   ├── Header.astro
│   │   └── Footer.astro
│   ├── content/          # MDX blogipostaukset
│   │   └── blogi/
│   ├── layouts/          # Layout-komponentit
│   │   └── Layout.astro
│   ├── pages/            # Sivut (file-based routing)
│   │   ├── index.astro
│   │   ├── palvelut.astro
│   │   ├── ohjelmakauppa.astro
│   │   ├── yhteystiedot.astro
│   │   └── blogi/
│   └── styles/           # Globaalit tyylit
└── public/               # Staattiset assetit

Asennus ja käyttöönotto

1. Asenna riippuvuudet

npm install

2. Kehitysympäristö

npm run dev

Avaa http://localhost:4321 selaimessa.

3. Tuotantoversio

npm run build
npm run preview

Blogin käyttö (MDX)

Uuden blogipostauksen luominen

1. Luo uusi .mdx-tiedosto src/content/blogi/-kansioon
2. Tiedoston nimeksi käytä URL-yhteensopivaa slugia (esim. uusi-artikkeli.mdx)
3. Lisää front matter tiedoston alkuun:

---
title: "Artikkelin otsikko"
date: 2024-01-15
excerpt: "Lyhyt kuvaus artikkelista"
---

# Artikkelin sisältö

Tähän tulee artikkelin markdown-sisältö...

Voit myös käyttää React-komponentteja:

<MyComponent />

4. Tiedosto näkyy automaattisesti blogisivulla!

MDX-edut

• Markdown-syntaksi → Yksinkertainen kirjoittaminen
• React-komponentit → Interaktiivinen sisältö
• Type-safe frontmatter → Automaattinen validointi
• Automaattinen routing → Ei manuaalista konfiguraatiota

Dokumentaatio

• Sisältökäytännöt — hääkyselyn poisto ja uudelleenohjaukset, artistivälitys-sivun suodatus, esiintyjäkuvat ja encodePublicAssetPath / imageCredit
• Rakenteesta: PROJECT_STRUCTURE.md · Kielistä: I18N_STRUCTURE.md, TRANSLATION_GUIDE.md · Julkaisu: DEPLOYMENT.md

SEO-optimointi

Structured Data (Schema.org)

Sivusto sisältää automaattisesti:

• Organization schema (etusivu)
• BlogPosting schema (blogiartikkelit)
• ContactPage schema (yhteystiedot)

Sitemap

Sitemap generoidaan automaattisesti @astrojs/sitemap-integraatiolla osoitteessa /sitemap.xml

Robots.txt

Robots.txt on saatavilla osoitteessa /robots.txt

Metadata

Jokaisella sivulla on:

• Title ja description
• Open Graph -tagit
• Twitter Card -tagit
• Canonical URL

Core Web Vitals -optimointi

• LCP: Zero JS by default → nopeampi lataus
• FID: Ei JavaScriptiä oletuksena → välitön interaktio
• CLS: Varaavat kuville, kiinteät koot

Tuotantoon vienti

Vercel (suositus)

1. Pushaa koodi GitHubiin
2. Yhdistä projekti Verceliin
3. Vercel tunnistaa Astro-projektin automaattisesti

Muut alustat

npm run build

dist/-kansio sisältää staattisen version, joka voidaan viedä mihin tahansa staattiseen hosting-palveluun.

Kehitys

Linting

npm run astro check

Astro vs Next.js

Miksi Astro tässä projektissa:

1. Sisältökeskeinen sivu → Astro on optimoitu tähän
2. Minimaalinen JS → Paremmat Core Web Vitals
3. Yksinkertaisempi workflow → MDX ilman ylimääräistä konfiguraatiota
4. Nopeampi build → Pienempi bundle-koko
5. Parempi SEO → Staattinen generointi oletuksena

Lisenssi

Copyright © 2024 Nice Events. Kaikki oikeudet pidätetään.

Kehittäjä

djsnabu - Nice Events Web Development