Recently, I wanted to reinvigorate my open-source project Clarity, an icon theme for Linux (GTK+).
The icons allow users to create custom colors by adding SVG templates. And I wanted to have a platform where users would be able to submit their own custom templates for the icons.
The problem is that if I create a new website for my project that requires recurring payment, and I'm no longer alive, the website will disappear. So to keep it going in perpetuity, I needed a free domain and free hosting. I decided to use PHP for this new project.
In this article, I'll show you step by step how to:
Get a free .eu.org domain.
Set up name servers on Cloudflare.
Set up hosting on Wasmer.
Glue everything together.
Table of Contents
Requirements
For this article, I assume that you already have a GitHub account and know how to create Git repositories. You should also have a Cloudflare account. The code uses PHP, but you don't need to know it to go through this tutorial. Wasmer supports other languages and frameworks that you can use instead if you like.
About Wasmer
First, let me explain how hosting works with Wasmer. You may have had problems with hosting tools that take too long to wake up your project when it hasn't been used for a while. Well, you'll be happy to learn that in Wasmer, a cold start takes less than 90 milliseconds.
Applications on Wasmer are stateless, so if you want to keep user data, you'll need a persistent store. It natively supports cloud MySQL instances and network protocols for external PostgreSQL and MySQL/MariaDB, as well as file-based SQLite through persistent volumes.
Wasmer also supports Python, Rust, PHP, and Node.js, and it plans to support GoLang soon, too.
You can host applications in Django, Flask, FastAPI, WordPress, Symfony, Laravel, Next.js, Nuxt, Hugo, Astro, Vite, and others as well, so you have lots of options.
The platform also supports CGI, which allows you to use any language that compiles to a binary executable like Rust, C, or C++.
What is DNS?
Now is a good time to explain what DNS is. DNS stands for Domain Name System, and it's a way to translate human-readable names like freecodecamp.org to the IP address of a server where the website or web app is located.
In short, the system works like a tree of servers. At the root there's the Root Server, which directs your request to the TLD (Top-Level Domain) Server responsible for .org extensions.
This TLD server points to the specific Authoritative Name Server of the domain. A Name Server is a specialized server that acts as a storage folder for a domain's official DNS records, telling the internet exactly where to find the website's assets.
Inside these records, you'll find different types of pointers. One common type is the CNAME record (Canonical Name). Instead of pointing a domain directly to an IP address, a CNAME record acts as an alias that maps one domain name to another domain name. For example, it can forward www.freecodecamp.org to the root freecodecamp.org.
How to Create a Wasmer Account
Let's jump in and create a Wasmer account so we can get started. To do this, you need to go to wasmer.io and pick the Hobby plan:
Then create an account:
The simplest way forward is to connect to your GitHub:
After you authorize via GitHub, you should be logged in and see your avatar in the top right corner:
How to Create a Wasmer PHP Project
First, you need to create a new GitHub repository for your PHP project. For this tutorial, I created one with a simple index.php file that shows my new domain name (I'll show you how to register the domain name in a bit).
<?php
header("Content-Type: text/plain");
echo "clarity-icons.eu.org";
?>
After you commit the file, this is how your repo should look on GitHub:
This was my repository: https://github.com/jcubic/Clarity-icons. But then I decided to add the website as part of my main repo.
After you create a GitHub account, you have to tell Wasmer about it. To do this, you need to add a Wasmer GitHub account. Create a new project and click "Add GitHub Account":
You should see a popup where you can select the account where you want to install the Wasmer app. If you're not part of any organization on GitHub, you should see only your own GitHub profile. Select that one.
It should redirect you to GitHub, where you can either provide access to all repositories or pick the one you want. I usually just give access to specific repositories. So I've selected my new repo here:
After you set up permissions, you'll need to import the app into Wasmer:
After you click import, you can set up some details about your project like the owner, project link, and so on:
After you click "Deploy", you'll need to wait awhile for deployment to happen:
When it finishes, you should see this celebration page with confettii:
When you go to the dashboard, you should see that the app is running:
This is how the website looks live:
In the settings, you can see how to add a custom domain (that we'll set up in a minute).
It shows the CNAME DNS record that you need to include in order for the custom domain to work properly.
How to Set Up Cloudflare
Next, we'll set up Cloudflare, which allows you to manage DNS. We'll keep our new domain there.
After you create a Cloudflare account, you'll need to go into the domain overview section:
Click "Add domain" and pick "Connect a domain":
Then you need to name your domain:
Then pick the Free plan:
After you create your domain (you'll need to wait a few seconds), you can set up DNS records (we already have the CNAME from Wasmer).
Add a new CNAME record from Wasmer:
After you click "Continue activation" you should see this page with two nameservers:
We'll use those two domain names when we register the eu.org domain.
How to Register an eu.org Domain
To create a .eu.org domain, you first have to create an account. For this, you'll need to visit https://nic.eu.org/arf/en/contact/create/ and fill in the details, like your address and a phone number. That type of information is required for any domain you register.
In the above screenshot, I've added "Fax" instead of "Phone". I corrected that later. You can always edit the information if you make a mistake.
After you click create, you should see this page showing that you successfully created your contact page:
After you validate your email (click the activation link), you should see this page stating that your contact handle is now valid:
After you log in, you'll see a form where you can add domains:
Then just click and select a domain name.
I initially picked the clarity-icons.eu.org domain, but on the page https://nic.eu.org/opendomains.html, they don't recommend using a .eu.org directly. Instead, they recommend picking one of the subdomains (an additional prefix name with a dot). I've picked .pl.eu.org since I'm from Poland.
The process of creating a .eu.org can take a few days. I registered an account on the 1st of June and got the below email on the 6th of June. So a week is a safe bet.
The domain appeared after about 24 hours.
I've checked the next day, and my domain, clarity.pl.eu.org was up.
Conclusion
Creating a sustainable website for your open-source project that will remain long after you're gone is possible. This type of setup is also great for small personal projects.
If you have any questions, you can contact me on Twitter/X, my DMs are open. You can also check out my personal blog.