Hosting Portfolio On Edge Network

I’ve been working in the industry for a while, and I recently realized that every great programmer has their own brand. Whether it’s a blogging website, a portfolio site, books, or tech talks, they all contribute to building a strong personal brand. So, I decided to give it a try and create my own portfolio website

The technology

At first, I decided to create my profile using create-react-app. However, I soon realized the importance of having an SEO-friendly website. As my website was a single-page application, I was concerned about how people would find me using search engines.

Remix js to the rescue

Remix js is a cool framework for building full-stack apps that supports server-side rendering and uses React on the frontend. However, one downfall is that integrating frontend libraries like Material UI or Antd can be challenging and time-consuming. Fortunately, @brocktho from the Remix Discord channel pointed out that we can use Material Base to simplify the hydration process and overcome most of these issues.

Btw, here’s the link of the thread i started in Remix discord channel.

Due to my mediocre front-end skills, the site I created isn’t very fancy. I plan to refine it later and improve its overall appearance.

D-d-deployment

At first, I had a look at AWS Lightsail as a potential hosting solution. The pricing was very decent, with only $3.5 per month for a VPS with a static IP. Additionally, since I didn’t have an account with the platform before, they gave me 12 months of free access to Lightsail (although I only needed a small VPS for my portfolio site). After a few hours, I set up a clean Ubuntu 20.04 instance but ultimately found a better hosting solution and didn’t end up using this instance for my site.

Cloudflare Worker and Cloudflare Pages

Cloudflare offers the ability to create a full-stack web app using their Workers and Pages. However, it may have some limitations due to the CPU time restrictions when heavy computing is required. Putting the computing and CPU limitations aside, deploying our app on the platform is relatively easy, and we only need to use Pages

Beware the edge function

Cloudflare’s edge function is very useful as it enables us to ship our app to the edge, resulting in faster page load times for users. However, after several failed deployment attempts, I discovered that the Indie stack I was using did not support deployment on edge functions. Fortunately, Remix came to the rescue by offering various deployment strategies when I bootstrapped the project. All I had to do was create a new project and port everything into it, saving me hours of wasted time on deployment configuration

Conclusion

After completing a pet project like this one, I learned that by putting our ego aside and focusing on the results and MVP, we can save many hours of work that could otherwise be accomplished with just a few clicks.

If you are curious, here’s the link to my portfolio site