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