feat: 初始化博客并完成首篇博文和样式调整

2026-02-20 20:00:14 +00:00 · 2025-08-24 13:53:42 +08:00
parent 1f386abbcc
commit c950606dfb
19 changed files with 412 additions and 79 deletions
--- a/otherdocs/quickStart.md
+++ b/otherdocs/quickStart.md
@@ -0,0 +1,181 @@
+---
+sticky: 999
+description: 1分钟内完成同款博客创建
+descriptionHTML: '
+<span style="color:var(--description-font-color);">1分钟内完成自己的博客创建</span>
+<pre style="background-color: #292b30; padding: 15px; border-radius: 10px;" class="shiki material-theme-palenight"><code>
+    <span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">create</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@sugarat/theme@latest</span></span>
+    <br/>
+    <br/>
+    <span class="line"><span style="color:#B392F0;">bun create</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">@sugarat/theme</span><span style="color:#E1E4E8;"> </span></span>
+</code>
+</pre>'
+tag:
+ - SOP
+top: 1
+sidebar: false
+---
+
+# 快速上手
+1分钟内完成自己的博客创建
+
+:::warning 注意事项
+使用 [pnpm](https://pnpm.io)，[yarn](https://www.npmjs.com/package/yarn)，[bun](https://bun.sh/) ，需要单独安装
+
+**如果喜欢尝鲜，想体验更快的启动和构建速度，推荐使用 bun**（<i style="color:red">windows 用户不建议使用 bun</i>）
+
+其它情况推荐使用 pnpm，*不推荐使用 yarn*
+
+:::code-group
+
+```sh [安装 PNPM]
+npm install -g pnpm
+```
+```sh [安装 bun]
+npm install -g bun
+```
+:::
+
+## 快速创建项目 
+使用 [@sugarat/create-theme](https://github.com/ATQQ/sugar-blog/tree/master/packages/create-theme) 快速创建模板项目
+
+:::code-group
+```sh [npm]
+npm create @sugarat/theme@latest
+```
+```sh [yarn]
+yarn create @sugarat/theme
+```
+```sh [pnpm]
+pnpm create @sugarat/theme
+```
+```sh [bun]
+bun create @sugarat/theme
+```
+:::
+
+:::details bun创建的项目不一样之处
+① 会多出一个配置文件 `bunfig.toml`，默认配置了淘宝镜像源
+
+② 安装依赖后对应lock文件 `bun.lockb`
+
+③ 运行命令需添加一个 `--bun` 参数，不加就是Node运行，体验不到快速(未来官方会做优化)
+:::
+
+当然你也可以自定义项目名创建
+:::code-group
+```sh [npm]
+npm create @sugarat/theme@latest my-first-blog
+```
+```sh [yarn]
+yarn create @sugarat/theme my-first-blog
+```
+```sh [pnpm]
+pnpm create @sugarat/theme my-first-blog
+```
+```sh [bun]
+bun create @sugarat/theme my-first-blog
+```
+:::
+
+接下来按照 [操作指引](https://app.warp.dev/block/lZAFeRnRFgOcsRSUOU5ApV) 进行操作即可
+
+|                              npm/yarn/pnpm                              |                                   bun                                   |
+| :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
+| ![](https://img.cdn.sugarat.top/mdImg/MTY4OTQyMDE1NTcxMA==689420155710) | ![](https://img.cdn.sugarat.top/mdImg/MTY5NjE0NzY1NDEwMA==696147654100) |
+
+
+① 切换到项目的目录
+```sh
+cd my-blog
+```
+
+② 安装依赖
+::: code-group
+
+```sh [pnpm]
+pnpm install
+```
+
+```sh [bun]
+bun install
+```
+:::
+
+③ 开发启动
+:::code-group
+```sh [pnpm]
+pnpm dev
+```
+```sh [bun]
+bun run --bun dev
+```
+:::
+
+
+![](https://img.cdn.sugarat.top/mdImg/MTY5NTIxODUyMDU4MQ==695218520581)
+
+你就会得到一个这样的页面
+
+![](https://img.cdn.sugarat.top/mdImg/MTY3Njk4OTk2Mjc0Nw==676989962747)
+
+④ 构建产物
+:::code-group
+```sh [pnpm]
+pnpm build
+```
+```sh [bun]
+bun run --bun build
+```
+:::
+
+![](https://img.cdn.sugarat.top/mdImg/MTY5NTIxODYwNzA3Nw==695218607077)
+
+默认会开启内置的离线全文搜索（基于 `pagefind` 实现）
+
+如果不需要可以在 `docs/.vitepress/blog-theme.ts` 中关闭
+* 如果`npx pagefind` 时间过长，可以手动将其安装为项目依赖 `pnpm add pagefind`
+```ts
+const blogTheme = getThemeConfig({
+  // 默认开启pagefind离线的全文搜索支持（如使用其它的可以设置为false）
+  // 如果npx pagefind 时间过长，可以手动将其安装为项目依赖 pnpm add pagefind
+  search: false,
+})
+```
+
+⑤ 预览构建产物
+
+:::code-group
+```sh [pnpm]
+pnpm serve
+```
+```sh [bun]
+bun run --bun serve
+```
+:::
+
+![](https://img.cdn.sugarat.top/mdImg/MTY5NTIxODY1NzAzNg==695218657036)
+
+## 升级
+
+如果主题更新了，升级主题，原项目只需执行如下指令即可
+:::code-group
+```sh [pnpm]
+pnpm add @sugarat/theme@latest
+
+# 更新 vitepress 版本（通常安装最新的即可，主题包每次更新不出意外都会使用最新的VitePress）
+pnpm add vitepress@latest
+```
+```sh [bun]
+bun update @sugarat/theme
+
+# 更新 vitepress 版本（通常安装最新的即可，主题包每次更新不出意外都会使用最新的VitePress）
+bun install vitepress@latest
+```
+:::
+
+## 更多
+* [主题配置：首页&文章](https://theme.sugarat.top/config/frontmatter.html) - 主题提供的一些 `frontmatter`
+* [主题配置：全局](https://theme.sugarat.top/config/global.html) - 主题提供的额外能力
+* [主题配置：样式](https://theme.sugarat.top/config/style.html) - 自定义博客样式介绍
+* [主题配置：组件能力](https://theme.sugarat.top/config/component.html) - 自定义博客样式介绍