ZL Asica

ZLA xLog

She/Her/Hers | US 不要哭，不要笑，不要恨，要理解。
github
email
bilibili
zhihu
HomeArchives主力博客

SuzuBlog Introduction

#frontend67
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
SuzuBlog is a new blogging system developed from scratch using Next.js, created by the author to address issues faced with WordPress, such as performance, security, flexibility, and modernity. It allows for easy article writing in Markdown and includes SEO optimizations like dynamic generation of robots.txt and sitemap.xml. Users can set up their own blogs in just four simple steps without needing to configure servers or databases. The technology stack includes Next.js, TypeScript, TailwindCSS, and various custom libraries. The design adheres to accessibility standards and focuses on user experience. Migration from WordPress or Hexo is straightforward, requiring minimal adjustments. SuzuBlog aims to solve the author's problems while being beneficial to others, with an invitation for feedback on GitHub.

What is SuzuBlog?#

You may have noticed that my ZLA site has changed from the previous WordPress to a brand new style, and this new style/blog system is SuzuBlog.

SuzuBlog is a blog system based on Next.js that I developed from scratch. Its name comes from the Japanese word for bell, "Suzu," which represents a clear sound and reflects my expectations for this blog system.

Introduction#

Why develop SuzuBlog?#

The WordPress I used before was based on PHP+MySQL, which was the go-to blog system for almost everyone a few years ago. However, over time, I discovered some issues with WordPress:

  1. Performance issues: It's too slow, and I'm not very good at optimizing WordPress performance.
  2. Security issues: Security problems with the MySQL database, WordPress itself, and plugins.
  3. Not flexible enough: Although there are many themes and plugins, I could never find a theme that met my needs.
  4. Not simple enough: The backend management interface is too complicated; I just want to write an article, why do I have to see so many things?
  5. Not modern enough: Although the frontend interface can be customized through themes, it always feels outdated. (For example, the Sakura theme I used before felt like many people were using it, but the theme itself is no longer being updated or maintained.)

Additionally, WordPress is not designed for a Serverless environment, which means you need your own server running an LNMP environment and have to maintain it yourself. The AIFans site I maintained in 2015 also used WordPress, and the database was indeed compromised, which was not a good experience.

Features of SuzuBlog#

I don't want to go into lengthy details about the features of SuzuBlog in this article. If you're interested, you can check out the documentation site I specifically created for SuzuBlog SuzuBlog Docs, or directly view the SuzuBlog GitHub repository SuzuBlog. I have detailed how to get started and use SuzuBlog on the documentation site, and if you're interested in my implementation, you can also view the source code.

In short, SuzuBlog is a blog system based on Next.js. Articles can be written in pure Markdown (this is also why I want to publish an article simultaneously on multiple platforms), and more importantly, it is compatible with Hexo. The same SEO optimization has been specifically optimized, implementing complete robots.txt, sitemap.xml, manifest.json, LD-JSON, etc. It dynamically generates corresponding SEO information based on the article content. Additionally, I have built an automatic RSS generator that allows your articles to automatically generate RSS upon publication.

As a blog system rather than a theme/CMS, to provide a better user experience and customization, I borrowed the method from Hexo's config.yml and placed personalized configuration options here, allowing users to easily customize their blog system.

Reasons to Choose SuzuBlog#

I believe ease of use is a very important feature.

  1. Click the Use this template button to directly create your own repository.
  2. Change the configuration in config.yml.
  3. Then place your articles in the posts folder.
  4. Finally, just create a vercel account, bind your GitHub repository, and you can automatically deploy.

It's that simple, just 4 steps, and it may take less than 10 minutes. No need to configure a server, no need to configure a database, no need to install nodejs, just a GitHub and a Vercel account to set up a modern, high-performance, and highly secure blog.

Tech Stack#

SuzuBlog uses the following tech stack:

  1. Next.js: A full-stack framework based on React that provides various rendering methods such as SSR, SSG, CSR, making SEO optimization easy.
  2. TypeScript: All my source code is written in TS, with no use of JS (to be honest, I don't really like writing projects in pure JS).
  3. TailwindCSS: All the styles you see are written in pure TailwindCSS, without using any CSS preprocessors/style frameworks, no ShadCN, no MUI, no Antd.
  4. gray-matter: A library for parsing markdown front-matter, used to parse the article's front-matter and handle the <!--more--> tag.
  5. react-markdown: A React-specific markdown renderer that wraps remark, used for personalized rendering of markdown. (Because you can directly customize styles for each type of tag)
  6. rss: Specifically for generating RSS in a node environment, you can view the documentation here node-rss.

Additionally, I have the following commonly used utility libraries:

  1. @zl-asica/react: Some React Hooks and utility functions that I have wrapped myself. You can view the documentation here @zl-asica/react.
  2. @zl-asica/prettier-config: My own Prettier configuration; I have OCD, and I can't write if the code isn't neat 🥹. Here is the npm package for direct use @zl-asica/prettier-config.
  3. eslint-config-zl-asica: My own ESLint configuration, same as above 🥹, also available on npm eslint-config-zl-asica.

Style Design#

The underlying logic I designed follows aria standards and WCAG standards, while also being friendly to devices of different sizes (responsive design). However, it is not friendly to IE 11; I'm sorry, I really can't do that. Following the User Center Design philosophy not only allows bloggers/webmasters to write articles more easily and focus on their content creation but also ensures that readers/users can read comfortably, easily, and pleasantly.

During the design process, I drew on some design logic from the two themes I previously used, namely Sakura (which is the WordPress theme I used before, and I believe many people have heard of it) and hexo-theme-nexmoe (this is the theme used for my Hexo site, which has not been shut down, but will gradually migrate to this site).

Migration Guide#

Migrating from WordPress#

If you previously wrote articles in WordPress using markdown, you just need to bring the articles over and add the corresponding frontmatter. It's that simple.

Migrating from Hexo#

Since I mentioned lossless compatibility with Hexo, it's as simple as copying and pasting your articles into the posts folder. The frontmatter format design of SuzuBlog is basically consistent with Hexo.

Migrating from Any Markdown-Based Blog System#

If your blog system uses Markdown, you just need to bring the articles over and add the corresponding frontmatter. It's that simple.

Conclusion#

SuzuBlog is a blog system I developed to solve my own problems, and I hope it can help more people. If you have any questions or suggestions about SuzuBlog, feel free to raise them in the GitHub Issues, and I will respond as soon as possible.

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.