With some background context, i was using WordPress for blogging purposes since 2013. Since then, the web dev scene has evolved with the rise of JavaScript frameworks such as Next.js and more recently css in html frameworks like Tailwind.
Free hosting
Nothing beats free. With Next.js, i can deploy multiple websites without worrying about hosting limitations. With WordPress even if i find a cheap host that can host multiple add-on domains, i am still limited by the RAM usage as WordPress is a dynamic website (every page load requires server workloads). With Next.js, everything is statically generated into pure HTML/CSS/JS.
Some free hosting options that are currently available
Vercel https://vercel.com/ Netlify https://www.netlify.com/ Firebase https://firebase.google.com/products/hosting Surge.sh https://surge.sh/ Loading Speeds User experience is top priority in my case. This blog loads way faster than what i used to have on WordPress. Will update this post after running it in the tools below.
Tools that i use
https://pagespeed.web.dev/ https://gtmetrix.com/ https://tools.pingdom.com/ Feature Parity Now, this got me slightly worried when deciding on Next.js. My worries were immature or missing features that i used to enjoy on WordPress blogs. However, after spending some time googling around i found that there are indeed workarounds that i can hack with JavaScript.
Some problems & the solutions i found
Had issues using React hooks in MDX - But here’s a workaround (LINK) Sharing to Social Media - https://www.npmjs.com/package/next-share Estimated Time to Read - https://github.com/diogomoretti/use-reading-time Copying code - This is a surprise for me as that was out of the box (see the code block below) Here’s an example on embedding a YouTube video in a nextjs post
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/Sklc_fQBmcs"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>There is a weird thing though. If i use the javascript format. You can see the semicolon gets appended to the Iframe component.
Developer Experience
In the past without continous integration, you had to export the file as a zip. Drag it into the Netlify platform to upload. This is a tedious and manual process.
Now, a simple push to master branch automatically builds my netlify project which is made possible with webhooks.
Open source & helpful community
I’m a fan of free and starter kits that does all the heavy lifting. I have no time to rebuild everything from a pure nextjs blank app.
This is a great nextjs tailwind starter kit that i highly recommend. It has almost everything you need for a personal blog. Great job Tim if you are reading!
https://github.com/timlrx/tailwind-nextjs-starter-blog
Caveats
This is NOT a recommended approach for non developers. Using the template requires knowledge in programming to debug errors that may be ambiguious. Things do break easily and requires you to modify source code. If you want to reuse the project, either you fork it or create a PR and hope the owner accepts it. e.g Not every project i have has an image, so when i removed the imgSrc property from projectsData it broke the app. I then had to make it an optional in another file.