# Een website voor mensen en AI: zo leveren we de nieuwe Jaraco-website

Een bedrijfswebsite heeft twee taken: mensen helpen begrijpen wat we doen en informatie makkelijk vindbaar, herbruikbaar en onderhoudbaar maken. Bij de vernieuwing van de Jaraco-website hebben we aan beide gedacht.

Het resultaat is een lichte, meertalige website voor Jaraco GmbH, met een praktische redactieworkflow, een stagingomgeving en een MCP-server waarmee AI-clients toegang krijgen tot onze openbare informatie. Het project laat ook zien hoe we software ontwikkelen en beheren: houd het systeem begrijpelijk, automatiseer terugkerend werk en beoordeel wijzigingen voordat ze live gaan.

## Eenvoudig door de website navigeren

De website brengt onze diensten, projectverhalen, artikelen, bedrijfsinformatie en productpagina’s voor Jarakube samen. Via de hoofdnavigatie kunnen bezoekers de verschillende onderdelen bekijken, door de blog en projectverhalen bladeren en antwoorden vinden op veelgestelde vragen. De taalselector biedt waar vertalingen beschikbaar zijn inhoud in het Engels, Duits, Frans, Spaans en Nederlands. Via de dienstenpagina’s en contactmogelijkheden kunnen bezoekers eenvoudig met ons in gesprek gaan.

We bieden pagina’s ook als Markdown aan. Dat is handig voor tekstgerichte tools en geeft zoekmachines en AI-systemen een duidelijke weergave van de inhoud. Gestructureerde metadata en automatisch gegenereerde discovery-bestanden dienen hetzelfde doel: de website begrijpelijk maken voor mensen, crawlers en assistenten.

## Bewust low-tech

De openbare website is gebouwd met statische HTML, CSS en een kleine hoeveelheid JavaScript. Python-scripts bereiden pagina’s en inhoudsindexen voor tijdens het buildproces. Een webserver levert vervolgens de gegenereerde bestanden. Voor het weergeven van de website is geen uitgebreid applicatieframework of server-side rendering tijdens runtime nodig.

Zo blijft het beheer eenvoudig en is de uitvoer goed te inspecteren. Statische pagina’s zijn snel te serveren en te cachen. Er is geen database nodig om alleen bedrijfsinformatie te tonen. JavaScript verzorgt gerichte interacties, zoals taalkeuze en de weergave van het blogoverzicht, terwijl de inhoud beschikbaar blijft als gegenereerde HTML en Markdown.

Voor ons betekent ‘low-tech’ dat we overbodige onderdelen vermijden wanneer ze het probleem niet beter oplossen. Dat betekent niet dat we automatisering overslaan: de buildpipeline valideert de inhoud, genereert gelokaliseerde pagina’s en indexen, maakt AI-discoverybestanden en MCP-documentatie aan en verpakt het resultaat als containerimage.

## Inhoud toevoegen in Markdown en op staging beoordelen

Artikelen en andere collecties gebruiken Markdown-bestanden voor de tekst en kleine JSON-manifesten voor titels, samenvattingen, publicatiedata en verwijzingen naar taalversies. Voor een nieuw blogartikel voegt de redactie het artikel en het bijbehorende manifest toe en neemt het manifest op in de blogindex. De wijziging wordt vervolgens via Git ingediend. De build controleert of de verwijzingen compleet zijn en genereert de pagina’s en indexen van de website.

