How to Build a Zero-Cost Personal Project with PHP, Wasmer, and Cloudflare

<p>Recently, I wanted to reinvigorate my open-source project Clarity, an icon theme for Linux (GTK+).</p> <p>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.</p> <p>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 <strong>free domain</strong> and <strong>free hosting</strong>. I decided to use PHP for this new project.</p> <p>In this article, I'll show you step by step how to:</p> <ul> <li><p>Get a free .eu.org domain.</p> </li> <li><p>Set up name servers on Cloudflare.</p> </li> <li><p>Set up hosting on <a href="https://wasmer.io/?utm_source=freecodecamp&amp;utm_medium=article&amp;utm_campaign=jcubic">Wasmer</a>.</p> </li> <li><p>Glue everything together.</p> </li> </ul> <h2 id="heading-table-of-contents">Table of Contents</h2> <ul> <li><p><a href="#heading-requirements">Requirements</a></p> </li> <li><p><a href="#heading-about-wasmer">About Wasmer</a></p> </li> <li><p><a href="#heading-what-is-dns">What is DNS?</a></p> </li> <li><p><a href="#heading-how-to-create-a-wasmer-account">How to Create a Wasmer Account?</a></p> </li> <li><p><a href="#heading-how-to-create-a-wasmer-php-project">How to Create a Wasmer PHP Project?</a></p> </li> <li><p><a href="#heading-how-to-set-up-cloudflare">How to Set Up Cloudflare?</a></p> </li> <li><p><a href="#heading-how-to-register-an-euorg-domain">How to Register an eu.org Domain?</a></p> </li> <li><p><a href="#heading-conclusion">Conclusion</a></p> </li> </ul> <h2 id="heading-requirements"><strong>Requirements</strong></h2> <p>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.</p> <h2 id="heading-about-wasmer">About Wasmer</h2> <p>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.</p> <p>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.</p> <p>Wasmer also supports Python, Rust, PHP, and Node.js, and it plans to support GoLang soon, too.</p> <p>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.</p> <p>The platform also supports <a href="https://en.wikipedia.org/wiki/Common_Gateway_Interface">CGI</a>, which allows you to use any language that compiles to a binary executable like Rust, C, or C++.</p> <h2 id="heading-what-is-dns">What is DNS?</h2> <p>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.</p> <p>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 <code>.org</code> extensions.</p> <p>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.</p> <p>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 <code>www.freecodecamp.org</code> to the root <code>freecodecamp.org</code>.</p> <h2 id="heading-how-to-create-a-wasmer-account">How to Create a Wasmer Account</h2> <p>Let's jump in and create a Wasmer account so we can get started. To do this, you need to go to <a href="https://wasmer.io/">wasmer.io</a> and pick the Hobby plan:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/6a00593d-5e5a-41d2-bc82-c3b061f22ff8.png" alt="Wasmer sign up page that allows you to pick Hobby or Pro plan" style="display:block;margin:0 auto" width="1453" height="873" loading="lazy"> <p>Then create an account:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/8299cdf3-57be-4424-a68d-a07c08cbde68.png" alt="A Screenshot of a Wasmer page were you create your account. It has username, email, password form and allows you to use Google/GitHub to create your account." style="display:block;margin:0 auto" width="1329" height="1063" loading="lazy"> <p>The simplest way forward is to connect to your GitHub:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/26a3a344-011b-4a37-8d22-275ac6c02f6f.png" alt="The screenshot that shows a popup to authorise Wasmer page when you use GitHub as you authentication" style="display:block;margin:0 auto" width="1302" height="1050" loading="lazy"> <p>After you authorize via GitHub, you should be logged in and see your avatar in the top right corner:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/67abeb45-ca0b-44d7-a5e3-1eefecdcae5b.png" alt="Wasmer screenshot showing an avatar and a menu that shows signed in as jcubic with links to your profile, settings, join discord, and sign out." style="display:block;margin:0 auto" width="295" height="371" loading="lazy"> <h2 id="heading-how-to-create-a-wasmer-php-project">How to Create a Wasmer PHP Project</h2> <p>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).</p> <pre><code class="language-php">&lt;?php header("Content-Type: text/plain"); echo "clarity-icons.eu.org"; ?&gt; </code></pre> <p>After you commit the file, this is how your repo should look on GitHub:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/e50b9e14-5f2f-427c-b868-217155ec8871.png" alt="A screenshot of the GitHub repo with a single index.php file and no README" style="display:block;margin:0 auto" width="1165" height="675" loading="lazy"> <p>This was my repository: <a href="https://github.com/jcubic/Clarity-icons">https://github.com/jcubic/Clarity-icons</a>. But then I decided to add the website as part of my <a href="https://github.com/jcubic/Clarity">main repo</a>.</p> <p>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":</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/49e2e192-2b20-4a5f-baba-c68aa61acdc2.png" alt="A screenshot of a page in Wasmer that shows at the top two cards one to import from GitHub and one to drag &amp; drop your site. At the bottom are list of Templates: Wordpress Starter, Flask Starter, Hugo Starter, Gatsby Starter" style="display:block;margin:0 auto" width="1381" height="1150" loading="lazy"> <p>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.</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/18a96d88-d473-4aae-b9cc-0e39c4c81737.png" alt="A screenshot of a modal that allows you to install Wasmer app into your account or organization" style="display:block;margin:0 auto" width="1406" height="1180" loading="lazy"> <p>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:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/330e4072-3b9b-42d5-96b6-fac681f1074f.png" alt="A screenshot of a page that allows Wasmer app to give projects. The option to select all repositories is unselected and instead a single repo jcubic/clarity-icons is. There is a button labeled Install and Authorize." style="display:block;margin:0 auto" width="686" height="969" loading="lazy"> <p>After you set up permissions, you'll need to import the app into Wasmer:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/93267bbb-0321-4335-a9aa-2f4e491d2724.png" alt="A screnshot with a card that says Import from GitHub that has a dropdown with GitHub icon and jcubic name. Below there is a repository called clarity-icons and a button labeled Import" style="display:block;margin:0 auto" width="679" height="453" loading="lazy"> <p>After you click import, you can set up some details about your project like the owner, project link, and so on:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/3d5be9b9-8fbd-4f7f-8b4a-88044b2b064d.png" alt="A screesnhot of the page where you can configure the project. It shows the project link (clarity-icons.wasmer.app), project preset with selected PHP and version 8.3" style="display:block;margin:0 auto" width="939" height="1080" loading="lazy"> <p>After you click "Deploy", you'll need to wait awhile for deployment to happen:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/961a7494-e05a-4691-bae8-e5bef94ec206.png" alt="A screenshot of page that says Configure Project completed and shows a deployment progress indicator" style="display:block;margin:0 auto" width="938" height="590" loading="lazy"> <p>When it finishes, you should see this celebration page with confettii:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/0bd084d2-66e4-4dc2-9789-473efbd58383.png" alt="Deployment congratulations page with confetti" style="display:block;margin:0 auto" width="1509" height="1012" loading="lazy"> <p>When you go to the dashboard, you should see that the app is running:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/2b2ffdfb-7239-49ee-8166-ea228ff6c680.png" alt="Main Wasmer project dashboard for clarity-icons project with status ready and screenshot of the website" style="display:block;margin:0 auto" width="1470" height="973" loading="lazy"> <p>This is how the website looks live:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/1987b13c-cd8f-4ccb-936d-89c5fc284084.png" alt="A screenshot of the browser windows that shows URL clarity-icons.wasmer.app. The page shows text: clarity-icons.eu.org" style="display:block;margin:0 auto" width="473" height="134" loading="lazy"> <p>In the settings, you can see how to add a custom domain (that we'll set up in a minute).</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/5a7f5775-c9b9-49be-987b-276916104cee.png" alt="A screenshot of DNS configuration for the clarity-icons project. IT shows CNAME record that you need to add to enable a custom domain." style="display:block;margin:0 auto" width="1407" height="1228" loading="lazy"> <p>It shows the CNAME DNS record that you need to include in order for the custom domain to work properly.</p> <h2 id="heading-how-to-set-up-cloudflare">How to Set Up Cloudflare</h2> <p>Next, we'll set up Cloudflare, which allows you to manage DNS. We'll keep our new domain there.</p> <p>After you create a Cloudflare account, you'll need to go into the domain overview section:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/b9962ff0-9d7d-4b46-be40-67c2eec85797.png" alt="A screenshot of the page where you can add a new domain" style="display:block;margin:0 auto" width="1750" height="670" loading="lazy"> <p>Click "Add domain" and pick "Connect a domain":</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/0feaf033-a185-41ae-998a-5bdf4c5f77f4.png" alt="A screenshot of a page with a list of options: Connect a domain, Transfer a domain, and Buy a domain" style="display:block;margin:0 auto" width="815" height="455" loading="lazy"> <p>Then you need to name your domain:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/176d8c85-b85d-4969-b7cf-ab1cd7220a90.png" alt="a form to connect your domain with one input box that has domain name &quot;clarity-icons.eu.org&quot;" style="display:block;margin:0 auto" width="807" height="409" loading="lazy"> <p>Then pick the Free plan:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/aad724cf-f59f-48c7-8071-cc3106aaf77f.png" alt="Option to pick one of the 4 plans, the first on the left is Free $0" style="display:block;margin:0 auto" width="1898" height="1334" loading="lazy"> <p>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).</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/82d6fcda-ab5e-477e-b09b-e8a379a7050f.png" alt="A screenshot of page to configure DNS without any record" style="display:block;margin:0 auto" width="1128" height="1311" loading="lazy"> <p>Add a new CNAME record from Wasmer:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/f4c9c419-cf3e-4667-adf9-14c22917978e.png" alt="A screenshot of a page for domain clarity-icons.eu.org with one DNS CNAME record that has the name clarity-icons and ID from Wasmer" style="display:block;margin:0 auto" width="1125" height="1294" loading="lazy"> <p>After you click "Continue activation" you should see this page with two nameservers:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/18874ad2-3136-46ef-8a26-b763ab3b2ff0.png" alt="A screenshot of the page that shows how to add Cloudflare name servers" style="display:block;margin:0 auto" width="924" height="917" loading="lazy"> <p>We'll use those two domain names when we register the eu.org domain.</p> <h2 id="heading-how-to-register-an-euorg-domain">How to Register an eu.org Domain</h2> <p>To create a .eu.org domain, you first have to create an account. For this, you'll need to visit <a href="https://nic.eu.org/arf/en/contact/create/">https://nic.eu.org/arf/en/contact/create/</a> and fill in the details, like your address and a phone number. That type of information is required for any domain you register.</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/dc97078f-fa42-4c9f-893b-db08a5f9504b.png" alt="A screenshot of a simple form that has user details: username, email, password, address, phone number and a button labeled create" style="display:block;margin:0 auto" width="1631" height="680" loading="lazy"> <p>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.</p> <p>After you click create, you should see this page showing that you successfully created your contact page:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/99b74695-4902-488c-9d0c-4078cd654deb.png" alt="A pages that says: Contact sucessfully create as JTJ18-FREE. Please check instructions sent t o jcubic@jcubic.pl to validate it." style="display:block;margin:0 auto" width="989" height="128" loading="lazy"> <p>After you validate your email (click the activation link), you should see this page stating that your contact handle is now valid:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/d4c25b8b-af6c-4d41-b8eb-ae4012303766.png" alt="A page with text &quot;Your contact handle is now valid&quot;" style="display:block;margin:0 auto" width="989" height="134" loading="lazy"> <p>After you log in, you'll see a form where you can add domains:</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/2a413835-2d7c-4657-8e0e-10f0a456a7ea.png" alt="Authenticated page for JTJ18-FREE user account, with a button to add a new domain." style="display:block;margin:0 auto" width="990" height="231" loading="lazy"> <p>Then just click and select a domain name.</p> <p>I initially picked the clarity-icons.eu.org domain, but on the page <a href="https://nic.eu.org/opendomains.html">https://nic.eu.org/opendomains.html</a>, 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.</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/88b2f036-5374-47cb-a408-521ccd42253e.png" alt="A screenshot of a form to add a new domain with user information" style="display:block;margin:0 auto" width="992" height="731" loading="lazy"> <p>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.</p> <img src="https://cdn.hashnode.com/uploads/covers/60fdacd518fbbb77c946882e/f89b6cc1-34ea-4d91-b8ea-6f600cb194a4.png" alt="Email confirmation that says that the clarity.pl.eu.org was created with details about domain and text: &quot;Please allow about half a day for propagation&quot;" style="display:block;margin:0 auto" width="744" height="734" loading="lazy"> <p>The domain appeared after about 24 hours.</p> <p>I've checked the next day, and my domain, <a href="https://clarity.pl.eu.org/">clarity.pl.eu.org</a> was up.</p> <h2 id="heading-conclusion">Conclusion</h2> <p>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.</p> <p>If you have any questions, you can contact me on <a href="https://x.com/jcubic">Twitter/X</a>, my DMs are open. You can also check out my <a href="https://jakub.jankiewicz.org/blog/">personal blog</a>.</p>