VitePressBlog

sugar-blog — VitePress Blog Template

By ATQQ

A personal blog monorepo based on VitePress, containing blog content, a reusable theme, a creation template, and plugins for search, RSS, and image preview.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews

Desktop homepage1 / 3

Visit websiteOpens in a new tab

Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-01View source

What stands out

A quick read of the recorded project description.

Monorepo structure that maintains blog content, the general theme, shared utilities, and the creation template separately

Provides the @sugarat/theme theme, with a separate theme example repository and theme documentation

Comes with multiple VitePress plugins: image preview, pagefind offline full-text search, RSS, announcements, back-to-top, product cards, and more

Integrates optional capabilities such as 51.la analytics and Artalk and Giscus comments

Provides a create command supporting pnpm, npm, yarn, and bun to create blogs in the same style

The repository code uses the MIT license and includes the full license notice

Template Details

sugar-blog is a monorepo repository used by the author ATQQ for writing a blog. The blog is built on VitePress, and the live site is sugarat.top. The repository separates the blog itself from reusable parts: packages/blogpress holds the blog content, packages/theme is the extracted general-purpose VitePress blog theme @sugarat/theme, packages/shared provides theme-related utility methods, and packages/create-theme is used to quickly create blogs in the same style.

In addition to the theme, the repository also maintains a set of VitePress plugins covering image preview, offline full-text search based on pagefind, RSS based on feed, 51.la analytics, a global announcement window, Artalk and Giscus comments, a back-to-top button, product/project card components, and a plugin development template.

In terms of content, it focuses mainly on knowledge related to large frontend development, including interview questions and knowledge points organized by module, along with a page about the author. Running this project requires first installing pnpm, installing dependencies, and building the theme package, then separately starting the blog or the theme documentation; you can also create a new blog based on this theme via the create command. The repository uses the MIT license, but third-party assets such as demo images, fonts, and icons must be checked against their respective licenses.

VitePressBlog

Is it right for your project?

Use Cases

You want to build a personal blog with VitePress and directly reuse an existing theme
You need to add offline full-text search, RSS, or image preview to an existing VitePress site
You want to reference a real running blog repository to understand how content and theme are split and organized
You want to use this theme as a starting point and quickly generate your own blog project via the create command
You want to reference the plugin implementations and development template in the repository when developing VitePress plugins

Suitable For

Individual developers who write blogs with VitePress
VitePress users who need blog enhancements such as offline full-text search and RSS
Developers who want to reference a monorepo approach to organizing a blog and theme
Writers who want to get started quickly based on an existing theme rather than designing a blog from scratch

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
The repository is a monorepo; before running it, install pnpm and execute pnpm install
2
You need to run pnpm buildlib first to build the npm packages of the dependency packages
3
Use pnpm dev to run the blog, and pnpm dev:theme to run the theme package documentation
4
To create a new blog, run pnpm create @sugarat/theme; the create commands for npm, yarn, and bun are also supported
5
The code uses the MIT license, but third-party assets such as demo images, fonts, and icons must be checked separately for licensing

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This listing covers the free version under the MIT license in the public repository; the free scope is the code of that version and does not mean that external services or third-party assets are free.

Must comply with when using

You are allowed to use, modify, commercialize, and distribute the code of this version for free.
When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

The 51.la analytics plugin requires connecting to the third-party 51.la service, which usually requires registering an account and obtaining a site analytics ID before use.
The Artalk comment plugin depends on a self-hosted or third-party Artalk server; you must deploy it yourself and configure the service address before use.
The Giscus comment plugin depends on a GitHub repository and GitHub Discussions; you must authorize the Giscus app and configure the repository information.
Offline full-text search depends on pagefind generating an index during the build phase, so this tool must be run additionally in the build process.
Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
External services such as domains, hosting, databases, payments, or AI may incur separate charges.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

