In this article, I will continue from the previous article and explain the process of implementing the blog functionality.

1. What is Blog Functionality?

First, I had to think about the definition of a blog. And at the same time, I needed to consider why I wanted to run a blog.

What is a blog? Why do it?

'Blog' goes beyond a simple online space and has a deep meaning as a place for self-expression and social communication for modern people. Humans are inherently beings who want to leave their stories behind. From ancient cave paintings to diaries and memoirs, mankind has always recorded its experiences and thoughts. A blog can be seen as a form of this fundamental human desire embodied in the digital age.

The philosophical meaning of blogging can be examined from several aspects:

First, a blog functions as an 'extension of the self'. As Heidegger said, 'being-in-the-world', humans confirm their existence by expressing themselves, and project their existence into the digital space through blogs.
Second, a blog is the 'externalization of memory'. Unlike Bergson's pure memory, the experiences recorded on a blog are selective and reconstructed memories, physically embodying our subjective experience of time.
Third, a blog is a medium for 'community formation'. Like Habermas' concept of the 'public sphere', a blog is a space where individual private experiences are transformed into public discourse, forming a place for dialogue where different perspectives intersect.
Fourth, a blog is the 'construction of self-narrative'. Like Ricoeur's 'narrative identity', bloggers continuously write their stories to reconstruct themselves and form their identities.
Fifth, a blog reflects the 'desire for immortality'. It can be seen as an attempt by finite humans to transcend temporal limitations by leaving their thoughts and experiences behind. In this way, a blog can be said to be a modern practice that explores human ontological questions, temporality, relationships, and identity beyond a simple hobby or means of communication.

The above sentence was not written by me, but was received as an answer by asking Claude to think about what a blog is in a humanistic/philosophical way.

Among these, I focus on the second, externalization of memory, and the fourth, construction of self-narrative.

a. Externalization of memory

People often have a special experience that cannot be described in words when writing down their thoughts and concepts. Thoughts that were tangled like a ball of yarn in the head are sometimes organized or sometimes dissipated into quirky but original new ideas as they are written.

I have a habit of writing down various situations that I encounter while working at the company or in everyday life. I usually wrote very mundane things or very extraordinary things.

Among these, when writing about extraordinary things, I tend to supplement my thoughts at the end of the article. I write down what emotions I felt and what my assessment was. In the process, I have sometimes been surprised to find that I was thinking this way. I guess it was probably because I hadn't realized it before, or because the tangled clumps of thoughts were unraveling and I became aware of them myself.

Another aspect is that I study a lot about development while watching YouTube, which has very distinct advantages and disadvantages. The advantage is that I can access the topic I want anytime, anywhere (almost for free!), and the disadvantage is that it is very volatile because I only watch the video with my eyes. And when I watch several videos on similar but slightly different topics, if I just organize them in my head and move on, I have a problem that I can't remember them well at the actual development stage.

So,

I thought, "Let's organize the things I thought and learned in the form of 'writing'

I had that thought.

b. Construction of Self-Narrative

The way I used to write and manage my writing had several problems.

First, because I don't disclose it to the public, it is impossible to receive feedback from anyone about my thoughts.
Also, I couldn't show my expertise to the outside world through what I had learned or was learning.

I think blogging is the best way to solve this problem. I can express who I am and what I think in the form of 'writing', and receive positive/negative feedback, sometimes argue, and maybe even change my mind.

And I expect it to work as part of my portfolio. Since the entire blog post itself will be written by one person, I also predicted that the history and accumulated list of articles would be a means of representing me as a person.

2. Blog Post Management

Well, now that I've decided to start a blog, it's time to implement the functionality as a developer.
The first thing to do in the development phase is usually to design the system structure, organize the use cases, design the DB table schema, and so on.
But before doing any of this, the very first question I had to ask for implementing this blog functionality was: How do I manage blog posts?

How to Manage Contents?

At the very beginning, when I decided to implement the functionality, I didn't know anything about this part. I just vaguely thought that I would have to manage the blog posts, and I thought that it would probably be divided into the following three components. (This classification method will be changed later. You can read the rest of the article for details.)

Blog Id: The ID that identifies the blog post.
Blog title: The title of the blog post.
Blog contents: The body of the blog post.

The issue was how to manage the Content rather than the Blog Id and Title.
This is because blog posts should be able to be composed of various combinations to be displayed on the screen, not just simple text values. When placing things like image insertions, tables, and code snippets in the text, I was wondering how to write this and how to store it in DB.

At first, I vaguely thought of saving it like a post on a general bulletin board. Users must go through WYSIWYG to access the bulletin board and write a post. Of course, it is not necessary for a very basic bulletin board that can only input pure text, but the blog I envision should be able to contain various effects such as images and tables, as mentioned above.

So I naturally had this thought.

Oh, so do I have to make a document writing tool (function) like WYSIWYG?

However, when I think about it, I'm the only one who will be writing on this blog, so I also wondered if I really needed to create another complex function (WYSIWYG).
It felt like I had to buy a typewriter myself to write. First of all, it's a matter of having only a pencil and paper.

