Setup in 4 stappen
Google Sheet koppelen, deployen op Netlify, eigen domeinnaam instellen.
Maak een Google Sheet aan
Ga naar sheets.google.com en maak een nieuw spreadsheet. Geef het de naam Recepten.
Zet in de eerste rij deze kolomkoppen (exact zo, in deze volgorde):
| Kolom | Naam | Wat invullen |
|---|---|---|
| A | naam | Naam van het recept |
| B | categorie | diner, lunch, ontbijt of snack |
| C | tijd | Bereidingstijd in minuten (alleen getal) |
| D | personen | Aantal personen (alleen getal) |
| E | beschrijving | Korte omschrijving (1-2 zinnen) |
| F | ingredienten | Ingrediënten gescheiden door ; |
| G | stappen | Bereidingsstappen gescheiden door ; |
| H | afbeelding | URL naar een foto (optioneel, mag leeg) |
Voorbeeld voor kolom F (ingrediënten):
Deel de sheet met je vriendin via Delen → Persoon toevoegen.
Sheet openbaar publiceren
De site leest de sheet via een openbare CSV-link. Ga in je sheet naar:
Bestand → Delen → Publiceren op internet → Publiceren
De sheet hoeft niet openbaar zichtbaar te zijn voor iedereen — alleen de CSV-export link werkt. Laat de rest van de instellingen staan.
Sheet ID invullen in config.js
Zoek je Sheet ID in de URL van je sheet. Het zit tussen /d/ en /edit:
Open het bestand config.js en vervang JOUW_SHEET_ID_HIER door jouw ID:
Deployen op Netlify
Ga naar netlify.com en maak een gratis account aan.
Op het dashboard kies je Add new site → Deploy manually. Sleep dan de hele map met je bestanden (index.html, config.js, setup.html) naar het uploadvenster.
Netlify geeft je een willekeurige URL zoals pensive-einstein-abc123.netlify.app. Dat werkt al direct.
Eigen domeinnaam koppelen: Ga in Netlify naar Domain management → Add custom domain. Voer je domeinnaam in en volg de stappen. Je DNS-provider (bijv. Transip, Versio, GoDaddy) wijst je dan naar Netlify.
Na elke aanpassing aan config.js: opnieuw de map uploaden via Deploys → drag & drop.
Recept toevoegen? Open de Google Sheet, vul een nieuwe rij in, en ververs de site. Dat is alles. 🎉