A Product Designer's Perspective on Building a Blog

Introduction

The design and development of Roominess 5.0 is finally complete. To be honest, I feel that this blog project has really put my design and development knowledge to good use, and it's been a good practice. So, from the perspective of a product designer, I'd like to talk to you about how to build your own blog.

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

Blog Development Process

Blog development mainly includes the following major processes: planning and design, front-end and back-end development, deployment and launch, and application optimization. In this chapter, we will introduce the first three parts, and website optimization will be introduced later as a supplement.

Blog development is a simplified project development process, which provides us with an excellent opportunity to improve our understanding and control of the overall project.

Oh, right. One more thing to say in advance, if you just want to have your own website and don't want to do it yourself, then "no-code" tools may be more suitable for you. You don't need to write code yourself, you don't need to maintain the server yourself, you only need to plan, design, and pay. For example, Framer, Webflow, or you can try AI to help you build a website Wegic.

As for me, I still prefer the traditional development and deployment method. This will give us more room to play, we can achieve a higher degree of customization, and it is more flexible overall.

Planning and Design

The planning of a blog is mainly about planning what content the blog needs, and whether this content is more static or dynamic. The difference between static and dynamic will mainly affect the subsequent technical selection and development difficulty.

Most of the content, such as personal project display, article list, works or photo collection, personal profile, reading list, website update log, etc., is relatively fixed and can be regarded as static content, which does not need to be updated frequently.

There is also some content that needs to be updated in real time, such as the number of views, likes, and comments of articles, or the music the blogger is currently listening to, the amount of water drunk today, etc. This dynamic content needs to obtain data in real time and can be regarded as dynamic content.

I have also listed a table, you can roughly look at the difference between static and dynamic content, and the impact on subsequent development.

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

In the early planning stage of the project, try to consider everything as comprehensively as possible, and the later development will be easier. However, the technical difficulty of blog development itself is very low, even if you don't think comprehensively enough at the beginning, the impact is very small, don't have too much psychological burden.

After the content architecture is determined, you can enter the field to build design specifications. For a blog, basic things like color system, layout, and font are enough, and you don't need a huge design system.

I recommend that you first learn about the thinking and development methods of the front-end, and then design, so that you will get twice the result with half the effort. How to be more systematic and modular.

Taking the definition of blog color system as an example:

1. First select your favorite theme color #0284C7, and use Tailwind CSS Color Generator to generate a color palette
2. Then use the Huetone tool to check whether the generated color palette conforms to WCAG 3.0 specifications
3. Finally, you can also fine-tune it based on your color sense, just like the theme color of Tailwind CSS.
4. Designing accessible color systems This article may give you more systematic color system construction methods.

The design side needs to define font colors and theme colors, and functional colors are not used much. If you also need to adapt to dark mode, you need to consider the display effect of colors in dark mode. The layout framework also needs to be defined in advance. If it is not a particularly personalized website, the positions of several functional modules will not change. After defining the colors and layout, development can also be carried out simultaneously.

Front-end and Back-end Development

I will mainly introduce front-end development in this section, and I don't know much about back-end development.

Front-end Environment Configuration

Taking Mac as an example, the following tools are required for front-end development:

• Code editor: Visual Studio Code (VS Code): Software for writing and managing code
• Running environment: Node.js: A platform that allows JavaScript to run on computers
• Version control system: Git: A tool for tracking and managing code changes
• Package manager: Homebrew (optional): A tool to simplify the software installation process on Mac

The basic process is to first install the software market, and then install development-related software such as Node.js, Git, and VS Code in the software market. After the installation is complete, you can write code in VS Code and build your blog with Node.js. Then use Git to record your code modification logs for easy management.

Running the following commands in the macOS terminal can configure the front-end environment you need:

# Install macOS package management: brew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# Install VS Code and git through brew
brew install --cask visual-studio-code
brew install git
# Install node management tool: nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
# Install the long-term supported node version through nvm
nvm install --lts
# (Optional) Install pnpm package manager
npm install -g pnpm

The front-end environment required is now configured. If you need to install anything else, you can install it through the brew software market. You need to solve network problems yourself.

Front-end Technology Selection

The front-end environment is the basis for developing all front-end projects. Now we need to consider the technology selection for this project.

As we discussed earlier, the "content framework" has an important impact on technology selection. To help you make a better choice, I have compiled a "technology selection" recommendation table based on content characteristics (static/dynamic).

I have used Hugo, Next.js, Astro in the table, and Nuxt is a stronger Vue-based competitor to Next.js. My blog has also undergone changes from Hugo -> Next.js -> Astro, which is also a bit convincing. To understand the history of changes and the reasons, you can check the blog update log.

Among these frameworks, Astro is what I currently recommend. The specific reasons are as follows:

1. Websites built with Astro have excellent performance and load fast enough
2. Astro natively supports Markdown, which is very suitable as a framework for blogs
3. The Astro learning curve is relatively gentle, you only need to be familiar with HTML, CSS and JavaScript
4. Static building is convenient for me to quickly deploy on different platforms in the future
5. The server I purchased has weak performance, and pure static has low requirements for the server
6. Static content is also very suitable for configuring CDN acceleration

