Methods for Building a Blog, From a Product Designer's Perspective

Foreword

The design and development of the Roominess 5.0 version have finally come to an end. Honestly, I feel that this blog project truly utilized all the design and development knowledge I've acquired, making it a valuable practice. So, from the perspective of a product designer, I'd like to chat with everyone about how to build your own blog.

This article will cover the following two parts: the complete process of building a blog from conception to launch, and recommendations for design/development tools.

Blog Development Process

Blog development mainly involves the following key processes: Planning and Design, Frontend and Backend Development, Deployment and Launch, and Application Optimization. In this chapter, we will introduce the first three parts; website optimization will be covered later as a supplement.

Blog development is a simplified project development process, offering us an excellent opportunity to enhance our understanding and control over the overall project.

Oh, right. One thing upfront: if you just want to own your own website but don't want to handle the technical complexities yourself, "no-code" tools might be a better fit for you. You don't need to write code or maintain servers yourself; you only need to plan, design, and pay. Examples include Framer and Webflow, or you could try Wegic for AI-assisted site building.

As for me, I still prefer traditional development and deployment methods. This gives us greater scope for creativity, allows for a higher degree of customization, and is generally more flexible.

Planning and Design

The planning of a blog primarily involves determining what content the blog needs, and whether that content leans towards static or dynamic. The distinction between static and dynamic content mainly affects subsequent technical selection and development difficulty.

Most content—such as personal project showcases, article lists, portfolios or photo galleries, personal introductions, reading lists, and website update logs—is relatively fixed, can be considered static content, and does not require frequent updates.

There is also content that requires real-time updates, such as article views, likes, comments, or perhaps the music the blogger is currently listening to, or today's water intake. This dynamic content requires real-time data retrieval and is considered dynamic content.

I have also created a table for you to roughly see the distinction between static and dynamic content, as well as its impact on subsequent development.

Reading this article might help you understand static versus dynamic websites: Choosing Between Static and Dynamic Websites

During the early planning phase of the project, the more comprehensive your considerations, the less effort will be needed in later development. However, the technical difficulty of developing a blog is generally low, so even if your initial planning isn't entirely comprehensive, the impact will be minimal; don't stress too much about it.

Once the content architecture is finalized, you can start building design specifications. For a blog, basic elements like color schemes, layout, and typography are sufficient; a massive design system is unnecessary.

I recommend first understanding frontend thinking and development methods before proceeding with design; this will achieve twice the result with half the effort. How can things be more systematic and modular?

Taking blog color system definition as an example:

1. First, select your preferred primary color #0284C7, and use the Tailwind CSS Color Generator to generate a color palette.
2. Then, use the Huetone tool to check and adjust whether the generated palette complies with WCAG 3.0 standards.
3. Finally, just like the Tailwind CSS primary colors, you can fine-tune it yourself based on color sense.
4. The article Designing accessible color systems might give you more systematic ways to build a color system.

On the design side, you need to define font colors and primary colors; functional colors are less necessary. If dark mode adaptation is required, you need to give extra consideration to how colors display in dark mode. The layout framework also needs to be defined in advance; unless it is a highly personalized website, the positions of the major functional modules will not change. Once these two parts—color and layout—are defined, development can proceed concurrently.

Frontend and Backend Development

In this development section, I will primarily focus on frontend development, as I am less familiar with the backend.

Frontend Environment Setup

Taking Mac as an example, the following tools are required for frontend development:

• Code Editor: Visual Studio Code (VS Code): Software used for writing and managing code
• Runtime Environment: Node.js: A platform that allows JavaScript to run on your computer
• Version Control System: Git: A tool used to track and manage code changes
• Package Manager: Homebrew (Optional): A tool that simplifies the software installation process on Mac

The basic process is to first install a package manager (like Homebrew), and then use it to install development-related software such as Node.js, Git, and VS Code. Once installed, you can write code in VS Code and build your blog using Node.js. Then, you use Git to record your code modification history for easy management.