Once I got to this point, I thought I should just find out how people generally manage blog posts in the React (Next.js) camp. This is because many people have already 고민ed about the same thing as me, and if there is a best practice, it is the right direction to follow it. This developer portfolio/blog creation project is meaningful to make it myself, but at the same time, I wanted to make it properly.

3. Next.js + Blog

I looked into what methods the Next.js community mainly uses to implement personal blog functionality. I referred to technical blogs and Next.js official documentation.

Rendering

Next.js provides CSR (Client Side Rendering), SSR (Server Side Rendering), SSG (Static Site Generation), and ISR (Incremental Static Regeneration) as rendering methods. And as I found out later, it also supports SEO (Search Engine Optimization) settings, so it can be said to be one of the best frameworks for implementing blog functionality.

CSR
- Rendering in a web browser
- Suitable for pages with many dynamic UI elements or user interactions
SSR
- Dynamically generates HTML on the server every time a user requests it.
- Suitable when data changes frequently or user-customized content is required.
SSG
- Generates HTML in advance at build time and saves it as a static file
- Efficient for blogs where content does not change frequently
ISR
- Incrementally updates content in the background even after creating a static page
- Used when content does not change frequently, but it is difficult to rely on everything at build time.

Among these, I focused on SSG. All content is created in advance, and the server only serves files. I thought it was the most optimized method for blogs.

How to Save Blog Posts

Now that we've looked at how to render blog post pages, let's think about where to save the blog posts themselves.

There are two main ways to save articles.

Database
- Save blog post data in a remote DB
- Suitable when articles are frequently modified or added. Can be modified without rebuilding/deploying
- If you need to consider CMS (Content Management System) integration later, this method is more suitable
Manage as local files
- Save blog contents as md/mdx/json/yaml files locally in the module
- Suitable for static contents that do not change frequently. Requires rebuilding/deploying when adding or modifying contents

I wanted to keep the system as simple as possible, so I didn't want to have a separate external DB. So, the conclusion is that blog posts should be saved/managed as local files.

Combination of Rendering + Saving Method

Let's examine the advantages/disadvantages of each combination of rendering method and article saving method.

However, CSR and ISR were excluded from the rendering methods.
Since CSR renders in the browser, it needs to receive article data from the server, which I thought was not a very good method. Also, ISR seemed to combine the advantages of SSR and SSG, but the system complexity seemed to increase. Also, since it was before the functionality was implemented, I couldn't get a feel for when to use ISR specifically.

So, for now, I thought about the combination of two rendering methods, SSR and SSG, and two article saving methods, DB and local file.

1. SSR + DB

Every time a user requests, the server retrieves blog post data from the DB. Then, it renders on the server based on the article data.
A cache in the middle stage can be introduced to solve performance problems, but there is a problem that the system becomes complicated.
I think it would be suitable if you later upgrade the blog functionality, for example, build a CMS or WYSIWYG system and open Author rights to the outside world.

2. SSR + Local File

Every time a user requests, it reads and parses the file stored locally and converts it to HTML.
Because local files must be read and parsed for each request, frequent Disk I/O occurs constantly.
Also, if there is a problem with the local file (ex: incorrect syntax used), you can only find it after it is deployed to the server. Or, you need to implement an additional script that checks all local files at build time.

3. SSG + DB

This method retrieves DB data at build time to create static content.
It is inefficient for general blog content management. There is no way to reflect dynamic content changes in real time.

4. SSG + Local File

It is a method of reading and parsing local files at build time.
To reflect new content, you need to build/deploy every time, but it is not a big problem if the content is not frequently modified.

I started clone coding with this much understanding.

4. Blog Clone Coding

After reading the Next.js official technical documentation and several technical blog posts and understanding how Next.js manages blogs, I immediately watched YouTube clone coding.

This video is a little over 7 hours long and covers the entire process of building a service from scratch to a well-functioning blog.
By managing blog posts in the SSG (Static Site Generation) method, the initial loading speed is fast and it is also advantageous in terms of SEO.

While watching the video, I was able to understand blog management, which I had only understood abstractly. I understood how the blog post management library works and what parts of the entire development process it intervenes in, and finished watching the video.

However, since the library used in the video is an outdated version, I replaced it with another library and completed the implementation of the blog functionality.

🚨 Caution 🚨

This video was made in September 2023 and uses Next.js 13. There is a slight difference from Next.js 15, which is the latest version as of March 2025. Also, Contentlayer is used to manage blog posts, but this library is not compatible with the latest Next.js 14/15. Therefore, if you are trying to create blog functionality yourself, I recommend watching other videos rather than this one. The video list below utilizes relatively recent Next.js and blog post management libraries.

Conclusion

So far, I have looked at why I decided to create a blog and what underlying technologies are available for implementing blog functionality. And at the end, I watched the clone coding video and implemented the blog functionality myself.

In the next article, I will introduce which libraries I used and which file types I used to manage blog posts.

Thank you for reading to the end!

Comments (0)

Checking login status...

No comments yet. Be the first to comment!

Developer Portfolio Creation - 3

Comments (0)