You can also check the 2023 Web Framework Performance Report. The report compares the performance of web frameworks such as Astro and Next.js, which may help you make a choice.

After the environment configuration is complete, taking the Astro project as an example, we can refer to the Astro documentation to create a new project based on Astro:

# If you don't have pnpm installed, please use npm create astro@latest
pnpm create astro@latest

Next, you can find some tutorials to learn how to write code based on Astro step by step. It's not difficult to get started.

After the project is initialized, you may be wondering how I can link it with the design specifications. I am using Tailwindcss - Utility-First CSS Framework for Rapid UI Development. This is like a plugin for the project, which can help you better carry out front-end development. In Tailwindcss, you can predefine fonts, theme colors, functional colors, and even spacing, rounded corners, etc. At this time, isn't it in line with the color and other specifications you defined during design? Once configured, it is very convenient to use and adjust uniformly.

# If you don't have pnpm installed, please use 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 Call method: text-white bg-white
      black: '#000000',
      brand: {
        500: '#0ea5e9', // Define brand color The call method is the same: text-brand-500
        600: '#0284c7',
      },
    },
  },
};

Back-end Development

We chose Astro as the technology stack before, which is more suitable for the development of static content. If your blog needs a lot of dynamic data and you need a simple back-end, then I recommend you use Next.js or Nuxt.

Basic process:

1. Have a database (recommended Supabase free or a database from a domestic cloud vendor) to store your data
2. Link to your Next.js project through the Prisma plugin
3. Write logic code in the project to operate the data in the database

Take an API that queries my "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 pieces of data you want

  const records = await prisma.recent_states.findMany({
    take: number, // After the program knows, go to the database to get the corresponding amount of data
    orderBy: { created_at: 'desc' }, // Sorting method Sort in descending order by time
  });

  return Response.json(records); // Return data in json format, which is convenient for returning to the page
}

By calling this API through the Get method, I can query my recent status and then display it on the blog so that you can see and understand what has happened to me recently.

Compared with 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 not good, this will also directly affect the access speed of your website. Moreover, dynamic content is not suitable for deployment in traditional CDN distribution. If the website access speed is not good, you should give up dynamic content.

Deployment and Launch

After the blog is developed and tested locally, it is recommended to upload it to Github. Github is used to host online projects using Git. This platform is similar to a file version management tool, which can manage your project's code.

Each time you modify a code problem, you can submit it to Github. If there is a problem with the project code construction, you can roll back very conveniently.

After the blog is developed, we mainly want it to be seen by others. Then, we need a place to host the website, and this place also needs to be accessible to everyone. For example: family equipment with an external network IP, cloud server, lightweight application server, Paas platform, etc.

Your home laptop can actually be used as a device to host the website, provided that you need to have an external network IP so that others can access you on the Internet. Currently, external network IPs need to be applied for with customer service. If you use your laptop as a server, your device cannot be turned off, etc. There are still some limitations.

So currently most people will mainly deploy their websites on cloud servers and lightweight application servers. These have external network IPs and are turned on 24 hours a day, which is very suitable as a website server. If you don't need very good performance, a device that costs 99 yuan a year is enough. It's still very affordable. If you are still a student, you can get a free server on Alibaba Cloud.

Taking a cloud server as an example, let's briefly introduce the process:

1. The Linux server needs to install and configure the front-end environment like the macOS system, and then build
2. If the file is not very large, you can also build it locally and then upload the dist package to the server
3. Configure nginx forwarding, and you can access your website through the cloud server IP address
4. If you don't want to access it directly through the IP address, you can also purchase your own exclusive domain name. Several larger domestic cloud service platforms can purchase domain names
5. After purchasing the domain name, you need to perform DNS resolution. You can handle this step on the platform where you purchased the domain name or on a dedicated DNS resolution platform, such as Dnspod
6. Bind the IP address of the A record to the domain name, so that you can access your website through the domain name

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

If you don't want to use your own server, you just want to design and write code, then there are actually many platforms to make up for the two steps of server and domain name. These platforms pull the code of your project from your Github repository after authorization, and then build and publish it on their cloud platform.

Similar platforms include Vercel, Zeabur, Cloudflare Page, etc. If you don't want to maintain your own cloud server, this is also a good way.

Taking Vercel as an example, let's briefly introduce the process:

1. Create a Github repository and upload the local project code to the Github private repository through Git.
2. Register and log in to the Vercel platform, give the platform permission to read the Github repository, and select the corresponding project repository.
3. Automatically identify the project framework, click the button to build, the platform will display the build log, and you can troubleshoot in time if there is a problem.
4. After the build is complete, the platform will provide a free secondary domain name for you to use. You can directly access the domain name to see that your website has been published on the Internet.
5. You can also choose to purchase a domain name, and then bind the project to the domain name you own according to the platform prompts.

The above provides two ways to deploy the website to the external network, you can choose according to your preferences and difficulty. These two methods can also be combined.

Summary

Due to space limitations, each process has been mentioned, but it has not been explained in very detail. You still need to search for other materials yourself. This article can only provide general direction guidance. I hope this introduction to the development process can help you.

Design & Development Tool Recommendations

As everyone knows, I really like to hoard things, so in the website development area, I have also collected a lot of useful tools, etc. I will take this opportunity to share them with you, which may help your development.

Design

Development