Debaucus
Published on

Debauc.us

activenext-jscloudflarewebsite

A case study on self-improvement.

Making a portfolio website, and moreover what to build it with, is a difficult decision. I have worked with many different types of languages, frameworks and design philosophies and this is some of the reasons I settled on using what you see before you:

Tailwind

Designing within the code classes itself and keeping CSS extremely minimal is a huge plus.

NodeJS

After building a few minor apps within NodeJS, I fell in love and haven't looked back.

Cloudflare Pages

Now this one is a little harder to pin-point. I could have continued using my standard hosting practice and hosted my own website, so why? Try something new and see how it works, that's why!

Github

It's Github. If you are reading this and don't use Github. Go, research, now.

NextJS Framework

Originally I wanted to get into learning React as a framework, but it lacks the cache and aggressive SEO features that a website builder like myself seeks. I want to see what NextJS can do for me going forward.

This project runs on a mix of generation and static content. Each blog posts content (like this one) is all manually entered into each page as there is no database to pull from and the content won't be edited if ever.

However, the content on the homepage is created using a loop script to place each of the details required for each post. This makes adding new ones far easier and also allows for quick changes to be applied to the design of the site!

So how is it going?

Well! Cloudflare Page hosting syncs well with domains, so routing the custom domain to the blog was simple. Email routing means I can forward any email that comes through to the site to my own personal Gmail, which is great! I do need to work out how to direct the mail back though the domain in a hands-off manner but that's for a future update.

What to look out for

The first thing that really hung me up was NodeJS and NPM versioning. So when you first use Cloudflare Pages (at the time of writing) the default versioning is 14.x.x for Node and 8.x.x for NPM. This left me with some difficult decisions for editing my site and packages to make it work. However, you can set an environment variable to update Node! Shoutout to the Cloudflare Discord for help with this.

For Node Versions (which should update NPM to the appropriate version) use:

Variable name - NODE_VERSION

Value - 16.18.0