In August 2020, when I was graduated from college, I have so much free time back then and I wondering why I don't make a simple project. A personal website is cool, also I would like to have it as my portfolio to showcase my projects and place to post my writing. This project was only being an idea last year, and because of my laziness, I just started working on it April 2021 :D and finally this website is live on May!

Here's some technologies used on my website, btw this explanation might be very technical for non IT students, but I hope you still get what I'm trying to share ✌️.

1. NextJS + TailwindCSS

This is my favorite go to when I working on Web project, since NextJS is based on React so it's pretty much the same with some additional features. NextJS offers server-side rendering and static site generator while still maintain the power of react. That's why sometimes it is called "hybrid". Most of the tasks that require a higher level of SEO will receive many benefits from it.

Next is TailwindCSS, a framework for styling my website. For someone who likes to design, but too lazy to start from scratch and not really likes the limitation of UI components, I think tailwind CSS will suit you. It's actually very simple, you can just styling the component in your JS files and very less likely to touch the CSS files. Using tailwind, my speed of development has been incredibly fast. Ah almost forget to mention, they support responsiveness in the first place.

However, one drawback of using Tailwind CSS is the styling is general common use case, if you have a specific unique design style, I believe you have to make it on your own in the CSS files. But for me, it doesn't really matter.

2. Headless CMS

At first thought of making a blog, the first service/website that comes to mind is wordpress. However, after I researched a bit, turns out that I can't use their free plan. I need to subscribe business plan to be able to call an GraphQL API from my custom website. This service is cost me 300k per month. Such an expensive price right, definitely will choose another platform ahaha.

Next option is either I search for another headless CMS or I'll go with markdown file as last option. By the way, in the NextJS documentation, they provide a lot of example for the blog here. This example was very comprehensive from the page UI styling until the API request for each CMS. I'd recommend reading this first if you want to make a blog on your own.

Finally, after a very very long research, that spends almost, 1 hour. I decided to go with DatoCMS. It has a rich text editor (notion like) and I'll just use their library in the frontend to display it. It provides a GraphQL API that then will be called to show my blog data. Also, it offers CDN that I used to store all images on this website. And most importantly their free plan is already fulfills my needs.

3. Hosting using Vercel

I use vercel for my hosting, no particular reason for using this, since vercel built by the same team that made NextJS, I feel that it is easier :D

To set up vercel, I just connect with the repository in GitHub, by then, it will automatically deploy if there is a new push on the branch.

4. Google Analytics

This is a very essential tool when you make a website, especially a blog website. Google Analytics provides information about user engagement, views of a specific page, and many more. Also, the setup is quite easy. You just generate a new google tracking id and just put it on the root of your website.

Still not much traffic tho, but will see later when I regularly post a content 😄

Overall this website is very simple, I'm pretty much satisfied with this website. I maintain the simplicity and minimalism of the website. Perhaps in the future, I will be updating the design of the website (maybe). Also will adding more projects and post blog regularly in the future.

Anyway if you wanting to know the source code just send me a message, I am happy to share it with you.

Cheers!