- Astro 76.6%
- JavaScript 7.6%
- CSS 7%
- TypeScript 6.7%
- Dockerfile 1.2%
- Andere 0.9%
0db5f6435e
Teksten: - alle gedachtestreepjes (— en –) uit de website gehaald, vervangen door natuurlijke interpunctie (komma, punt, dubbele punt, haakjes) - teksten herschreven naar plattere, minder "AI-achtige" taal - personenbereik nu "2 tot 4" i.p.v. een streepje Lighthouse (desktop 100/100/100/100, mobiel 99/100/100/100): - Prestaties: alle CSS inline (geen render-blocking), hero-afbeelding vooraf geladen met exact passende srcset, fijnere responsive breakpoints en lagere hero-kwaliteit (onzichtbaar onder de overlay) - Toegankelijkheid: knop- en footercontrast verhoogd naar WCAG AA - Best practices: OpenStreetMap-kaart als klik-om-te-laden (geen externe verzoeken bij het laden van de pagina) - SEO: LodgingBusiness structured data (JSON-LD) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> |
||
|---|---|---|
| public | ||
| scripts | ||
| src | ||
| .dockerignore | ||
| .env.example | ||
| .gitignore | ||
| .nvmrc | ||
| astro.config.mjs | ||
| docker-compose.yml | ||
| Dockerfile | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| server.mjs | ||
| tsconfig.json | ||
Agriturismo Fraseneggi — website
Moderne herbouw van fraseneggi.com: een snelle, statische website gebouwd met Astro, met een lokaal gehoste DecapCMS (zonder CDN) en een Forgejo/Gitea git-backend via PKCE (alleen een Client ID nodig — geen secret).
- ⚡️ Statische Astro-site, razendsnel
- 🖼️ Alle afbeeldingen automatisch geoptimaliseerd naar WebP (responsive)
- 🗂️ DecapCMS lokaal gebundeld (geen CDN), git-backend op Forgejo/Gitea
- 🧭 Cache instelbaar vanuit het CMS (bewaartijd + cache-versie)
- 📈 Umami-statistieken instelbaar vanuit het CMS (script-URL + website-ID)
- 🐳 Eén
Dockerfile, klaar om met Coolify uit te rollen
1. Snel starten (lokaal)
Vereist: Node 20.3+ (of 22, zie .nvmrc).
npm install
npm run dev # site op http://localhost:4321
Lokaal het CMS gebruiken
Het CMS draait op /admin/. Voor lokaal bewerken (zonder Forgejo) start je in een
tweede terminal de lokale backend:
npm run cms # start decap-server (proxy naar je lokale bestanden)
Ga daarna naar http://localhost:4321/admin/ en log in met "Login" (lokale modus).
Wijzigingen worden direct naar de bestanden in src/ geschreven.
2. Hoe de afbeeldingen werken (WebP + cache)
- Geüploade afbeeldingen komen in
src/assets/uploads/. - Bij het bouwen zet Astro (via
sharp) elke afbeelding om naar WebP in meerdere formaten (responsivesrcset). De bestanden krijgen een hash in de naam en worden door de server onbeperkt gecachet (immutable). - De bewaartijd voor overige bestanden en de cache-versie stel je in via het CMS
onder Site-instellingen → Cache & afbeeldingen. De server leest dit en zet de
juiste
Cache-Control-headers. Verhoog de cache-versie om browsers te dwingen alles opnieuw op te halen.
Tip: de seed-foto's per appartement zijn algemene sfeerfoto's. Upload via het CMS gerust echte interieurfoto's per appartement — ze worden automatisch geoptimaliseerd.
3. DecapCMS koppelen aan Forgejo/Gitea (productie)
De CMS-login gebruikt OAuth2 met PKCE: je hebt alleen een Client ID nodig, geen secret en geen aparte OAuth-server.
3a. OAuth2-applicatie aanmaken in Forgejo
- Log in op je Forgejo (
https://code.securityasaservice.org). - Ga naar Settings → Applications → Manage OAuth2 Applications (of op
organisatieniveau onder de organisatie
Fraseneggi). - Maak een nieuwe applicatie:
- Application Name:
Fraseneggi CMS - Redirect URI:
https://fraseneggi.je-ma.com/admin/(let op de afsluitende slash) - Confidential Client: uitgevinkt laten (publieke client → PKCE)
- Application Name:
- Bewaar en kopieer de Client ID.
3b. Omgevingsvariabelen instellen
Zet deze variabelen (in Coolify of in een lokaal .env, zie .env.example):
| Variabele | Voorbeeld |
|---|---|
SITE_URL |
https://fraseneggi.je-ma.com |
FORGEJO_URL |
https://code.securityasaservice.org |
FORGEJO_REPO |
Fraseneggi/FraseneggiWebsite |
FORGEJO_BRANCH |
main |
DECAP_GITEA_CLIENT_ID |
(de Client ID uit stap 3a) |
De server genereert hiermee /admin/config.yml — zonder opnieuw te bouwen wanneer je
de variabelen aanpast. Je hoeft alleen de container te herstarten.
Belangrijk: Forgejo/Gitea moet PKCE ondersteunen (standaard het geval in recente versies). De gebruiker die inlogt moet schrijfrechten op de repo hebben.
4. Umami-statistieken instellen
Umami draait al via Coolify. In het CMS, onder Site-instellingen → Statistieken (Umami):
- Zet Statistieken inschakelen aan.
- Vul de Script-URL in (bijv.
https://umami.jouwdomein.nl/script.js). - Vul de Website-ID in (de UUID uit je Umami-dashboard).
Sla op — het script wordt bij de volgende build in de <head> van elke pagina geladen
(lokaal, zonder externe CDN).
5. Uitrollen met Coolify
Twee opties:
Optie A — Dockerfile (aanbevolen)
- Maak in Coolify een nieuwe Application op basis van deze git-repository.
- Kies build pack Dockerfile.
- Zet de omgevingsvariabelen uit stap 3b.
- Stel de poort in op
3000. - Koppel je domein en deploy.
Elke git push (ook die vanuit het CMS!) triggert een nieuwe build en deploy. Daardoor
worden nieuwe afbeeldingen automatisch naar WebP omgezet en is de site altijd statisch en
snel.
Optie B — Docker Compose
Gebruik het meegeleverde docker-compose.yml (Coolify → Docker Compose). Zet dezelfde
omgevingsvariabelen.
6. Scripts
| Commando | Doel |
|---|---|
npm run dev |
Ontwikkelserver (Astro) op poort 4321 |
npm run cms |
Lokale DecapCMS-backend (decap-server) |
npm run build |
Bundelt het CMS lokaal + bouwt de statische site naar dist/ |
npm run preview |
Bekijkt de statische build lokaal |
npm start |
Productieserver (serveert dist/ met cache + CMS-config) |
7. Projectstructuur
.
├── Dockerfile, docker-compose.yml # deploy
├── server.mjs # productieserver (cache + /admin/config.yml)
├── astro.config.mjs
├── public/
│ ├── admin/ # DecapCMS (index.html, config.yml, lokale bundel)
│ ├── favicon.ico, apple-touch-icon.png
├── scripts/copy-decap.mjs # kopieert de DecapCMS-bundel (geen CDN)
└── src/
├── assets/
│ ├── brand/logo.png # logo (behouden van de oude site)
│ └── uploads/ # CMS-afbeeldingen → WebP bij build
├── components/ # Header, Footer, kaarten, Hero, Gallery, ...
├── content/ # appartementen, nieuws, activiteiten, omgeving, pagina's
├── content.config.ts # schema's van de content
├── data/settings.json # site-instellingen (via CMS)
├── layouts/BaseLayout.astro
├── lib/ # helpers (afbeeldingen, site)
├── pages/ # routes
└── styles/global.css # design-systeem
8. Inhoud aanpassen
Alles is bewerkbaar via het CMS op /admin/:
- Site-instellingen — naam, contact, social, registratienummers, Umami, cache, hero.
- Pagina's — welkomsttekst, informatie, omgeving-intro, activiteiten-intro, contact/route.
- Appartementen — 5 verblijven (naam, kleur, prijs, personen, foto's, voorzieningen).
- Nieuws — blogberichten.
- Activiteiten & Omgeving — kaartjes met foto en beschrijving.
Technisch staat alles als Markdown/JSON in src/, dus je kunt het ook direct in de
repository bewerken.