为 `VitePress` 站点引入 [51.la](https://v6.51.la/) 的网站数据统计能力。
Original README

为 `VitePress` 站点引入 [Artalk](https://artalk.js.org/) 的评论系统。
Original README

为 `VitePress` 站点引入 [Giscus](https://giscus.app/) 的评论系统。
Original README

基于 pagefind 实现的 `VitePress` 离线全文搜索支持插件
Original README

https://github.com/ATQQ/sugar-blog/blob/master/LICENSE https://github.com/ATQQ/sugar-blog/blob/master/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-01. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms: GitHub
Documentation and maintenance reference score: More documented · 91 / 100
Technologies: VitePress
Website type: Blog

How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded: 2026-09-30
Screenshot last checked: 2026-10-01

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies VitePress as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 6f6e15da542d498212e8dd88e506486105b6b59e8622496087064dd409485ae9

2026-10-01T03:49:02.768Z

Source file / repository

<h1 align="center"> 粥里有勺糖 </h1>
<p align="center">你的指尖,拥有改变世界的力量</p>
<p align="center">博客主题：<a href="https://theme.sugarat.top/" target="_blank">@sugarat/theme</a></p>
<p align="center">
    <a href="https://github.com/ATQQ/vitepress-blog-sugar-template" target="_blank">主题示例仓库</a> | <a href="https://github.com/ATQQ/vitepress-plugins-tests" target="_blank">插件测试仓库</a>
</p>

## 仓库介绍

这是一个 monorepo 仓库，包含如下内容
* [blogpress](./packages/blogpress/)：博客内容本身
* [@sugarat/theme](./packages/theme/)：博客分离出的通用 `VitePress` 主题
* [@sugarat/theme-shared](./packages/shared/)：`VitePress` 主题相关的工具方法
* [@sugarat/create-theme](./packages/create-theme/)：用于快速创建和作者一样风格的博客
* VitePress 插件相关：
  * [vitepress-plugin-image-preview](./packages/vitepress-plugin-image-preview/)：为 `VitePress` 站点添加图片预览功能。
  * [vitepress-plugin-pagefind](./packages/vitepress-plugin-pagefind/)：基于 pagefind 实现的 `VitePress` 离线全文搜索支持插件
  * [vitepress-plugin-rss](./packages/vitepress-plugin-rss/)：基于 feed 实现的 `VitePress` RSS 支持插件
  * [vitepress-plugin-51la](./packages/vitepress-plugin-51la/)：为 `VitePress` 站点引入 [51.la](https://v6.51.la/) 的网站数据统计能力。
  * [vitepress-plugin-announcement](./packages/vitepress-plugin-announcement/)：为 `VitePress` 创建一个全局公告窗口。
  * [vitepress-plugin-artalk](./packages/vitepress-plugin-artalk/)：为 `VitePress` 站点引入 [Artalk](https://artalk.js.org/) 的评论系统。
  * [vitepress-plugin-giscus](./packages/vitepress-plugin-giscus/)：为 `VitePress` 站点引入 [Giscus](https://giscus.app/) 的评论系统。
  * [vitepress-plugin-back2top](./packages/vitepress-plugin-back2top/)：为 `VitePress` 站点添加返回顶部按钮。
  * [vitepress-plugin-product-card](./packages/vitepress-plugin-product-card/)：为 `VitePress` 站点添加产品/项目/作品卡片组件。
  * [vitepress-plugin-slot-inject-template](./template/vitepress-plugin-slot-inject-template/)：`VitePress` 插件开发模板。

## 快速创建博客模板
支持多种包管理工具
```sh
# With PNPM:
pnpm create @sugarat/theme

# With NPM:
npm create @sugarat/theme@latest

# With Yarn:
yarn create @sugarat/theme

# With Bun
bun create @sugarat/theme
```
## 运行本项目
这是一个 monorepo 仓库，博客基于[vitepress](https://vitepress.dev/)搭建，运行前需先安装依赖，构建主题包

① 先安装 `pnpm`
```sh
npm i -g pnpm
# 安装依赖
pnpm install
```

② 构建依赖包的npm包
```sh
pnpm buildlib
```

③ 运行
```sh
# 运行博客
pnpm dev

# 运行主题包文档
pnpm dev:theme
```

## :pencil:关于内容
大前端开发相关知识，包含但不限于前端

记录面试中所遇的问题，并整理相关知识点，分模块进行了梳理

## :speak_no_evil:[关于笔者](./docs/aboutme.md)
21年毕业，目前就职于美团，热爱大前端开发技术

热爱开源，乐于分享

![图片](https://img.cdn.sugarat.top/mdImg/MTYwNDcyMTQ4NTMyOA==604721485328)

## :link:个人相关链接

* [粥里有勺糖●博客园](https://www.cnblogs.com/roseAT/)
* [ATQQ●GitHub](https://github.com/ATQQ)
* [ES6笔记●GITBOOK](https://sugar-js.gitbook.io/-1/)
* [blog●GitBook](https://sugar-at.gitbook.io/blog-article/)
* [掘金](https://juejin.im/user/1028798615918983)

## :phone:联系我
如对博客内容，知识，排版等有疑问或者建议，欢迎邮件和我联系

**邮箱:[email protected]**

![公众号](packages/blogpress/public/mp-code.png)

## :coffee:赞赏
|                                  微信                                   |                                微信赞赏                                 |                                 支付宝                                  |
| :---------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
| ![](https://img.cdn.sugarat.top/mdImg/MTY1MTU0NzQ0MjMzNA==651547442334) | ![](https://img.cdn.sugarat.top/mdImg/MTY0Nzc1NTYyOTE5Mw==647755629193) | ![](https://img.cdn.sugarat.top/mdImg/MTY1MTU0NzQyOTg0OA==651547429848) |

## Star History

[![Star History Chart](https://api.star-history.com/chart?repos=atqq/sugar-blog&type=date&legend=top-left)](https://www.star-history.com/?repos=atqq%2Fsugar-blog&type=date&legend=top-left)

## Stargazers over time
[![Stargazers over time](https://starchart.cc/ATQQ/sugar-blog.svg?variant=adaptive)](https://starchart.cc/ATQQ/sugar-blog)

## Project Status

![status](https://repobeats.axiom.co/api/embed/49625195d138fdaccc82ef70c9645d9a85afda5f.svg "Repobeats analytics image")

## Contributors

Thanks to all the contributors!

<a href="https://github.com/atqq/sugar-blog/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=atqq/sugar-blog" />
</a>

Made with [contrib.rocks](https://contrib.rocks).

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

vitepress-nav-template

A personal front-end navigation page template built on VitePress, created by maomao1996 under the MIT license.

VitePress · Blog

vitepress-blog-pure

A minimalist VitePress blog theme used by copying files into the project root. It provides post lists, tags, archives, local search, and Giscus comments, with posts placed in the posts directory and title required in frontmatter.

VitePress · Blog

vitepress-blog-starter

A VitePress-based blog starter template with runnable example content for posts and authors, blog logic organized through Composables, UnoCSS styling, and VitePress's built-in local search. It uses pnpm for installation, development, and build, and the repository is MIT licensed.

VitePress · Blog

vitepress-theme-trigger

vitepress-theme-trigger is a blog theme for VitePress built with Tailwind CSS, released under the MIT license.

VitePress · Blog

KiwiBlog

KiwiBlog is a Chinese personal blog template built on VitePress for publishing daily shares and articles.

VitePress · Blog

vitepress-theme-ououe

A VitePress-based blog theme maintained by tolking and licensed under MIT. It is installed via npm, imported and default-exported in .vitepress/theme/index.ts, and configured in .vitepress/config.ts with defineConfigWithTheme and the Theme type.

VitePress · Blog