TL;DR. After putting it off for too long, I finally built this site. Initially I created this site for professional reason as my online resume, but after a while I thought it wouldn't be wrong if I continued the development into a semi-blog site. This is the first time I built my personal site as well as my blog, and I will try to explain in a simple way kind of technologies that I used to build this site.
- Nuxt
- UI Frameworks
- Nuxt Content
- Vercel
- Others
1. Nuxt
Originally I used Vue purely as my first setup, but I think I need to change it along my development phase when I try to switch this site into semi-blog type. And then I think Nuxt will be a good fit for it, Nuxt is one of open-source framework that allows us to build full-stack websites. With Vue behind the scenes, I chose Nuxt as a starting boilerplate because at first time, I used to use Vue as my daily JavaScript framework. So it will be easier to improve my skills by learning Nuxt.
Nuxt provides many features that increase our DX (Developer Experience) such as:
- Auto-import (not only for components; Nuxt also auto-importes our functions via composables and Vue's APIs so we don't have to import them manually).
- File-based routing (automation route generation based on our file structure).
- Server-route (we can create API endpoints in Nuxt).
- Hybrid rendering mode (we can rule which route should be rendered in which mode)
- Etc.
2. UI Frameworks
I do base styling with Tailwind CSS, as we know, one of the most popular CSS frameworks nowadays. I also use Tailwind CSS Typography plugin for setting up my post pages. Tailwind CSS provides a utility-first CSS class system, and it's given me the feeling of building a web page with raw CSS and allows me to build whatever design system I want to.
The next is Nuxt UI, which provides tons of ready-to-use Vue components so we can speed up building our UI system. Since I try to keep my UI minimalist, I used it in a little detail, such as icons, provided by Iconify.
3. Nuxt Content
This site has no databases. All I do is write in markdown and JSON files, and Nuxt will transform them into documents via this plugins. Since this is just a personal site, I think I don't need a database yet. Nuxt content also supports other type files (YAML, CSV) if you want. All the posts are stored in a folder, and I can call them on the page wherever I need them.
Actually I am writing a post by writing it in a markdown files. I can configure the page frontmatter such as title, description, etc.
---
author: Riza Afandi
title: How I built this site
description: Technical description how I built https://rizaafandi.me/
_draft: false
image: ONuLIzB0UtA
tag: technology
published: 4/05/2024 14:30
published_at: Central Java
---
TL;DR. After putting it off for too long, I finally built this site. Initially I ...
4. Vercel
So where I host this site live? Here is, Vercel provides free deployment for our front-end project. I can directly commit to my Github and a new deployment will triggered resulting our latest update. Since this is just a blog site, I think I don't need optional server to host my site.
5. Others
Other than what I described above, I also used some tools to help this site get better SEO performance. Such as Nuxt SEO to setup sitemaps and dynamic Open Graph images. I also use rss package library to generate RSS feeds from my blog posts. For the discussion section, I use Giscus, a Github Discussion-powered comments system.
I think that's all for now. Since I will keep the development progressive, any other additional updates will be written incrementally, TIA.