Config

I installed Ubuntu Server (22.04.05 LTS) on my 2011 Macbook. Then, I set it up to run websites and web apps. In total, estimated costs are $35/year with it running 24/7. Using Caddy DuckDNS to keep the IP records up to date I'm able to easily host websites & web apps. If you haven't tried creating your own server yet, but have been thinking about it I highly recommend you to try it out! Not only did I learn a lot about Linux, but I also learnt a lot about networking, dns records, and being able to host your own stuff with your own hardware is freaking awesome.

Hosting a Node.js Website

Design & Animation

While my friend Lars builds the actual machine that tracks the water temperature, I've been working on the front & back ends of the website. This was the first project where I used a dedicated animation framework (anime.js) in order to add unique effects to the design such as bubbles, a wave effect, and even some fish! This was also the first time I ever used Figma to properly plan out a website's design before starting to code. We are far from done, but we hope that by the end of 2026 we'll have a weatherbuoy floating in Schlachtensee.

Inspiration

I was motivated to create Cosmos because I wanted to have my own file storage interface that I could potentially host on my own server that was secure, private, and easy to use. I also wanted to learn about networking, authentication, and how file upload & downloads are handled. Also once it was up and running I wanted to be able to share files with friends and family and let them upload stuff as well.

The Work

I built Cosmos using Nuxtv3, and used Supabase to handle authentication and database stuff. For the UI I used a mix of NuxtUI's premade components, and hand-drawn icons! The big challenges when it came to Cosmos was the architecture behind file & especially folder upload/download. For a simple small file it was simple, but things got complicated when the file was big or someone uploaded a folder with hundreds or even thousands of files. In order to solve these issues I needed to implement systems to split up the uploads in chunks, which would eleviate the load on the server, and I also needed to implement a cleanup service that would keep track of uploads, and regularly clean up those that failed due to network interrupts or other unexpected interruptions.

Reality

Eventually I got a barebones version of Cosmos running, and even shared it with some people to test it out. The file sharing functionality worked well, but there were still quite a few bugs lying around. There was also a lot of room for improvement, and I realized that the infrastructure required for hosting a virtual drive service is quite expensive. I also needed quick wifi, which was not happening any time soon due to me living in Germany so I realized that I should put the project on hold until I'm in a better place physically where I could actually realistically host Cosmos for others to use! Thus Cosmos is not being worked on at the moment, but I do intend to continue working on it one day and create a finished product.

Github Pages

Github provides a free simple static site for each github account which can be found under "github_username.github.io". To modify the site you need to create a repository whos name perfectly matches your github username, in my case it was "isaacfeld.github.io". Once you've done that you can fetch the repo into your IDE of choice, and start editing. If you want to change the domain of the website you can create a text file called "CNAME" in the root of your project that contains the name of your custom domain (in my case "isaacf.me"). Then you'll need to register the custom domain in the repository settings after you've updated your own DNS records by adding an alias or A record that points to isaacfeld.github.io. Now you have a free website that you can put anything on!

Creating isaacf.me

I decided to go the full vanilla route when developing my personal website since Github pages has some built-in limitations as it requires a static site. Github pages lets you use directory-based url addressing, so when you create a folder called "food" then going to "isaacf.me/food" will automatically direct you to the index.html file under that directory. Another issue I noticed is that Browsers tend to cache your .css files so when you update the .css files the browser will still serve the old version of the .css file. The workaround I found was to add a version parameter when linking my stylesheet like so:

this solution is rather annoying though since you need to update every single link in all your index.html files to force browsers to load and use the updated stylesheets. I also highly suggest getting a minified jquery file and adding it to your project so that you don't need to write out "document.querySelectorAll" each time.