Setting up hosting and WebGL

Hosting my portfolio and WebGL projects

Welcome back!!!

I recently finished my portfolio site and I am happy to say that I am now hosting it on CloudFlare. There are a few reasons I decided to go with CloudFlare. Mainly I wanted something easy to automate CI/CD and have something cheap. CloudFlare offers both of those things, SSL and CDN for free. I will need to pay for excess usage but I doubt that will be anytime soon.

I have been using CloudFlare for years now starting from my first job as a support technician at an MSP. CloudFlare offeres competive pricing for domains and the free plan is more than enough for my needs.

Let's talk CI/CD. When creating a website or any development project it is important to have a way to deploy the changes. I love the simplicity of CloudFlare pages and the fact I can link my private GitHub repos to it. When ever I push a change to the repository the changes are deployed to the site. Once I was happy with the site I linked my domain to the CloudFlare page and it setup the DNS and SSL for me. Another really great feature is I can setup branches and environment variables to deploy different versions of the site.

Now the tricky part. I wanted my portfolio to be able to host my WebGL projects. The tricky part here is that CloudFlare pages only serves static sites. I had to convert my NextJS app to export to static HTML and rebuild my Unity WebGL projects to PWA template and enable Decompression Fallback. This allows the site to run JS while being hosted as a static site. I also built it in a way that I can upload as many WebGL builds as I want and they will all be hosted on the same site.

That's enough rambling for now. Go check out my Vegetable Ninja game to see this in action.