Run the following commands in the macOS terminal to set up your required frontend environment:

# 安装 macOS 软件包管理：brew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# 通过 brew 安装 VS Code、git
brew install --cask visual-studio-code
brew install git
# 安装 node 管理工具：nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
# 通过 nvm 安装长期支持的 node 版本
nvm install --lts
# （可选）安装 pnpm 软件包管理器
npm install -g pnpm

The required frontend environment setup is complete. If you need any additional installations, you can install them via the brew package manager. Network issues need to be resolved independently.

Frontend Technology Stack Selection

The frontend environment is the foundation for developing all frontend projects. Now we need to consider the technology stack selection for this project.

As we discussed earlier, the "content framework" significantly influences technology selection. To help you make a better choice, I have compiled a "Technology Stack Selection" recommendation table based on content characteristics (Static/Dynamic).

I have used Hugo, Next.js, and Astro from the table, and Nuxt is a strong Vue-based competitor to Next.js. My blog has also evolved from Hugo -> Next.js -> Astro, which gives me some credibility. To understand the transition process and reasons, you can check the blog's Changelog.

Among these frameworks, Astro is the one I currently recommend, for the following reasons:

1. Websites built with Astro have excellent performance and load quickly enough.
2. Astro natively supports Markdown, making it very suitable as a framework for a blog.
3. Astro has a relatively gentle learning curve, requiring only familiarity with HTML, CSS, and JavaScript.
4. Static build makes it easy for me to deploy quickly across different platforms later on.
5. The server I purchased has weak performance, and pure static sites require less server power.
6. Static content is also highly suitable for CDN acceleration.

You can also check out the 2023 Web Framework Performance Report, which compares the performance of web frameworks like Astro and Next.js, perhaps helping you make a selection.

Once the environment is configured, taking an Astro project as an example, we can create a new Astro-based project as described in the Astro documentation:

# 如果没有安装 pnpm，npm 请使用 npm create astro@latest
pnpm create astro@latest

Next, you can find some tutorials to learn step-by-step how to write code based on Astro; the barrier to entry is not high.

Once the project is initialized, you might wonder how to connect it with the design specifications. I use Tailwindcss - A utility-first CSS framework for rapidly building custom user interfaces. This acts like a plugin for the project, helping you with frontend development. In Tailwindcss, you can predefine fonts, primary colors, functional colors, and even spacing, rounded corners, etc. At this point, wouldn't this align perfectly with the color and other specifications you defined during design? Configuring it once makes it very convenient to use and adjust uniformly.

# 如果没安装 pnpm，npm 请使用 npx astro add tailwind
pnpm astro add tailwind

Tailwindcss configuration example:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['selector'], // Dark mode support
  theme: {
    colors: {
      white: '#ffffff', // Define color name. Usage: text-white bg-white
      black: '#000000',
      brand: {
        500: '#0ea5e9', // Define brand color. Usage: text-brand-500
        600: '#0284c7',
      },
    },
  },
};

Backend Development

Previously, we chose Astro as the technology stack, which is more suitable for static content development. If your blog requires a lot of dynamic data and needs a simple backend, I recommend using Next.js or Nuxt.

Basic process:

1. Have a database (I recommend Supabase free tier or a database from a domestic cloud provider) to store your data.
2. Link to your Next.js project via the Prisma plugin.
3. Write logic code within the project to operate on the data in the database.

Taking an API query for my "Recent Status" as an example:

export async function GET(req: NextRequest) {
  // GET method
  const number = Number(req.nextUrl.searchParams.get('number')); // Let the program know how many records you want

  const records = await prisma.recent_states.findMany({
    take: number, // Once the program knows, fetch the corresponding number of records from the database
    orderBy: { created_at: 'desc' }, // Sorting method: descending by time
  });

  return Response.json(records); // Returns data in JSON format for easy display on the page
}

