Building my blog: notes and reflections

Note: This English version is translated with AI from the original Chinese article and lightly reviewed for readability.

Tips: The blog is finally up and running. Building this version took me a little over ten days.

Why build a blog?

Last year, the year before that, and long long ago...

I often spent time reading other people's blogs. They wrote about their life experiences, project practice, study notes, and all kinds of personal stories. Some topics were huge and open-ended, like how a 35-year-old programmer looks back on ten or twenty years of work. Others were small and personal, like students sharing funny stories, awkward teenage moments, or first-love memories.

Exploring how people of different ages think, live, learn, and enjoy life always felt interesting to me. It also broadened my perspective. After visiting all kinds of personal websites, I slowly started wanting one of my own.

So I wanted to build a personal blog very early on - a place that I could design however I liked. ps: even if most of the time I may be the only one reading it...

This is also the first thing I think about whenever I want to make a project. I'm not even sure why I am this persistent. In the past, simply because I liked listening to music, I made several music players and even tried building video-related projects.

Even though a blog is a relatively simple project, I believe that if I use it well, it can still be very helpful to both my present and future self.

A personal blog is a platform for sharing information, but it is also a platform for showing what I can do. It helps me practice writing, expression, and even English - which is one reason I added internationalization. Many great creators have their own places on the web where they publish high-quality articles, share photos (if they enjoy photography), open-source projects, collections of demos, and many other things.

I really think this is both interesting and meaningful. So my blog was destined to exist.

What do I want to post?

When it comes to articles, I think most people still like reading stories - interesting moments from life, reflections, records of project practice, or deeper technical articles.

By contrast, ordinary fragmented technical notes or document summaries are not very meaningful for display in my opinion. They make the archive feel more crowded and messy.

So although I now have my own blog, I still prefer to keep more routine notes and documentation in tools like Yuque or Feishu. I want to keep a difference between those and the blog itself. The blog should contain more interesting stories, project practice, and similar long-form content.

As for shorter fragments - things that feel more like social posts or status updates - I think it would be better to build a separate dynamic module for them. Long articles and short updates should be separated.

Thoughts after building the site

As the first complete project I have really finished and shipped, I wanted to record some thoughts.

First of all, even if it is just a very plain dish, at least it is still a complete dish served on the table. Having something real that other people can see is exciting.

Before this, I often made demos, but they never felt like complete projects - for example: GPlayer

Although this project was finished in a short time, it helped me reinforce a lot of skills I had accumulated: practical use of Nuxt 4, using Docker, managing a GitHub project, and so on.

I think of this blog as version 2.0. Why? Because 1.0 collapsed before it was ever truly finished.

My original idea was too complicated. Features kept piling up, and that made it hard to bring the project to a real ending.

At that time I wanted basic blog functionality, a music player , and even a video player powered by streaming technology to play live performances - something my current server absolutely could not handle. I was also thinking about login, registration, comments, whether I needed an admin system, and many other things.

I wanted everything at once, but I definitely did not have the ability to do full custom work on all of it. Better to first build the rough house.

In the end I realized it was too hard to finish a version like that in spare time, so I abandoned 1.0 and replanned the project as 2.0.

The idea became progressive development: build the essential features first, then improve them over time.

The final approach was simple: think about the features the site needs, split them into smaller functional modules, and then implement them one by one.

• First, I used Figma to draw a simple draft. I am still not very skilled with it, so I could only sketch the basic layout.
• Then I handled the fundamentals: theme colors, accent colors, fonts, icons, theme switching, and internationalization.
• I implemented the core modules one by one - Header, Footer, Layout, Home, Blog, and so on. I chose to do it step by step and kept each module simple at first, then expanded it gradually.
• I left responsive layout until after the desktop version of each module was done. Since the project is relatively small, this felt manageable and also made it easier to observe how the whole page changed at different widths.
• Finally, I worked on smaller items such as SEO, image optimization, and visual adjustments. Those are easier to handle with a checklist and a clear priority order, just like real project work.

Overview

Basic stack

• Blog framework: Nuxt 4
• Styling: TailwindCSS
• Deployment: Docker
• Code hosting: GitHub

Why Nuxt?

I wanted to strengthen my Nuxt knowledge. My main stack is Vue, and Nuxt is the SSR framework that fits naturally with it. After several years of growth, both Vue and Nuxt now have relatively mature ecosystems.

Cloud server

Alibaba Cloud, 99 RMB per year, 2 cores, 2 GB RAM, 40 GB SSD, and up to 3 Mbps bandwidth.

If possible, I would still recommend a larger server. During Docker builds on the server, memory once ran out and the process crashed directly. Site speed and stability matter a lot, so I often built the Docker image on my own machine, uploaded it, and then pulled it on the server.

Domain

The domain is guoxk.me from Alibaba Cloud.

I like the .me suffix because it clearly suggests: this is my site.

Certificate

I use Alibaba Cloud's free personal certificate and enable HTTPS through Nginx configuration.

Deployment

• system: CentOS 7
• pm2: keep the process alive and recover if it crashes
• docker: containerized deployment for easier management and migration
• nginx: reverse proxy and SSL handling

For Node I use v22.17.0 LTS. Nuxt currently recommends Node 20+ LTS, while the local CentOS 7 environment only supports much older versions directly.

Next Steps

• Fix the remaining small bugs.
• Improve details such as blog layout polish, estimated reading time, word count, music binding for posts, richer markdown components, and a separate dynamic module.
• Add RSS subscription.
• Add a funny feature where clicking certain text triggers matching voice clips.
• Set up automated CI/CD deployment with GitHub Actions.
• Upgrade normal audio playback to streaming in the future when server resources are better.
• Add blog search later when there are more articles.
• Add friend links and other optional features.

Future

I definitely want to keep learning. In the future I may spend more time exploring graphics and rendering-related technologies.

As for projects, my next idea is to build a Vue admin platform of my own. For now I call it GTemplate-admin, and later I may split it into two versions, with another one named GAdmin (Guo's Admin).

As my skills improve and time accumulates, I hope this blog will slowly become more complete and add many more interesting features.