This website was created using a JS stack. It's been a long time since I have updated my personal site, you know how it is, you just never have time for it. You can never settle on a design. You add so much pressure trying to create a website worthy of the AWWWARDS and a design system like stripes. It has literally taken me a year to build we standard website. Thankfully using React has made the process easier and has allowed me to add features such as contenful, SSR, and my playground area (Desktop browsers only).
Stack:
Framework: React (Using Next.js) Hosting: ZeitNow (serverless)
Packages used:
"@contentful/rich-text-html-renderer": "^13.4.0"
"@rooks/use-interval": "^3.5.0"
"@sendgrid/mail": "^6.4.0"
"@types/body-parser": "^1.17.1"
"@types/express": "^4.17.2"
"@types/next": "^9.0.0"
"@types/react": "^16.9.17"
"@types/react-dom": "^16.9.4"
"axios": "^0.19.0"
"body-parser": "^1.19.0"
"contentful": "^7.11.3"
"cors": "^2.8.5"
"dotenv": "^8.2.0"
"dotenv-webpack": "^1.7.0"
"express": "^4.17.1"
"next": "^9.1.6"
"react": "^16.12.0"
"react-dom": "^16.12.0"
"react-markdown": "^4.2.2"
"typescript": "^3.7.3"
Why Next.js?
Next.js or to make my life easier Next is perfect for projects that require SSR (Server Side Rendering) as well as built in automatic routing. Although it's not out of my ability to do my own SSR and use React Router for routing, a simple 5 page website that pulls articles from a headless CMS such as Contentful or ButterCMS just does not need that fine amount of fine tuning. I personally prefer speed and convenience over (in my opinion) hard manual work for a simple/little output.
Why Contentful?
Contentful is an easy to use Headless CMS and has a generous free tier. As i'm using a JS only stack with a serverless configuration creating a database with a backend to support it was not needed. However, as my website grows along with the included playground this will most likely change to a JS stack with a server config.
Server Vs Serverless?
For me, so far serverless was the way to go. Using Github to host the files, Zeits NOW service works flawlessly with Next as the best part, it's completely free. There are some restrictions and caveats but for the little bandwidth my personal site will use, it will stay well within the free tier.
As my website expands, i will move it over to a Digital Ocean Nginx instance. This will happen around the same time as my next project. Project Wallboard!
Playground
Some call them sandbox's, some call them playgrounds (To-May-Toe/To-Mah-Toe). Either way, playground was a small example project I did to learn how to build custom hooks using react. I used storybook as the main idea behind it and was never really intended to be seen by anyone, never mind live on my website! (If your a mobile user, you wont be able to see it, not at least until I make it mobile friendly).
I will create a separate article for the playground at some point!