Choosing the right technology for my Personal Website Version 2

Cydrick Nonog's profile picture

Cydrick Nonog

Published on Sun May 08 2022

Choosing the right technology for my Personal Website Version 2

For this past few weeks, I just decided to redo my personal website and use a different Technology. Making my website more dynamic and appealing is what I'm looking for.

Deciding the technology stack to use

Before I start developing my second version of Personal Website. I think what should be my website looks and what are the technology to use.

I first check my old website, it was built using Nuxt2 and deployed it in Netlify. My problem to my current personal website is that if I need to add content I need to add / change in my code. So this give me some hassle I want to add some stack or info it will need to change the code, push it and deploy it.

So I decided to use an Headless CMS and a free hosting that can server dynamic data or what we call serverless hosting.

Choosing Headless CMS

I decided to look for free headless cms. So came up looking into different Headless CMS around. But what I'm also looking for is a less setup. Mean I really don't want spending time on creating a CMS or using open source headless cms like strapi , where I still need to setup it first and create a database and so.

So I look for a SaaS platfrom that was already well know and with a good reputation. I found a lot, but GraphCMS and Contentfull is the two what I really look for.

Both of GraphCms and Contentfull has almost same features and also has a good documentation and tutorials. And both of them are easy to use. This give same approaches, like creating your own model, fields, adding content and more.

But still, I should only use one, the one I choose is more user friendly and an advantages that I can add more projects. Another thing is I think the documentation and tutorial is much easier to follow. Yes, that is GraphCMS, what another good thing with GraphCMS is the setup from scratch going to your desired content. The whole setup will provide you just a click and go. You can also choose from a pre made templates of models.

What I also want to it is, it has this api playground where you can use to fetch data. So that in your frontend development you can use the one you have in api playground, btw, the grapcms uses GraphQL so this make you more easier to fetch your data.

Since graphcms is using graphql means all you need to integrate to you frontend is just the graphql package.

Faster development and faster integration.

Choosing my Frontend stack and Design

Since I'm using Headless CMS, mean for your frontend you need to code it and make your own frontend.

To be honest I don't need to think of the stack I use for it, I just go to what I usually use in my frontend development.

So I use Nuxt3 (Vuejs) as the framework. I use TailwindCSS and Daisy UI for my CSS.

But what really made this difficult is thinking the design, I'm not a designer so it took me sometimes to think for this. So what I did is to check some personal website and base it to that. And what I found is a really cool personal website of Brittany Chiang and also check if I can use her design, so I check her repository Personal Website V4 and found out that a lot of developers already forked her website and indicated there that it can be use. But since her website is using ReactJs and my plan is to use Nuxtjs, so instead of forking it. I just redo it using NuxtJs, so no fork with it. But ofcourse even I did not fork, I still give credit to her.

Choosing where to Deploy

Of course this project will not be completed without publishing it. So again I took sometimes to look again where I can deploy it.

Yeah still Netlify is one in my choice, but still I consider to use Vercel, I really like vercel because it can give you serverless, to be honest you can also do it using Netlify using On Demand Building and Edge (Beta). But since I really want to test Vercel so I took it.

What good with Vercel and Netlify is that GraphCMS support them, so once you have changes in GraphCMS it will automatically redeploy the static files that was created, if you are going to use static file.

In this project I really want to use serverless, instead of static. But the blocker is grapcms only support 1Million calls of api. yeah so far this is already a lot. But yeah still the limit is their, so I decided to just go with static file, and just integrate it. So that once I updated something in GraphCMS it will just redeploy the generation of the file.

Conclusion

Choosing the right technology stack is one of hardest thing when developing, we have a lot out their, but the main thing you need to look out is the one you really need and the purpose of you project.

In my personal website version 2, I choose the technology that I think that can finish my project in the faster and easy way. Using GraphCMS + Vercel is a new thing for me on this time when I write this. Trying different technology is a way of learning and also a way to know what should you use for your next projects.

My new personal website can be found here https://cydricknonog.me/, this is very different to my old website, https://cydricknonog.netlify.app.