Building a Full-Stack Blog, Part 1: Technology Selection

Introduction

Welcome to my new blog! I had previously employed Hexo to construct a static blog, but as my needs evolved, its limitations became increasingly apparent. Consequently, I've resolved to embark on the creation of an entirely new full-stack blog from the ground up. This endeavor presents not only a technical challenge but also a valuable opportunity to synthesize my past experiences and delve into novel technologies.

In this reimagining, my objective is to rectify the pain points I previously encountered while integrating innovative features to render the blog more efficient and contemporary. The core objectives I aspire to achieve are outlined below:

1. Ubiquitous Composition: To transcend the confines of full-scale builds, enabling the transcription of inspiration from any locale.
2. Autonomous Data Sovereignty: To archive all data within a database, thus ensuring portability and absolute control.
3. Real-Time Updates: To facilitate the immediate effectuation of published articles while maintaining optimal performance and SEO augmentation.
4. Flexible Customization: To incorporate support for internationalization and integrate AI tools, particularly within the administrative dashboard.
5. Comprehensive Technical Realization: To encompass the entire developmental trajectory, from front-end to back-end and culminating in server deployment.
6. Discrete Front-End and Back-End: To implement independent development and deployment of the front-end, administrative dashboard, and back-end components.

Why Revamp the Blog?

Static blogs, while undeniably simple to operate, reveal their inherent limitations as requirements become more sophisticated. The following constitute the primary drivers for my choice to undertake this reconstruction:

1. Performance and User Experience: Static blogs suffer from protracted build times during periods of high update frequency or voluminous content. Dynamic blogs, on the other hand, are equipped to deliver real-time updates, thereby substantially enriching the user experience.
2. Extensibility: Dynamic blogs offer unparalleled flexibility in terms of feature expansion, allowing for the unbridled implementation of diverse functionalities.
3. SEO Advantage: Dynamic blogs inherently support real-time content updates and dynamic generation of site maps, fostering rapid indexing of the latest content by search engines.
4. High Customizability: The dynamic architecture provides the malleability to satisfy the demands of internationalization, multilingual support, and the integration of prospective AI functionalities.

Technology Stack Selection

For this project, I have chosen Next.js and Go as the foundational technologies for the front-end and back-end, respectively. To streamline the development of the administrative dashboard, I have also selected React and Ant Design (AntD). The technical stack analysis is as follows:

Why Choose Next.js?

Next.js, a React-based framework, boasts a robust ecosystem and an array of modern features. Its pivotal advantages include:

1. Server-Side Rendering (SSR) and Static Site Generation (SSG):
   • SSR: By generating HTML on the server side, it significantly enhances first-paint load speeds and SEO performance.
   • SSG: Ideal for pages that are not frequently updated, it generates static pages during the build process, offering a swifter browsing experience.
2. React Ecosystem Support:
   • React’s component-based approach to development fosters increased code reusability and maintainability, making it perfectly suited for the creation of complex interfaces.
   • The vast array of community resources amplifies development efficiency.
3. Abundant Tools and Plugins:
   • Next.js is equipped with an array of integrated tools and plugins, such as routing management and data fetching, which drastically simplify the development process.
   • It supports internationalization, facilitating the implementation of multilingual capabilities.

Why Choose Go?

Go, a programming language that emphasizes performance and conciseness, is an ideal choice for back-end services. Its key features are:

1. Superior Performance and High Concurrency: Go's goroutines and lightweight threading model ensure exceptional performance when processing a substantial number of concurrent requests.
2. Elegant Syntax and Robust Standard Library: Go’s syntax is succinct and intuitive, rendering it easy to learn. Its standard library encompasses practically all commonly used functionalities, thereby minimizing reliance on third-party dependencies.
3. Cross-Platform Compatibility and Low Maintenance: Compiled Go binaries are compact, efficient, and readily deployable across multiple platforms without the need for complex operating environments.
4. Vibrant Community and Flourishing Ecosystem: Go’s exceptionally active community furnishes an extensive collection of third-party libraries and tools, thus enhancing development efficiency.

Admin Panel Front-End: React + Ant Design

To facilitate efficient management of blog data, an administrative panel has been incorporated into the project. This panel is built utilizing React and Ant Design (AntD), endowing it with the following functionalities and attributes:

1. Rapid UI Construction:
   • Ant Design offers an extensive library of UI components, enabling the rapid development of consistent and aesthetically pleasing user interfaces.
   • The components encompass a broad spectrum of common administrative requirements, such as forms, tables, and modal windows, thus diminishing manual design time.
2. Streamlined CRUD Operations:
   • The admin panel is primarily intended for the execution of CRUD operations on blog data; Ant Design's form and table components accelerate the implementation of these functionalities.
3. Seamless Back-End Integration:
   • The flexibility of React and the ease of use of Ant Design empower developers to focus on business logic and effortlessly interface with back-end APIs.
4. High Scalability:
   • React and AntD are fully equipped to support the expansion needs of the admin panel, whether that involves future permissions management or data analytics functionalities.

This design yields an admin panel that is not only highly efficient to develop but also easy to maintain, thereby creating a robust foundation for the long-term evolution of the blog.

Why Not Directly Use Next.js for the Back-End?

While Next.js does offer back-end development capabilities, it is not specifically engineered for high-performance back-end solutions. The decision to use Go as the back-end is rooted in the following considerations:

1. Specialized Role Distribution:
   • Next.js is dedicated to front-end rendering and user interaction, optimizing its server-side rendering capacities.
   • Go is exclusively focused on managing high-performance back-end APIs and business logic.
2. Performance Demands:
   • Go is the more suitable choice for back-end services that necessitate rapid response times and minimal resource utilization.
3. Deployment Agility:
   • Go’s compiled programs do not require complex operating environments, offering streamlined deployment and minimal size.

Why Choose a Self-Managed VPS Over Vercel?

Despite the convenient deployment solutions offered by Vercel, I have chosen a self-managed VPS, primarily to gain greater control over intricacies and enhance my technical expertise. The following is a comparison:

References

Below are the official websites for the technologies used:

• Next.js Official Website: https://nextjs.org
• shadcn/ui Official Website: https://ui.shadcn.com
• React Official Website: https://react.dev
• Go Official Website: https://golang.org
• PostgreSQL Official Website: https://www.postgresql.org
• Ant Design Official Website: https://ant.design
• Tailwind CSS Official Website: https://tailwindcss.com
• Gin Official Website: https://gin-gonic.com
• Gorm Official Website: https://gorm.io