By calling this API using the Get method, I can query my recent status and display it on the blog for you to see and understand what I've been up to lately.

Compared to static content, more operations are required. This adds the process of querying and processing the database. If the database access speed or the performance of your cloud server is poor, this will directly affect your website's loading speed. Furthermore, dynamic content is not suitable for deployment via traditional CDN distribution. If website speed is an issue, you should abandon dynamic content.

Deployment and Launch

After the blog has been developed and tested locally, it is recommended to upload it to Github. Github uses Git for online project hosting. This platform is similar to a file version control tool and can manage your project code.

Every time you fix an issue in the code, you can commit it to Github. If the project code ever fails to build, it is very convenient to roll back.

Once the blog development is complete, our main goal is for others to see it. Therefore, we need a location to host the website, and this location must be accessible to everyone. Examples include: home devices with external IP addresses, cloud servers, lightweight application servers, PaaS platforms, etc.

Your home laptop can actually serve as a website hosting device, provided you have an external IP address that others can use to access you over the internet. Currently, external IP addresses usually need to be requested from a service provider. If you use a laptop as a server, your device cannot be turned off, etc. So, there are still some limitations.

Therefore, most people currently deploy their websites primarily on cloud servers or lightweight application servers. These have external IP addresses and are powered on 24 hours a day, making them very suitable as website servers. If high performance isn't necessary, a server costing around 99 RMB per year is sufficient. This is quite affordable. If you are a student, you can get a free server from Alibaba Cloud.

Taking a cloud server as an example, here is a brief introduction to the process:

1. A Linux server, just like a macOS system, requires the installation and configuration of the frontend environment before building.
2. If the files are not too large, you can also build the project locally and then upload the dist package to the server.
3. Configure Nginx forwarding, and you can then access your website via the cloud server's IP address.
4. If you don't want to access it directly via the IP address, you can purchase your own dedicated domain name. Several large domestic cloud platforms offer domain purchasing.
5. After purchasing the domain name, you need to perform DNS resolution. This step can be handled on the platform where you bought the domain or on a specialized DNS resolution platform, such as Dnspod.
6. Bind the A record's IP address to the domain name; this way, you can access your website using the domain name.

The above introduced a simple process. If you need a detailed deployment and launch process, you can refer to Mr. Zuo Zizhen's article: Personal Website Setup Guide for Designers (Part 1): From Domain Name to Website

Alternatively, if you don't want to use your own server and just want to focus on designing and coding, there are many platforms that can handle the server and domain steps for you. After authorization, these platforms pull your project code from your Github repository, build it on their cloud platform, and publish it online.

Similar platforms include Vercel, Zeabur, and Cloudflare Page. This is also a great option if you prefer not to maintain your own cloud server.

Taking Vercel as an example, here is a brief introduction to the process:

1. Create a Github repository and upload the local project code to the private Github repository via Git.
2. Register and log in to the Vercel platform, grant the platform permission to read the Github repository, and select the corresponding project repository.
3. The platform automatically identifies the project framework, starts the build process when you click the button, and displays the build log, allowing for timely troubleshooting if issues arise.
4. Once the build is complete, the platform provides a free subdomain for you to use. By directly accessing this domain, you can see that your website has been published online.
5. You can also choose to purchase a domain name and then follow the platform's prompts to bind the project to your owned domain.

The above provides two ways to deploy your website to the public internet. You can choose based on your preference and the level of difficulty. These two methods can also be combined.

Summary

Due to space constraints, every step of the process was covered, but not in great detail. You will still need to consult other resources for more specifics. This article only provides a general directional overview, and I hope this introduction to the development process is helpful to you.

Design & Development Tool Recommendations

It's not widely known, but I really like collecting things. In website development, I've gathered quite a few useful tools, and I'm taking this opportunity to share them with you; perhaps they can aid your development.

Design

Development