Objective
For my public website, API services, and mailing list, I want a fixed domain name for “robertthecoder”.
I also want to make the entire website multilingual.
In addition to Dutch, all pages should also be available in English.
The language selection should also be available in the header.
The existing static website also needs to be expanded with “contact” functionality:
- an input form where users can submit comments or ask questions
- the processing of this input data should be done on an internet server
To properly test this website, I want three staging environments:
local (without the Cloudflare platform), test in Cloudflare, and production in Cloudflare.
Result
1 - Free domain name, DNS and web host
I applied for registration of the subdomain name “robertthecoder.eu.org” through the “eu.org” website.
This “eu.org” subdomain name would be granted free of charge and forever (no annual renewal required).
I then applied for and obtained free hosting and DNS for the aforementioned domain name through the “hostry.com” website.
About two and a half weeks after applying through “eu.org,” I sent an email to the hostmaster requesting information about the status.
After another week, I still hadn’t received a response, and therefore, I hadn’t been approved for registration of this domain name.
I then purchased the domain name “robertthecoder.org” from Cloudflare, the registrar, for $ 7.50.
This registration must be renewed annually for $ 10.11 per year.
I then set up “robertthecoder.org” as the domain name for my Cloudflare account.
This gives me my own public namespace and allows me to use more Cloudflare services for free.
This public website is now accessible at the following URL: https://www.robertthecoder.org
I’ve also used “Email Routing” to forward all emails for “XYZ@robertthecoder.org” to my personal email address.
2 - Make the website multilingual
All Dutch webpages and linked resources (PDF) were translated into English.
Multilingual support was then enabled through Hugo’s configuration.
The heading for all pages was also adjusted so that the language choice can be made.
The link to the RSS Feed was also modified to make it multilingual.
3 - Staging environments
Cloudflare provides in Pages for automatically deploying a website from public GitHub/GitLab repositories.
So, I created a GitHub account wih the repo’s ‘my_public_site’, ‘my_public_site-test’ and ‘my_public_site-prod’.
Locally, I cloned the Git repo ‘my_public_site’ and placed all the Hugo source code in it.
In the repo ‘my_public_site’, I created two new git submodules for ‘my_public_site-test’ and ‘my_public_site-test’.
In Cloudflare, I’ve changed the settings in Pages for this website:
- Cloudflare pages ’test-site-robertthecoder32’:
will automatically be redeployed when the ‘my_public_site-test’ GitHub repo changes - Cloudflare pages ‘prod-site-robertthecoder32’:
will automatically be redeployed when the ‘my_public_site-prod’ GitHub repo changes
In the git repo, the ‘public’ folder is used for local testing,
and this folder will not be uploaded to the GitHub repo (via .gitignore).
This way, I can easily initiate deployment in test or prod in Cloudflare via a push to GiHub.
4 - Client-side logic in Cloudflare Pages
For the “Contact” page, only HTML tags (version 2.0.6) were used to provide client-side logic in the HTML form.
For this reason, this web page was created as an HTML file in Hugo, not as Markdown.
5 - Server-side logic in Cloudflare Pages Function
Cloudflare Workers (and thus also Pages Functions) are a serverless computing alternative to AWS’s Lambda Functions.
Usage is available in Cloudflare’s “Free Plan” and requires JavaScript knowledge for implementation.
A Cloudflare Pages Function “store-contact” was created in javascript to:
- Receive an HTML request with contact data (feedback text and email as input form data)
- Process this input data:
First, it checks whether the maximum number of requests per day is not exceeded;
The daily status and request counter must be tracked for this purpose;
If the number is acceptable, an email (including input data) is sent to the website author - Return a positive or negative HTML response
The “store-contact” Pages Function implementation also includes logging,
so execution can be monitored in the Cloudflare dashboard.
The following knowledge was acquired and the following tools were used for programming:
- vscode with the “Rest Client” extension, node.js, and wrangler CLI as development tools on PC
- basic knowledge of JavaScript and Cloudflare Pages Functions for creating back-end code;
Due to the simplicity of the code, the hono framework was not used - knowledge of the APIs of the following Cloudflare services:
storage via KV (eventually-consistent edge key-value store, an alternative to Redis);
sending emails via the Resend Email API
The Cloudflare “Free Plan” also allows the use of “D1 SQL Database” as a database.
D1 is a SQLite database that is limited to a maximum of 5 GB of storage in the “Free Plan”.
However, this service was not used in our example.
