Eenmalig instellen
Dit hoef je maar één keer te doen. Reken op zo'n 15 minuten. Alles hieronder is gratis (Supabase heeft een gratis laag die ruim voldoende is voor deze website).
Ga naar supabase.com en meld je aan (bijvoorbeeld met je Google-account). Maak daarna een nieuw project aan — kies een naam zoals "nikita-unbound" en een wachtwoord voor de database (bewaar dit ergens veilig, je hebt het zelden nodig).
Open in je Supabase-project het onderdeel SQL Editor (links in het menu) → New query. Open het bestand supabase/schema.sql uit de websitebestanden, kopieer de volledige inhoud, plak dit in de SQL Editor en klik op Run. Dit maakt alle tabellen aan en vult ze met de huidige inhoud van de website.
Ga naar Storage in het menu → New bucket. Geef als naam exact photos in en zet Public bucket aan. Klik op Create bucket.
Ga naar Authentication → Users → Add user → Create new user. Vul je e-mailadres en een wachtwoord in en vink Auto Confirm User aan. Dit e-mailadres en wachtwoord gebruik je straks om in te loggen op admin.html.
Ga naar Project Settings → Data API (soms kortweg "API" genoemd — niet "API Keys"). Daar vind je bovenaan de Project URL. Weet je het tabblad niet meteen te vinden? De Project URL is altijd op te bouwen uit het project-ID dat in de adresbalk van je dashboard staat: https://project-id.supabase.co.
Ga vervolgens naar Project Settings → API Keys voor de sleutel. Oudere projecten tonen anon public, nieuwere projecten tonen een publishable key (begint met sb_publishable_) — beide werken, kopieer welke je ziet staan.
Open het bestand js/supabase-config.js in de websitebestanden en vul beide waarden in tussen de aanhalingstekens:
window.SUPABASE_URL = "https://jouw-project-id.supabase.co"; window.SUPABASE_ANON_KEY = "jouw-anon-public-of-publishable-key";
Bewaar het bestand en upload het (samen met de rest van de site) naar je webhosting. Dit is de enige stap die je moet herhalen als je ooit van hostingpartij wisselt.
Ga naar admin.html op je website en log in met het e-mailadres en wachtwoord van stap 4. Je kan nu teksten aanpassen, foto's toevoegen of verwijderen, en de kalender en het repertoire bijhouden — meteen zichtbaar voor iedereen die de website bezoekt.
Website hosten
Dit is los van Supabase — dit zet de websitebestanden zelf online, zodat ze wereldwijd bereikbaar zijn.
Ga naar app.netlify.com en meld je aan, bijvoorbeeld met je Google-account.
Op het startscherm zie je een vak "Deploy manually". Sleep daar de volledige map met je websitebestanden (met daarin index.html, css, js, assets, ...) naartoe.
Na een paar seconden krijg je een adres zoals https://nikita-unbound-a1b2c3.netlify.app — meteen bereikbaar voor iedereen. Een eigen domeinnaam (bv. nikitaunbound.be) kan je later nog koppelen via "Domain settings" in Netlify.
Pas je later een bestand aan (bijvoorbeeld js/supabase-config.js na het instellen van Supabase hieronder), sleep dan gewoon de volledige map opnieuw naar hetzelfde Netlify-project. Dat vervangt de oude versie in enkele seconden.
