Doel
Voor mijn publieke website, api services en mailing wil ik een vaste domein-naam voor “robertthecoder”.
De volledige website wil ik ook meertalig maken.
Naast nederlands dienen alle pagina’s ook in het engels voorzien te zijn.
Ook dient in de hoofding de taal-keuze kunnen gemaakt worden.
De reeds bestaande statische website dient tevens te worden uitgebreid met “contact” functionaliteit:
- een input formulier waarop gebruiker reacties kan geven of vragen stellen
- de verwerking van deze input gegevens dient te gebeuren op een internet server
Om deze website goed te kunnen testen, wil ik 3 staging omgevingen:
lokaal (zonder Cloudflare platform), test in Cloudflare en productie in Cloudflare.
Resultaat
1 - Gratis domein naam, dns en web host
Via de “eu.org” site heb ik de registratie van de subdomein naam “robertthecoder.eu.org” aangevraagd.
Deze subdomein naam van “eu.org” zou gratis en voor altijd toegekend worden (geen jaarlijkse vernieuwing nodig).
Via de “hostry.com” site heb ik daarna gratis hosting en een DNS voor bovenstaande domain name aangevraagd en verkregen.
Ongeveer 2.5 weken na de aanvraag bij “eu.org” verstuurde ik een email naar hostmaster met de vraag naar info over de status.
Na nog een extra week ontving ik nog steeds geen antwoord en had ik dus geen goedkeuring voor registratie van deze domein naam.
Ik heb dan de domein naam “robertthecoder.org” aangekocht bij Cloudflare als registrar voor 7.50 $.
Deze registratie dient jaarlijks vernieuwd te worden voor telkens 10.11 $ per jaar.
Daarna heb ik voor mijn account in Cloudflare “robertthecoder.org” als domein ingesteld.
Hierdoor heb ik nu een eigen publieke “namespace” en kan ik gratis gebruik maken van meer Cloudflare services.
Deze publieke website heb ik toegankelijk gemaakt via volgende url https://www.robertthecoder.org
Voorts heb ik ook “Email Routing” gebruikt om alle emails voor “XYZ@robertthecoder.org” te forward-en naar mijn persoonlijke email.
2 - Website meertalig maken
Alle nederlanstalige web pagina’s en ge-link-te resources (pdf) werden in het engels vertaald.
Daarna werd via de configuratie in hugo meertaligheid voorzien.
Ook werd de hoofding voor alle pagina’s aangepast zodat de taal-keuze kan gemaakt worden.
De link naar de RSS Feed werd ook aangepast om deze meertalig te maken.
3 - Staging omgevingen
Cloudflare voorziet in Pages voor automatische deployment van een website vanuit publieke GitHub/GitLab repositories.
Daarom heb ik een account aangemaakt in GitHub met hierin de repo’s ‘my_public_site’, ‘my_public_site-test’ en ‘my_public_site-prod’.
Lokaal heb ik enkel de Git repo ‘my_public_site’ gecloned en hierin alle hugo source geplaatst.
In de repo ‘my_public_site’, heb ik 2 nieuwe git submodules voor ‘my_public_site-test’ en ‘my_public_site-test’ aangemaakt.
In Cloudflare heb de instellingen van Pages voor deze website gewijzigd:
- Cloudflare pages ’test-site-robertthecoder32’:
zal automatisch geredeployed worden wanneer de ‘my_public_site-test’ GitHub repo wijzigt - Cloudflare pages ‘prod-site-robertthecoder32’:
zal automatisch geredeployed worden wanneer de ‘my_public_site-prod’ GitHub repo wijzigt
In de git repo wordt de ‘public’ folder gebruikt om lokaal te testen,
en deze folder wordt niet opgeladen in de github repo (via .gitignore).
Op deze manier kan ik heel eenvoudig via een push naar GiHub het deployen in test of prod in Cloudflare opstarten.
4 - Client-side logica in Cloudflare Pages
Voor de “Contact” pagina werden enkel htmx tags (versie 2.0.6) gebruikt om client-side logic te voorzien in de html form.
Om deze reden werd deze web pagina niet als markdown maar wel als html file in Hugo aangemaakt.
5 - Server-side logica in Cloudflare Pages Function
Cloudflare Workers (en dus ook Pages Functions) zijn een serverless computing alternatief voor Lambda Functions van AWS.
Gebruik is mogelijk in het “Free Plan” van Cloudflare en vereist kennis van javascript voor de implementatie.
Een Cloudflare Pages Function “store-contact” werd aangemaakt in javascript om:
- een html request met contact data (feedback tekst en email als input form-data) te ontvangen
- deze input data te verwerken:
eerst wordt nagegaan of het maximum aantal requests per dag niet wordt overschreden;
stand van dag en request-teller dient hiervoor te worden bijgehouden;
indien ok qua aantal, dan wordt een email (inclusief input data) verstuurd naar de auteur van de website - een positieve of negatieve html response terug te sturen
In de implementatie van de Pages Function “store-contact” is ook logging voorzien,
zodat de uitvoering kan opgevolgd worden in Cloudflare dashboard.
Volgende kennis werd aangeleerd en volgende tools werden gebruikt voor de programmatie:
- vscode met “Rest Client” extension, node.js en wrangler cli als development tools op pc
- basiskennis van javascript en Cloudflare pages functions voor aanmaak van back-end code;
o.w.v. de eenvoud van de code, werd het hono framework niet gebruikt - kennis van api van volgende Cloudflare services:
opslag via KV (eventually-consistent edge key-value store, een alternatief voor Redis);
versturen van emails via de Resend Email API
In het gebruikte “Free Plan” van Cloudflare is ook het gebruik van “D1 SQL Database” als database mogelijk.
D1 is een SQLite database die in het “Free Plan” beperkt wordt tot maximaal 5 GB opslagruimte.
Deze service werd in ons voorbeeld echter niet gebruikt.