Wijzigingen kunnen vóór het mergen in een pull request worden besproken en beoordeeld. De workflow voor de website start echter pas wanneer wijzigingen naar `develop` of `main` worden gepusht, niet wanneer een pull request wordt geopend. Een push naar `develop` bouwt en rolt uit naar onze demosite [jaraco-demo.jarakube.eu](https://jaraco-demo.jarakube.eu), waar we de daadwerkelijke deployment kunnen beoordelen. Een push naar `main` volgt het productiepad naar [jarakube.eu](https://jarakube.eu). De workflow controleert of de uitgerolde website de verwachte bronrevisie vermeldt.

## Kwaliteitscontroles van code tot live website

De controles vinden in verschillende fasen plaats. Voor de image wordt gebouwd, valideert de workflow contentmanifesten, genereert statische pagina’s en discovery-bestanden en voert een Python-testharness met coverage uit voor de sitegeneratiescripts. SonarQube analyseert statisch de geconfigureerde broncodegebieden en past een quality gate toe voordat de imagebuild verdergaat.

Na het bouwen wordt de containerimage naar de registry gepusht. Trivy scant de image op bekende, oplosbare kritieke en hoge kwetsbaarheden in het besturingssysteem en bibliotheken. De deployment wordt alleen gestart als de scan slaagt. Na de deployment controleert de workflow welke Git-revisie de website serveert en voert Playwright end-to-end-tests uit in desktop- en mobiele browserconfiguraties. De suite controleert navigatie, statische pagina’s, taalwissels, contentlinks, metadata, FAQ’s en andere belangrijke gebruikersroutes. `develop` wordt op de demosite gecontroleerd; `main` in productie.

Daarna voert OWASP ZAP een basisscan uit, gevolgd door een geautomatiseerde Nikito-kwaliteits- en beveiligingsscan op de uitgerolde omgeving. Deze controles bieden nuttige dekking, maar een basisscan is geen volledige penetratietest. De runtimecontainer draait bovendien als niet-rootgebruiker en stelt browserbeveiligingsheaders in, zoals Content Security Policy, framebescherming en bescherming tegen MIME-sniffing. Ontwikkelaars kunnen `test-local-website.sh <theme>` gebruiken om pagina’s te genereren, de container te bouwen en lokaal een preview te bekijken voordat ze wijzigingen pushen.

Dezelfde werkwijze geldt voor dienstenpagina’s, projectverhalen en andere inhoudscollecties. Schrijvers kunnen zich op Markdown richten, terwijl de build de lokalisatie, generatie van statische pagina’s, inhoudsindexen en bijbehorende discovery-artefacten verzorgt.

## De vormgeving aanpassen zonder het inhoudsmodel te vervangen

Het themesysteem scheidt visuele keuzes van de inhoudsbronnen. Themeconfiguratie, CSS en herbruikbare paginacomponenten bepalen de vormgeving. Generators passen die keuzes toe op de shellpagina’s en detailpagina’s. De website bevat meerdere thema’s. Beheerders kunnen daardoor designvariabelen en stijlen aanpassen zonder elk artikel of elke dienstomschrijving opnieuw te schrijven.

De skills in de repository maken dit werk makkelijker wanneer je een AI-codeeragent gebruikt. `jaraco-website-css` legt het themesysteem en de verantwoordelijkheid voor stijlen uit; `jaraco-website-detail-layout` helpt bij wijzigingen aan gegenereerde detailpagina’s; en `jaraco-website-categorized-navigation` documenteert de structuur, lokalisatie en werking van de navigatie. Deze praktische instructies staan bij de projectcode, zodat een assistent de conventies van de website kan volgen in plaats van te moeten raden hoe een wijziging hoort te worden gemaakt.

De workflow- en projectdocumentatie beschrijft ook hoe bronbestanden een uitgerolde website worden. Samen bieden de gedocumenteerde buildstappen en gerichte skills beheerders een duidelijker pad van een inhouds- of presentatieaanpassing naar de beoordeling ervan.

## Een MCP-server voor gestructureerde interactie

De website bevat een [Model Context Protocol-server (MCP) met alleen-lezen toegang](https://jarakube.eu/mcp-server/mcp-server.html). Compatibele AI-clients kunnen de inhoud van de Jaraco-website, waaronder blogartikelen en dienstinformatie, gestructureerd ontdekken en lezen. De server biedt ook een hulpmiddel om e-mails voor serviceaanvragen op te stellen. Zo kan een assistent onze bronnen raadplegen of een eerste concept maken zonder zelf de paginamarkup te hoeven uitlezen.

De website blijft ook zonder MCP bruikbaar. MCP voegt een extra interface toe voor mensen die met AI-assistenten en MCP-compatibele toepassingen werken. Inhoudswijzigingen lopen door dezelfde build, zodat de website en de MCP-server op elkaar afgestemd kunnen blijven.

## Vooruitblik: A2A en WebMCP

MCP is één onderdeel van een veranderend landschap voor interactie tussen agents. Het [Agent2Agent-protocol (A2A)](https://developers.googleblog.com/en/a2a-a-new-era-of-agent-interoperability/) richt zich op communicatie en coördinatie tussen onafhankelijke agents. A2A kan het verbinden van diensten veel eenvoudiger maken: agents van verschillende teams kunnen elkaars mogelijkheden ontdekken en samenwerken via gestandaardiseerde communicatie. [WebMCP](https://github.com/webmachinelearning/webmcp) onderzoekt een browser-native manier waarop websites gestructureerde tools aan agents kunnen aanbieden. Agents kunnen dan gebruikmaken van duidelijk beschreven acties in plaats van de interface te moeten raden. De browsercontext is bijzonder interessant omdat een agent via de bestaande paginasessie van de gebruiker kan werken, waarbij de identiteit en reeds ingestelde rechten behouden blijven. WebMCP is nog in ontwikkeling, maar roept al een relevante vraag op voor websitebeheerders: hoe maakt een website zijn inhoud en mogelijkheden duidelijk aan een agent?

Onze MCP-server biedt assistenten al een directe manier om Jaraco-inhoud te ontdekken en te lezen. Terwijl A2A en WebMCP zich verder ontwikkelen, willen we onderzoeken hoe deze interfaces elkaar aanvullen en hoe websitebeheerders taalmodellen naar de juiste, gezaghebbende inhoud op hun pagina’s kunnen leiden. **Hoe leid jij LLM’s naar de juiste inhoud op je website?**

## Probeer de website en stel een vraag aan een AI-zoekmachine

Bezoek [jarakube.eu](https://jarakube.eu), bekijk onze diensten en projectverhalen, wissel van taal of lees een artikel in Markdown. Probeer daarna deze vragen in [Perplexity](https://www.perplexity.ai/search?q=Wat%20doet%20Jaraco%20GmbH%3F) of [Google AI Mode](https://www.google.com/search?udm=50&q=Wat%20doet%20Jaraco%20GmbH%3F): [Wat doet Jaraco GmbH?](https://www.perplexity.ai/search?q=Wat%20doet%20Jaraco%20GmbH%3F) · [Hoe ondersteunt Jarakube platform engineering?](https://www.perplexity.ai/search?q=Hoe%20ondersteunt%20Jarakube%20platform%20engineering%3F) · [Welke voorbeelden van workflowautomatisering heeft Jaraco gepubliceerd?](https://www.perplexity.ai/search?q=Welke%20voorbeelden%20van%20workflowautomatisering%20heeft%20Jaraco%20gepubliceerd%3F). Gebruik voor dezelfde vragen in Google AI Mode [Jaraco GmbH](https://www.google.com/search?udm=50&q=Wat%20doet%20Jaraco%20GmbH%3F), [Jarakube en platform engineering](https://www.google.com/search?udm=50&q=Hoe%20ondersteunt%20Jarakube%20platform%20engineering%3F) of [workflowautomatisering bij Jaraco](https://www.google.com/search?udm=50&q=Welke%20voorbeelden%20van%20workflowautomatisering%20heeft%20Jaraco%20gepubliceerd%3F). Volg de bronnen in de antwoorden terug naar de website en bekijk hoe de informatie daar wordt gepresenteerd.

Dat is een deel van het doel: ons werk vindbaar en controleerbaar maken, of iemand nu via een browser, zoekmachine of AI-client binnenkomt. De website laat op kleine schaal dezelfde mogelijkheden zien die we klanten helpen realiseren: onderhoudbare software, nuttige automatisering en deploymentprocessen die wijzigingen beter te vertrouwen maken.

Plan je een eigen website, contentplatform of AI-gestuurde informatiedienst? [Neem contact op met Jaraco](mailto:info@jaraco.de). We bespreken graag een praktische eerste stap.

Dit artikel is gemaakt met behulp van grote taalmodellen (LLM’s).